» » Create a parallax scrolling effect using Skrollr page

 

Create a parallax scrolling effect using Skrollr page

Author: bamboo06 on 3-11-2014, 01:50, views: 3724

4
Parallax scrolling refers to a multi-layer background move at different speeds, the formation of three-dimensional motion effects, bringing excellent visual experience. As users of the increasing demands of visual experience, WEB developers to start adding various special effects elements in web pages to meet the needs of users. Today, this article has given you recommend a good parallax animation javascript library --Skrollr.js

Skrollr is a use of HTML5 and CSS3 parallax scrolling lightweight javascript library. It is not dependent on the independent libraries of other frameworks that lets you quickly create a parallax scrolling effect. It allows us to set the CSS property keyframes to any element, then it will automatically form animation. The more important point is that the use of these libraries do not write complex JS code and compatible with mainstream browsers, mobile phones and other mobile terminal adapter and other features.
How to use?
First added skrollr library page [/body] before, you can download the latest library file https://github.com/Prinzhorn/skrollr#rd. Then use skrollr.init () call skrollr library.
<script type="text/javascript" src="skrollr.min.js"></script> 
    <script type="text/javascript"> 
    var s = skrollr.init(); 
    </script> 
</body> 

Next, we demonstrate the next page elements background color change effect. When the user scrolls down the page 500 pixels, div background color from # 00f changed to # f00.
<div data-0="background-color:rgb(0,0,255);" data-500="background-color:rgb(255,0,0);">WOOOT</div> 

See the demo: Demo1

Note that you can not use # 00f or # 0000ff to define the background color should be used to define color values ​​rgb, of course, you do not have to worry about low version ie browser does not support rgb, skrollr compatibility deal has been done.
Here we look at the effect of rotation, using transform: rotate (0deg) allow page elements to produce rotation, following demo page when scrolling div will do a 360-degree rotation effect.
<div data-0="background-color:rgb(0,0,255);transform:rotate(0deg);"  
data-500="background-color:rgb(255,0,0);transform:rotate(360deg);">WOOOT</div> 

See the demo: Demo2

skrollr library also provides non-linear animation calls and elastic buffering effect, you can use the cache function easings options such as: bounce, swing and so on.
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"  
data-500="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> 

See the demo: Demo3

Next we put "data-500" replaced by "data-top"! skrollr can not only deal with the absolute position, relative position can handle!
<div data-0="background-color:rgb(0,0,255);transform[bounce]:rotate(0deg);"  
data-top="background-color:rgb(255,0,0);transform[bounce]:rotate(360deg);">WOOOT</div> 

See the demo: Demo4

From the above, we can see a few examples, using the element attribute: data-xxx, add more such attributes, skrollr actually can automatically create the animation process.
When setting up data-xxx, skrollr provide a relative (relative) and absolute (absolute) view of the two methods, see illustration:
Create a parallax scrolling effect using Skrollr page

Skrollr provides a rich use of documentation, as well as commentary javascript method, the details can read the project's official website: https: //github.com/Prinzhorn/skrollr, but the site will introduce richer Skrollr application results page to explain the article, please looking forward!

Category: Javascript / CSS / HTML5 / Plugins

Dear visitor, you are browsing our website as Guest.
We strongly recommend you to register and login to view hidden contents.
<
  • 0 Comments
  • 0 Articles
18 September 2017 01:17

komal rizwan

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
I will be making this effect in my new http://resume-writing-services.reviews/ project to make it look the best.

<
  • 0 Comments
  • 0 Articles
21 September 2017 09:08

ali

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Cool you inscribe, the info is really salubrious further fascinating, I'll give you a connect to my scene. Devotion System

Cool you write, the information is very good and interesting, I'll give you a link to my site. Foods That Cause Inflammation

<
  • 0 Comments
  • 0 Articles
12 November 2017 23:59

Allanerrob

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Viagra Ohne Rezept
One particular significant teeth whitening tip is to ensure that you usually get plenty of fluids. This will likely act as an all-natural strategy to remove more food and damaging supplies out of your teeth, maintaining them whiter. Make sure you rinse off with drinking water after consuming as frequently as possible.
Levitra Bestellen Deutschland
If you are living within a community house condition, file bankruptcy mutually along with your partner. Your spouse is known as accountable for 1 / 2 of the outstanding debts incurred during the matrimony, so she or he could get harassed by creditors when you don't file a joint personal bankruptcy app. If you equally data file, nevertheless, you will the two be secure from lenders.
Kamagra Pillen Voor Vrouwen
Make your scar out of your direct sun light. When you have any scarring damage, you should shield it in the sun's sun rays. Being a scar tissue is therapeutic, it really is additional sensitive to ultra-violet lighting, so at quite least you have to ensure that is stays engrossed in sunscreen. The sun can actually produce a therapeutic scar tissue to shed, rendering it a good deal redder and a lot more noticeable. This sort of problems is challenging to remedy, so remember to protect your scar tissue.
Viagra 100mg Online

<
  • 0 Comments
  • 0 Articles
24 January 2018 13:47

rolex replica watches

Reply
  • Group: Guests
  • РRegistered date: --
  • Status:
 
Eternal secret replica rolex tourbillon watch, one of the most representative rolex replica brands La Esmeralda Tourbillon Tourbillon watches replica omegaca pay tribute to watch, highlighting the Haute Couture technology rolex replica watches and artistic level of admiration.

Information
Comment on the news site is possible only within (days) days from the date of publication.