IMPORTANT: The use of Parallax-img-scroll is free for both personal and commmercial use.
DEMO: Parallax Image Scroll
Other pages using it: TriviaLine
* Page reload fix. Scroll to top on page load. * Page Loader added: adds a "Loading Page" which fades out after all images have been loaded. Simply set "pageLoader: true" in your configuration.- Download parallaxImg.js from here
-
Add it to your <head> like:
<script src="js/parallaxImg.js" type="text/javascript"></script>
-
Call Parallax Image Scroll on Document Ready
$(document).on("ready", function() { parallaxImgScroll(); }); -
In your HTML wrap you only need to add the class parallax-img-container to the wraper containing the information itself (e.g. it can have a video, images, text, etc. every element that will remain static) and the floating elements you want to give life when scrolling your site.
To make the elements in this container move, you only need to add the class parallax-move to them. You can make any kind of element move: images, divs, titles, etc. etc.<div class="parallax-img-container"> <h1>The day Internet was the future</h1> <p>Some static text that will not move</p><!-- here I put the elements that will move.. they dont have to necessarily be at the bottom of the container --> <img class="parallax-move"src="01.png" /> <div class="parallax-move">something here</div> <p class="parallax-move">text that will move</p> </div>- The container with class="parallax-img-container" can have multiple classes.
- There must be a parent container with a fixed height in order for you to be able to whether give the fixed position to your floating elements, or for Parallax-img-scroll to give a random position inside the container.
-
When initiating Parallax-img-scroll you can pass an object with two parameters as stated below:
$(document).on("ready", function() { var parallaxSettings = { initialOpacity: 1, //from 0 to 1, e.g. 0.34 is a valid value. 0 = transparent, 1 = Opaque opacitySpeed: 0.1, //values from 0.01 to 1 -> 0.01: slowly appears on screen; 1: appears as soon as the user scrolls 1px pageLoader: true //creates a page loader. It is set "false" by default. };Is the initial opacity for all the elements with class="parallax-move". Can have a decimal value from 0 to 1 (e.g.: 0, 0.4, 0.9, etc), where 0 means the elements will start transparent and 1 meaning they will appear opaque on screen. Is the speed in which the element will become opaque as the user scrolls down your page. Can have a decimal value from 0.01 to 1, where 0.01 means it will veryyyy slowly appear on screen, and 1 means it will become opaque as soon as the user touches the scroll of the mouse ;). ATTENTION: 0 is also a valid value, but it means the elements WONT become visible...ever. This option of type Boolean (true/false) will add a "loading page" div while the page is being loaded. The div will disappear once all the images and elements have been loaded and your page will fade into the screen. It is set to False by default by I recommend you setting it as True when you initialize ParallaxImgScroll as it will avoid the user from seing any imperfection of the screen being rendered para Parallax.parallaxImgScroll(parallaxSettings);});
-
Calling ParallaxImgScroll will assing random positions to the elements containing the class "parallax-move" as well as random scrolling speed.
This is very useful if you have a design where you need stars, lights, bugs, etc. appearing randomly on the container (with class="parallax-img-container").
However, in most of the cases you may need to set a fixed initial position for your elements. For that, you can play with the role attribute as stated in the following lines:
- data-ps-z-index: will set the position of the element as a layer. For example, in the demo you can see when you scroll down and see the people appearing, they have been distributed in layers so then one is on top of the other to create this sort of 3D effect that Parallax defines.
In order to do so you can give a value of 1 to the element that goes below, then "2" to the element that goes on top of this and "3" to the next element, etc. - data-ps-speed: This attribute will set the scrolling speed. The value here starts from 0.01 as a veryyyyy slow movement on scroll down, and a number 10 is a very fast element passing by when the user scrolls. (give it a try until you find the speed you need for each of your elements)
- data-ps-vertical-position: This is where you can set up the initial Vertical position. Please notice that this vertical position will add the property "bottom: xxx" to your element at the beginning, and then of course update it every time the user scrolls down/up calculating the speed you have declared (or the random one assigned if you didnt declare one). Therefor, if you set a value like data-ps-vertical-position="100" it means the element will start 100px from the bottom of the container, that means, it will have a CSS property of bottom: 100px;
- data-ps-horizontal-position: This is where you set up the horizontal position (yes, the name says it). In this case the behaviour is similar to the one stated above but the property added in this case in CSS is Left, which means if you declare this attribute for your element as data-ps-horizontal-position="50" this will have a distance of 50px between the left side of the window and the actual element.
<div src='img/assassins/smoke-01.png' class='parallax-move' data-ps-z-index="1" data-ps-speed="1" data-ps-vertical-position="700" data-ps-horizontal-position="420"></div>
In this case you can see this image is the lowest one in the layer data-ps-z-index="1", it has a scrolling speed of 1 data-ps-speed="1", and it has a vertical position of 700px from the bottom and 420px from the left side of the window data-ps-vertical-position="700" data-ps-horizontal-position="420" - data-ps-z-index: will set the position of the element as a layer. For example, in the demo you can see when you scroll down and see the people appearing, they have been distributed in layers so then one is on top of the other to create this sort of 3D effect that Parallax defines.
To get a better behaviour of your scroll I recommend also adding "jquery.nicescroll.min.js" which will give your page an smooth scrolling like mobiles and ipads/tablets have. (more info: http://nicescroll.areaaperta.com/).
For more information do not hesitate contacting me on twitter as @cyntss
Licensed under the MIT License, http://www.opensource.org/licenses/mit-license.php