Shulou(Shulou.com)06/03 Report--

This article mainly introduces "how to use velocity.js to achieve page scrolling effect", in daily operation, I believe many people have doubts on how to use velocity.js to achieve page scrolling effect, Xiaobian consulted all kinds of information, sorted out simple and easy to use operation methods, hope to answer "how to use velocity.js to achieve page scrolling effect" doubts helpful! Next, please follow the small series to learn together!

browser support

Velocity.js supports IE8+, Chrome, Firefox and other browsers, and supports Android and IOS.

We developed a project with a large page with a set of related links. Can't do in a page to show them, but also hope to be able to effectively read these related content, can help us to achieve by doing some interesting effects, through the page scroll switching effect, can be very effective to produce an eye-catching page.

All effects are applied via velocity.js. Velocity.js is a jQuery plugin for animation switching that re-implements jQuery's jQuery.animate() method to speed up animation switching. Velocity.js is only 7k in size, it not only contains all the functions of jQuery.animate(), but also contains color switching, transformation, loop, slow motion, CSS switching, Scroll function, it is the best combination of jQuery, jQuery UI, CSS transformation in animation. Velocity.js uses jQuery's jQuery.queue() method in its internal implementation, so it is smoother than jQuery's jQuery.animate(), jQuery.fade(), jQuery.delay() methods, and its performance is higher than CSS's animation property.

All of the effects cannot be displayed on small devices, such as mobile phones and smart watches. So it's best to show its functions on the web, but for small terminals we have also made corresponding adaptations to facilitate browsing.

points

velocity.js is an animation plug-in for jQuery with faster and more efficient animation transitions

On May 3, 2014, julian released velocity.js on its GitHub.

velocity.js is a small but powerful plugin

-

Let's look at how to implement it

In order to apply animation and scrolling effects, we have to do data-jacking and data-animation custom settings in the tag to achieve this feature

The above code means to start the animation effect data-animation for scaling down scaleDown, data-animation defines a total of 7 different animation effects, respectively scaleDown,rotate,fixed,gallery, parallelism,opacity,catch. We can apply any effect according to our own needs. And I've made seven pages of sample code to show how it works. Set the data-intercepting property to off, or you can set it to on to show how it works. Both attributes are from velocity.js

Dom structure in html

In this structure we want to show 5 different groups of pages, we divide it into 5 sections, and define 2 icon buttons for switching

Page scrolling effect 1 Page Scrolling Toggle Effect 2 Page scrolling effect 3 Page scrolling effect 4 Page scrolling effect 5 Next Prev CSS Style Add

By designing the style of each section, it is convenient for us to view and interact, and we can make some corresponding styles according to our needs.

.cd-section:first-of-type > div { background-color: #2b334f;}.cd-section:nth-of-type(2) > div { background-color: #2e5367;}.cd-section:nth-of-type(3) > div { background-color: #267481;}.cd-section:nth-of-type(4) > div { background-color: #fcb052;}.cd-section:nth-of-type(5) > div { background-color: #f06a59;}

JS Event Handling

When we set the data-intercepting property to off, all animation effects are scaled according to their relative position in the window. When the animation event is triggered, we will change the style of the current window page from small to large, or from large to small. And related transparency changes explained.

The following code is explained in detail below. First windowHeight is the height of your device window itself is a fixed value, jQuery(window).scrollTop() is the height of the scroll bar in the page, is a range value when sliding from top to bottom (0~ all page heights), when sliding from bottom to top is from (all page heights ~0). actualBlock.offset().top is a set of fixed values, representing the distance from each section page to the top (0, height of each page, height of each page *2, height of each page *3.) The height of each page depends on the device. After understanding the meaning of these codes, we can see the following judgment statement. When the offset value is greater than the negative window height, that is, when sliding from the bottom to the top, the current page switches from large to small, and the transparency does not change. The value of the y axis continues to increase, and the page gradually exits the current view window. When the offset value is less than the window height, that is, when sliding from top to bottom, the current page switches from small to large, and the transparency gradually becomes transparent, and the y-axis value is zero, and zooming is performed. Shadow blur radius changed.

//actualBlock is the section we are animationvar offset = $(window).scrollTop() - actualBlock.offset().top, windowHeight = $(window).height();if( offset >= -windowHeight && offset 0 && offset

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.