Velocity.js implements page scrolling switching effect

Velocity.js implements page scrolling switching effect

Today I will introduce a small Javascript animation plug-in velocity.js, which can easily and efficiently develop a website with multi-page scrolling switching effects.

Browser support

velocity.js supports browsers such as IE8+, Chrome, Firefox, and supports Andriod and IOS.

We are developing a project that has a large set of related pages. If we cannot display them all on one page but want to be able to effectively read the relevant content, we can do so by creating some interesting effects. By using the page scrolling switching effect, we can effectively create an eye-catching web page.

All special effects are applied through velocity.js. Velocity.js is a jQuery plugin for animation switching. It reimplements jQuery's jQuery.animate() method to speed up animation switching. Velocity.js is only 7k in size. It not only includes all the functions of jQuery.animate(), but also includes color switching, transformation, looping, easing, CSS switching, and Scroll functions. It is the best combination of jQuery, jQuery UI, and 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(), and jQuery.delay() methods, and its performance is also higher than CSS's animation property.

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

Key Points

velocity.js is an animation plugin for jQuery that provides faster and more efficient animation switching effects
On May 3, 2014, Julian released velocity.js on his GitHub
velocity.js is a small but powerful plugin

-

Next, we will study its specific implementation method

In order to apply animation and scrolling effects, we must customize data-hijacking and data-animation settings in the tag to achieve this function.

<body data-hijacking="off" data-animation="scaleDown">

The above code means that the start animation effect data-animation is scaled down proportionally. Data-animation defines a total of 7 different animation effects, namely scaleDown, rotate, fixed, gallery, parallax, opacity, catch. We can apply any effect according to our needs. And I made 7 pages of sample code to show its effects respectively. Set the data-hijacking attribute to off. You can also set it to on to show its effect. The above two properties are from velocity.js

Dom structure in html

In this structure we want to display 5 different groups of pages. We divide it into five sections and define 2 icon buttons for switching.

<body data-hijacking="off" data-animation="scaleDown">
    <section class="cd-section visible">
        <div><h2>Page scrolling switching effect 1</h2></div>
    </section>
    <section class="cd-section"><div>
            <h2>Page scrolling switching effect 2</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>Page scrolling switching effect 3</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>Page scrolling switching effect 4</h2></div>
    </section>
    <section class="cd-section">
        <div><h2>Page scrolling switching effect 5</h2></div>
    </section>
    <nav>
        <ul class="cd-vertical-nav">
            <li><a href="#0" class="cd-prev inactive">Next</a></li>
            <li><a href="#0" class="cd-next">Prev</a></li>
        </ul>
    </nav> <!-- .cd-vertical-nav -->
</body>

Add css style

By designing the style of each section, it is convenient for us to view and interact. You can make some corresponding styles according to your 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-hijacking attribute to off, all animation effects are scaled according to the relative position of its window. When the animation event is triggered, we will adjust the style of the current window page, including the zoom ratio, from small to large, or from large to small. And explanation of related transparency changes.

The following code is explained in detail below. First of all, windowHeight refers to the height of your device window itself, which is a fixed value. jQuery(window).scrollTop() is the height of the scroll bar in the page. It is a range value when sliding from top to bottom (0 to all page heights), and when sliding from bottom to top it is from (all page heights to 0). actualBlock.offset().top is a set of fixed values, representing the distance from each section page to the top (0, each page height, each page height * 2, each page height * 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 bottom to 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, the value of the y-axis is zero, and scaling is performed. Shadow blur radius changed.

//actualBlock is the section we are animation
var offset = $(window).scrollTop() - actualBlock.offset().top,
    windowHeight = $(window).height();

if( offset >= -windowHeight && offset <= 0 ) {
    // section entering the viewport
       translateY = (-offset)*100/windowHeight;
       scale = 1;
      opacity = 1;
} else if( offset > 0 && offset <= windowHeight ) {
    //section leaving the viewport 
       scale = (1 - ( offset * 0.3 / windowHeight));
    opacity = ( 1 - ( offset / windowHeight ) );
    translateY = 0;
    boxShadowBlur = 40*(offset/windowHeight);
}

After the above events are processed, there are two more click events. Click the two switch buttons to switch the pages directly. There are also event processing functions of velocity.js, such as some effects on animation effects such as translateUp, translateDown, scaleDown, etc.

$.Velocity
    .RegisterEffect("scaleDown", {
        defaultDuration: 800,
        calls: [ 
            [ { opacity: '0', scale: '0.7', boxShadowBlur: '40px' }, 1]
        ]
    });

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:
  • js realizes seamless scrolling double-image switching effect
  • JS realizes the effect of label scrolling switching
  • js to achieve the effect of mouse wheel scrolling to switch pages (similar to the 360 ​​default page scrolling switching effect)
  • js+div to achieve text scrolling and image switching effect code
  • js control multiple pictures to scroll left and right to switch the effect code sharing
  • Another idea of ​​image scrolling switching effect in javascript
  • Simple implementation of js page switching function
  • js implements two sets of css switching code for a single html page
  • Example of js data interaction method for switching four charts on the same page of echarts

<<:  Example of implementing dashed border with html2canvas

>>:  Enable OCSP to improve https certificate verification efficiency and solve the problem of slow access to Let's Encrypt SSL certificates

Recommend

Installing linux7.2 Internet access configuration tutorial on VMware virtual machine under win7

Install linux7.2 Internet access configuration on...

Perfectly install Mac OS10.14 under Win10 VM virtual machine (graphic tutorial)

I recently watched Apple's press conference a...

Analyze the difference between ES5 and ES6 apply

Table of contents Overview Function signature Opt...

One line of code solves various IE compatibility issues (IE6-IE10)

x-ua-compatible is used to specify the model for ...

Detailed steps to install web server using Apache httpd2.4.37 on centos8

Step 1: yum install httpd -y #Install httpd servi...

How to check and organize website files using Dreamweaver8

What is the purpose of creating your own website u...

How to create a swap partition file in Linux

Introduction to Swap Swap (i.e. swap partition) i...

JavaScript to achieve the effect of clicking on the self-made menu

This article shares the specific code of JavaScri...

Docker primary network port mapping configuration

Port Mapping Before the Docker container is start...

How to get USB scanner data using js

This article shares the specific process of js ob...

Are the value ranges of int(3) and int(10) the same in mysql

Table of contents Question: answer: Reality: Know...

Navicat remote connection to MySQL implementation steps analysis

Preface I believe that everyone has been developi...

In-depth explanation of the various methods and advantages and disadvantages of JavaScript inheritance

Table of contents 1. Prototype chain inheritance ...

Markup language - for

Click here to return to the 123WORDPRESS.COM HTML ...

New usage of watch and watchEffect in Vue 3

Table of contents 1. New usage of watch 1.1. Watc...