Well, this is my first plugin.

Pssst ! You should try to pass your mouse over the image now.

parallax15parallax14parallax13parallax12parallax11parallax10parallax09parallax08parallax07parallax06parallax05parallax04parallax03parallax02parallax01
Exemple of Image Parallax effect

Feel free to ask any question about it in the comments.

This plugin is based on Steve Fenton’s jQuery Image Parallax script. I edited it a lot though.

Well, if you want to generate a kinda 3D “parallax” effect on your pictures in a second (after you spent an hour to separate every single layer and made a .PNG file of each ground) and publish it into your blog post, this is the WordPress Plugin you’re searching for !

It create a new post type called “Parallax”. You can find it in the “Media” menu.

A “Parallax” post is meant to receive the layers : the .PNG images we were talking about. Simply drag your files into the “Upload Layers” box. After they loaded, make sure that they will display in the right order : from the frontground to the background. You can order them by giving them a number with the tiny form in your “Gallery” list.

The title will be the caption of our effect.

The original picture should be used as featured image. Try to use the same dimensions for every image.

You can also play with the intensity of size difference between the layers, and allow or not the vertical or horizontal mouse control.

After publishing, you’ll get the ID of the post (the number after “?post=” in the address bar up there). Keep that number in mind.

Then, when you’ll write another post, at the place you want to display our effect, write the shortcode [parallax id="THE_NUMBER_I_WAS_TALKING_ABOUT"].


Download the plugin

Enjoy folks !

30 Comments
June 30, 2012

aishwarya

I am using your wordpress plugin. But the resultant parallax is small. All my images are 920 X 241 in dimension. help!

Reply
Avatar of WebMaestro
June 30, 2012

WebMaestro

Hi aishwarya !
The plugin uses the medium image size defined in your WordPress admin in Settings > Media.
If you change it, you’ll have to re-upload the images again, because WordPress is generating the thumbnails at this step only.
As soon as I got a bit more time I will work on this and update the plugin.
… Otherwise, what do you think about it ? Funny hey ?!
Have a nice day, keep me informed if you get troubles.

Reply
Avatar of WebMaestro
July 3, 2012

WebMaestro

Hello again aishwarya,
If you’re still concerned about this issue, try to replace medium by large, line 54 in image-parallax.php.

Reply

July 1, 2012

Don Orkoskey

I’m curious if your plugin could be used for background images and how to edit it to do so. I’m unfamiliar with jquery and have not written any javascript in a very long time. Any chance you’ll be creating such a plugin any time soon?

Reply
Avatar of WebMaestro
July 1, 2012

WebMaestro

Hi Donald !
The code itself could be used for this purpose, I guess.
But I don’t plan to update the plugin in that way, sorry. In case you make such a thing, I’m really willing to see the result !
Good luck Don, have a nice day !

Reply

July 3, 2012

Del

Hi, Really like the plugin! One question is there a way to have the top image static?
So I have a PNG image on top that does not move but the image below moves.

Regards Del

Reply
Avatar of WebMaestro
July 3, 2012

WebMaestro

Hi Del !
Well, you could maybe hack the plugin with a bit of CSS, by inserting an image after the effect and playing with its position… You may get some issues about the mouse control though. … Or, maybe, hack directly the plugin’s javascript file (imageparallax.js) by replacing the line 76 by : for (var i = 1; i < imageArray.length -1; i++) {
I haven’t tried it though.
Tell me how well it goes. Have a nice day.

Reply

July 3, 2012

Del

I tried it and it works perfect cheers :)

Great plugin!

Reply
July 3, 2012

Del

Sorry one last thing I have noticed it stretches the pixels is their anyway to keep the images the size as I upload them?

Many thanks Del

Reply
Avatar of WebMaestro
July 3, 2012

WebMaestro

Mmmh… the plugin use the ‘medium’ images resized by WordPress. Try to force the width and height properties with css.
Or, replace medium by large, line 54 in image-parallax.php.
The size of the images is an update I should work on this coming month.

Reply


July 29, 2012

Dan

Hey great plugin. I do notice that the movement has changed. Couple days ago the front image was sliding properly, now it is sliding in counter-direction of mouse movement. Did you change some parameters?

Reply
Avatar of WebMaestro
July 29, 2012

WebMaestro

Hi Dan !
Yes, it is part of last update major changes. I judged it more intuitive but you make me think that I should provide the choice in the setting box… For the moment, if you want to come back to the original movement : in the imageparallax.js file, replace line 41 by ratioX = parseInt(e.pageX - offset.left - ( parallax.w / 2 ), 10) / parallax.w, and line 42 by ratioY = parseInt(e.pageY - offset.top - ( parallax.h / 2 ), 10) / parallax.h;

Reply
July 29, 2012

Dan

