Home > Developer > Web Develop

Velocity.js Implementing page scrolling transitions

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

    • Online Demo 1
    • Online Demo 2
    • Online Demo 3
    • Online Demo 4
    • Online Demo 5
    • Local Downloads
Original link: http://www.gbtags.com/gb/share/5650.htm page scrolling Switch effect

Today introduced a JavaScript small animation plug-in velocity.js, you can easily and efficiently develop a multi-page scrolling transition effect of the site.

Browser support

Velocity.js supports ie8+, Chrome, Firefox and other browsers, and supports Andriod and iOS.

We develop a project that has a large set of related links to the page. Can not do in a page to show them, but also want to be able to effectively read these related content, you can do some interesting effects to help us achieve, through the page scrolling switch effect, can be very effective to create a compelling page.

All the special effects applications are through velocity.js. Velocity.js is an animated jquery plugin that re-implements the jquery $.animate () method to speed up animation switching. Velocity.js is only 7k in size, it contains not only all the functions of $.animate (), but also includes color switch, transform (transform), loop, ease, CSS switch, scroll function, it is jquery, jquery UI, The best combination of CSS transformations in terms of animation. Velocity.js uses the jquery $.queue () method in its internal implementation, so it is smoother than the $.animate (), $.fade (), and $.delay () methods of jquery, and its performance is higher than the animation properties of CSS

All effects cannot be displayed on small terminals, such as mobile phones and smart watches. So it's best to show his functionality on the web, but we've also adapted it for the small terminal to navigate

Points
    • Velocity.js is an animated plugin for jquery, with faster and more efficient animation transitions
    • On May 3, 2014, Julian posted a velocity.js on his github
    • Velocity.js is a small and powerful plugin

Let's look at how it's implemented in detail.

To apply animations and scrolling effects, we have to do this with data-hijacking and data-animation custom settings in the <body> tab.
    1. <body data-hijacking="Off" data-animation="Scaledown">

The above code means that the start animation effect data-animation to scaled down scaledown,data-animation altogether defines 7 different animation effects, respectively, Scaledown,rotate,fixed,gallery, Parallax,opacity,catch. We can apply any kind of effect according to our own needs. And I made 7 pages of the sample code to render its effect separately. Set the data interception property data-hijacking to OFF, you can also set it to on to show its effect. All of the above two attributes are from Velocity.js

DOM structure in HTML

In this structure we want to show 5 different sets of pages, we divide him into five <section>, and also define 2 icon buttons for switching functions.

  2. <body data-hijacking="Off" data-animation="Scaledown">
  4. <section class="cd-section visible">
  6. <div>page scrolling Toggle effect 1
  8. </section>
  10. <section class="Cd-section"><div>
  12. page scrolling Toggle effect 2
  14. </section>
  16. <section class="Cd-section">
  18. <div>page scrolling Toggle Effect 3
  20. </section>
  22. <section class="Cd-section">
  24. <div>page scrolling Toggle effect 4
  26. </section>
  28. <section class="Cd-section">
  30. <div>page scrolling Toggle effect 5
  32. </section>
  34. <nav>
  36. <ul class="Cd-vertical-nav">
  38. <li><a href="#0" class="Cd-prev inactive">Next< /a></li>
  40. <li><a href="#0" class="Cd-next">Prev </a></li>
  42. </ul>
  44. </nav> <!--. Cd-vertical-nav --
  46. </body>
CSS style Additions

By designing each <section> to make it easier for us to view and interact with each other, we can make some corresponding styles according to the requirements.

  2. . CD-section: First-of-type > div {
  4. Background-color: #2b334f;
  6. }
  8. . CD-section:nth-of-type(2) > div {
  10. Background-color: #2e5367;
  12. }
  14. . CD-section:nth-of-type(3) > div {
  16. Background-color: #267481;
  18. }
  20. . CD-section:nth-of-type(4) > div {
  22. Background-color: #fcb052;
  24. }
  26. . CD-section:nth-of-type(5) > div {
  28. Background-color: #f06a59;
  30. }
Event handling

When we set the data interception property data-hijacking to off, all animation effects are scaled proportionally to the relative position of its window. When an animated event is triggered, we will style the current window page to include the scale from small to large, or from large to small. and the relevant transparency changes explained.

Below is a detailed explanation of the following code. First windowheight means that the height of your device window itself is a fixed value, $ (window). ScrollTop () is the height of the scroll bar in the page, which is a range value that is sliding from top to bottom (0~ all page heights), and from the top down (All Page heights ~0). Actualblock.offset (). Top is a set of fixed values, representing each <section> page to the top of the distance is (0, each page height, each page height * *, each page height ... The height of each page depends on the device. After figuring out what these codes mean, we can see the following judgment statement when the offset value is greater than the negative window height, that is, the current page is shifted from the top to the small, and the value of the y-axis is constantly increasing, and the page gradually exits the current view window. When the value of offset is less than the height of the window, that is, when you swipe down from the top, the current page is switched from small to large, and transparency is gradually transparent, and the y-axis value is zero for zooming. Shadow Blur radius change.

  2. Actualblock is the sections we are animation
  4. var offset = $(window). ScrollTop() - actualblock. Offset(). Top,
  6. WindowHeight = $(window). Height();
  10. If( offset >= -windowheight && offset <= 0 ) {
  12. //section entering the viewport
  14. Translatey = (-offset) *+/windowheight;
  16. Scale = 1;
  18. Opacity = 1;
  20. } Else if( offset > 0 && offset <= WindowHeight ) {
  22. //section leaving the viewport
  24. Scale = (1 - ( offset * 0.3/windowheight));
  26. Opacity = ( 1 - ( offset/windowheight) ); /c31>
  28. Translatey = 0;
  30. Boxshadowblur = * (offset/windowheight);
  32. }

After the above event processing, there are two click events, click on the two toggle buttons, the page directly switch, while there are velocity.js event processing functions such as the animation effect Translateup,translatedown,scaledown and other effects.

  2. $. Velocity
  4. . registereffect("Scaledown", {
  6. Defaultduration:
  8. Calls: [
  10. [ { opacity: ' 0 ', scale: ' 0.7 ', boxshadowblur: ' 40px ' }, 1]
  12. ]
  14. });
Conclusion

This is a relatively complex effect, the need for a large number of JS event processing and plug-in function calls, everyone learning is certainly relatively complex. It is recommended to clear logical thinking first, after reading the article, and according to the article points to read the source code. If you are interested in the Velocity.js plugin, you can learn about its other effects. And welcome everyone to interact with me, what do not understand the place welcome the small friends message Oh ~ ~

Original link: http://www.gbtags.com/gb/share/5650.htm

Velocity.js Implementing page scrolling transitions

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Related Keywords:
animated page transitions html5 page transitions 1 page scrolling website single page scrolling website one page horizontal scrolling website how to make single page scrolling website define implementing

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

What's Trending
Top 10 Tags
datastax versions naming convention zookeeper client class definition md5 microsoft sql server 2005 data structures exception handling error handling
Top 10 Keywords
microsoft download center down wordpress address url site address url wordpress address url windows installer 4 0 download 302 not found web address url definition site address url wordpress db2 integer mac os installation step by step pdf abbreviation for return

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More