jParallax - pseudo 3D internet

Somehow I saw a funny design with a monkey, behind which is a very entertaining background that dynamically changed when the size of the bruser window was changed.

This was achieved by moving several parallel layers.



With this effect, you can create many very interesting pieces (links to interesting pieces are attached below).
In addition, I want to share with you a very interesting script that practically automates the process of creating parallel layers.
')

jParallax

As you have probably noticed by the “j” prefix, this is nothing more than a jQuery plugin.
jParallax captures the child elements of the block to which you want to apply this effect, and moves them when you hover and move the mouse.
The size of the plug-in uncompressed only 12 kilobytes.

We work with jParallax

jParallax, like almost all plug-ins for jQuery, reduce all the fuss with the code to nothing.

First we need to download the library itself and connect it to your page. Then we create a block, for example, with id parallax , in which there will be several images to which you want to apply this effect.

Now we add a line, after which everything already, in principle, works:

  jQuery ('# parallax'). jparallax (); 

In addition, you can change the animation speed, the default position of the layers, etc., which you can read in great detail at the office. plugin site.

View great demo # 1
View great demo # 2
View great demo # 3
Visit the office. jParallax plugin website

Subscribe to Chernev's notes