Hey webmaestro,
Thanks for the info! A settings box in the back-end would indeed be a great addition. Or how about an *optional* front-end settings box (or some presets) for visitors to play with. Should also have a button to reset to webmasters predefined setting.

Reply


July 31, 2012

Steve

Hello!
I seem to only be able to get this plugin to work on “Posts” and not “Pages”. Should it? If not, is there an easy way to get it to work on “Pages” as well? Thanks!

Reply
August 24, 2012

baikuntho pathak

i guess it is not possible to create a parallax type post in wordpress 3.4.1

media -> create new parallax ->

gallery settings : link thumbnails to attachment page ( and link to none setting on individual images )

gallery columns 3

order ascending

order by menu order

GALLERY COULD NOT BE INSERTED BY CLICKING THE INSERT BUTTON. BUT IT IS WORKINNG NORMALLY ON “NORMAL” POSTS. HELPPPPP!

Reply
Avatar of WebMaestro
August 24, 2012

WebMaestro

Hi !

Well, you’re not supposed to insert the parallax as a gallery, but as a shortcode inside your normal posts. This way, it’s possible to insert multiple parallax effects in a post.

Reply

August 27, 2012

baikuntho pathak

thanks! we’d really appreciate if you could upload an youtube demo using some screen recorder at wordpress. using short codes in post was already clear. but i am confused ( and unable to create ) about creating the parallax-type content. let’s assume i have drag-n-dropped / uploaded two iamges in the gallery. then what – to click the “insert gallery” for creating the parallax-type content or not? i am talking about the edit / create parallax module- i am unable to create it. if you don’t click “insert gallery” button the visual editor remains blank. i hope you get my point!

Reply
Avatar of WebMaestro
August 27, 2012

WebMaestro

Hi again !
You don’t need to insert the gallery anywhere.
Once you uploaded your images, click on “publish” or “update” on the same page : the parallax is created. You cannot see it yet : you need to call it in a POST or a PAGE.
Alright, create a new post : Posts > Add new. In the visual editor, write the shortcode. Now save and view your post : here you go !
Tell me how it goes.

Reply
Avatar of WebMaestro
August 27, 2012

WebMaestro

About the youtube demo… why not ! Give me some time though.

Reply

August 28, 2012

vanGore

How can i set the parallax as background in my hoimepage? Is it possible?

Reply
Avatar of WebMaestro
August 31, 2012

WebMaestro

Sure, simply insert the shortcode in your page content ^^.

Reply

September 4, 2012

Davidson

Managed to get the images to appear in full resolution, but is there anyway to get the container div the same size as the images?

Reply
Avatar of WebMaestro
September 4, 2012

WebMaestro

Hi ! Well, the solution would be to change your Settings > Media > Image sizes. For many reasons, it’s better to use the WP generated images. Resizing is often a pain in the neck if you don’t regenerate the thumbnails.

Reply

October 10, 2012

George

Hi WebMaestro, this plugin is so cool, I’m planning to install it in my wordpress blog. This seems like a very cool plugin. I don’t plan to use it in my post though but I want to use it as a layered background effect. Is there a way I can put the shortcode directly to the html/php and replace my current background with your cool parallax one? Let me know if that’s possible, would love to do that on my website. Thanks much, hope everything’s well over there.

George

Reply
Avatar of WebMaestro
October 10, 2012

WebMaestro

Hi George ! I’m glad you enjoy it ^^ !
About your idea though, I think you’ld rather use the Image Parallax jQuery plugin.

Tell me how it goes.

Reply
October 10, 2012

George

Hi WebMaestro, thanks for the swift reply. I haven’t tried it though but I will and see how it works. Thanks for the Image Parallax jQuery plugin too but the thing is, I don’t know where to put the code. I’m not a code guy actually, more of a designer. Hehe So I’m having a bit of a problem installing the Image Parallax jQuery plugin in my website. =)

Reply

Avatar of WebMaestro
October 10, 2012

WebMaestro

In coding terms for your particular project, it would be easier to use the jQuery plugin than the WordPress one I made.

This is quite a good challenge for a designer. WebDesign is an interesting business, jQuery is a really nice aspect of it, and WordPress themes is a fruitful market. Go ahead man, do it yourself. It will take you many hours, but sooner than you think you’ll enjoy new skills !

Reply

October 11, 2012

iliketigobittys

I cannot figure out how to make it move the foreground image instead of the background image. Any ideas?

Reply
April 22, 2013

Mako

Hi ! first thank for your great plugin and for the time you take to build it !
i having a trouble to make it works whit the version 3.5 of wordpress, did you know what i have to change to make it compatible ?

Reply
Avatar of WebMaestro
April 22, 2013

WebMaestro

Hi Mako.

It’s compatible with WordPress 3.5 already. Maybe you didn’t set it properly. Do you have any error alert ?

Reply

Leave a Reply