If your animation runs too fast or too slow, just adjust the scale value. Speed. Step 2 – Skrollr.js Add the following lines to your main.js to enable Skrollr.js and to refresh it after our sections are resized to 100% of the height of the viewport. 如何使用 skrollr 做出簡易的 Parallax Scrolling 網頁. Next we’ll initiate the Skrollr.js and start creating our parallax scrolling effect. Sometimes the parallax scrolling effect on single page sites do need a powerful machine and a fast connection to keep up with the animation, meaning that at times you will have to wait for the page to either finish loading or for the page to catch up with as you scroll. Here are a few practical examples that show you what you can do. scale=1. For example, you can make a div slowly appear, or slide in, as you scroll down the page. create an infinitely scrolling page (ajax load of additional content). 1. Parallax is fun as a toy and portfolio based dick-swinging, but honestly it should never have taken off as a medium. Step 4 Using skrollr.js. This tutorial will cover the bare minimum you need to get Skrollr working. Starting with skrollr 0.6.0 there's just one thing you need to do: Include an element on your page with the id skrollr-body. Use the data-rellax-speed attribute to set the speed of a .rellax element to something other than the default value (which is -2).A negative value will make it move slower than regular scrolling, and a positive value will make it move faster. Example: data-_myconst-200 and skrollr.init({constants: {myconst: 300}}) result in data-500. In fact, you can use it and still have no parallax scrolling at all. By the way, skrollr leverages HTML5 and CSS3 ;-) Resources Plugins Official. You can see it in action here. effortlessly add parallax effects to your website. If that's the element we move for fake scrolling, then all your elements need to be inside of it (unless they're fixed positioned). skrollr-menu - Hash navigation With skrollr.js you animate the CSS properties of an element depending on the horizontal scrollbar position. Put the footer element inside #skrollr-body.To make everything work on desktop/mobile, the only body content that will reside outside of #skrollr-body are your fixed position controls and attributes for the parallax-image-wrapper & parallax-image sets.. That's the element we move in order to fake scrolling. add callbacks at specific scroll positions or while scrolling past a specific section, passing a progress parameter. Actually, skrollr is much more than "just" parallax scrolling. But I wanted to sound hip and use some buzz-words. It's a full-fledged scrolling animation library. Parallax Intro. Web development workstations should be fitted with a device that detects variations on the phrase "what if we changed this key control functionality and made it do something else" and deploys a boxing glove on a spring. html javascript parallax scrolling. By default, skrollr uses the largest key frame and makes document height + viewport height this high, thus the max possible scroll top offset. You use the HTML5 “data-” attributes to define a set of styles (a keyframe). The parallax is probably the most popular scroll animation we see these days. Using these data attributes, you can create all kinds of interesting effects.