Last Updated:

Site background with parallax effect in jQuery

 

Web design does not stand still, every day there are new technologies that find their application in the development of the site. This is not surprising, because the user needs to be surprised, colorful design, excellent construction is the best advertising for your resource. At this time, technologies allow you to create masterpieces of site building, everything is limited only by the imagination and skill of the developer. Recently, sites with an amazing parallax effect have begun to appear, which creates the illusion of three-dimensional images.

You can find a lot of interesting materials for yourself, as well as free templates and not only from our partners below, try and do not miss interesting offers:

Such effects make a positive impression on users, and fascinate their eyes. In this tutorial, we will look at how to create an amazing background for a parallax site using jQuery. This background is perfect for a business card site or for some promo site. And so let's get started, first we'll plug in the jQuery scripts:

 

The markup is not particularly complicated, for this we just need to connect the images:

 

For this effect, we will use the jquery.plaxmove script.js, which is in the sources. Next, we'll look at the CSS styles in which we'll define positioning for the images to be used in the demo:

 

After that, we initialize the plug-in itself, which is called by the following command:

 

 

Settings

  • ratioH - Horizontal Mouse Modifier
  • ratioV - Vertical Mouse Motion Modifier
  • reversed — swaps X and Y (mouse movement changes the position of the object vertically and vice versa)
  • invertH - invert mouse movement horizontally
  • invertV — invert mouse movement vertically

Settings are specified when the script is initialized and can be combined in any combination.