Hot File

Introduction to jQuery Scroll-based Animations in javascript

View: 163    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: Javascript   Fields: Other

9 point/3 review File has been tested

The web changes every day. New technologies and techniques emerge and others disappear. For this reason, web designers and front-end developers have to be familiar with many of the latest web design trends.

Introduction

The web changes every day. New technologies and techniques emerge and others disappear. For this reason, web designers and front-end developers have to be familiar with many of the latest web design trends. Parallax scrolling, fixed headers, flat design, one-page websites, and animations are some of the hottest current web trends.

In this tutorial, we’ll take a look at scroll-based animations and effects using CSS and jQuery.The four effects that we’ll be creating can be viewed in this demo. But before we get to the effects, let’s have a brief intro.

What are Scroll-based Animations and Effects?

Scroll-based animations and effects are a new, yet well-known technique that gives front-end developers the ability to create rich and interactive web experiences. They’re fired when a user scrolls down a page and they can be easily manipulated and implemented with CSS and jQuery.

In order to detect whether a user is scrolling down the page, we use jQuery’s scroll() event.

Once we know that the user is scrolling, we can get the vertical position of the window’s scrollbar using jQuery’s scrollTop() method and apply the desired effects:

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        // apply effects and animations
    }
});

Are They Responsive?

If we’re interested in creating responsive scroll-based effects, we have to define the following properties:

  1. The browser window’s width property.
  2. The browser window’s height property.

Without these properties defined, we create scroll-based effects that are “static” and will not work correctly when the user resizes the window’s either horizontally or vertically.

We can easily retrieve the values of these properties using jQuery’s width() and height() methods.

The following code snippet shows all the necessary checks that we have to take into account in order to create scroll-based effects.

$(window).scroll(function() {
    if ($(this).width() < 992) {
        if ($(this).height() <= 768) {
            if ($(this).scrollTop() < 500) {
                // apply effects
            }
            if($(this).scrollTop() > 1000) {
            // apply effects
            }
        }
    }
});

Now that we have covered the basics for scroll-based effects, let’s see them in action through four different examples.

Note: For simplicity reasons, we’re only focusing on checking how these effects change based on the different values of the window’s width property. The same process could also be used for its heightproperty.

Example #1

This effect is triggered when the top position of the window’s scrollbar exceeds 60px. In such a case, the code snippet that is executed is the following:

if ($(window).scrollTop() > 60) {
    $('.banner h2').css('display', 'none');
    $('.banner .info').css('display', 'block');
} else {
    $('.banner h2').css('display', 'block');
    $('.banner .info').css('display', 'none');
}

The code above hides the h2 child element of the .banner element and shows its .info child element, which was initially hidden.

This code could also have been written as follows:

if ($(window).scrollTop() > 60) {
    $('.banner h2').hide();
    $('.banner .info').show();
} else {
    $('.banner h2').show();
    $('.banner .info').hide();                               
}

To see the effect in action, view the full demo on CodePen.

Example #2

This next effect depends not only on the top position of the browser’s scroll bar, but also on the width of the window’s. More specifically, we are making the following assumptions:

  1. The window’s width property has a value less than or equal to 549px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds 600px.
  2. The window’s width property has a value between 550px and 991px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds 480px.
  3. The browser’s width property has a value greater than 991px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds the 450px.

The aforementioned assumptions result in the following code snippet:

if ($(window).width() <= 549) {
    if($(window).scrollTop() > 600) {
        // the animation that's executed
        firstAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if($(window).scrollTop() > 480){
        // the animation that's executed
        firstAnimation();
    }
} else {
    if ($(window).scrollTop() > 450) {
        // the animation that should be executed
        firstAnimation();
    }
}

The code that contains the animation to be executed is the following:

var firstAnimation = function () {
    $('.clients .clients-info').each(
        function () {
            $(this).delay(500).animate({
                opacity: 1,
                height: '180',
                width: '250'
            }, 2000);
        }
    );
};

The code above animates the opacityheight and width properties of the .clients-infoelements.

To see this effect in action, view the full demo on CodePen.

Example #3

The third effect depends not only on the top position of the window’s scrollbar, but also on the widthproperty of the window. More specifically, we are making the following assumptions:

  1. The window’s width property has a value less than or equal to 549px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds 1750px.
  2. The window’s width property has a value between 550px and 991px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds 1150px.
  3. The window’s width property has a value greater than 991px. In such a case, the animation is triggered only when the top position of the window’s scrollbar exceeds 850px.

And here’s the code based on the above:

if ($(window).width() <= 549){
    if($(window).scrollTop() > 1750){
        secondAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 1150) {
        secondAnimation();
    }  
} else {
    if ($(window).scrollTop() > 850) {
        secondAnimation();
    }
}

The code that contains the animation to be executed is the following:

var secondAnimation = function() {          
    $('.method:eq(0)').delay(1000).animate({
 opacity: 1
 }, 'slow', 
 function() {
 $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(1)').delay(2000).animate({
 opacity: 1
 }, 'slow', 
     function() {
             $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(2)').delay(3000).animate({
 opacity: 1
 }, 'slow', 
     function() {
             $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );

    $('.method:eq(3)').delay(4000).animate({
 opacity: 1
 }, 'slow', 
         function() {
             $(this).find('h4').css('background-color', '#b5c3d5');
        }
    );
};

The code above sequentially animates the opacity property of the .method elements and then changes the background-color property of their h4 child elements.

To see the effect in action, view the full demo on CodePen.

Example #4

This effect depends not only on the top position of the window’s scrollbar, but also on the window’swidth property. More specifically:

  1. If the window’s width property has a value less than or equal to 549px, the animation is triggered only when the top position of the window’s scrollbar exceeds 3500px.
  2. If the window’s width property has a value between 550px and 991px, the animation is triggered only when the top position of the window’s scrollbar exceeds 2200px.
  3. If the window’s width property has a value greater than 991px, the animation is triggered only when the top position of the window’s scrollbar exceeds 1600px.

This results in the following code:

if ($(window).width() <= 549) {
    if ($(window).scrollTop() > 3500) {
        thirdAnimation();
    }
} else if ($(window).width() > 549 && $(window).width() <= 991) {
    if ($(window).scrollTop() > 2200) {
        thirdAnimation();
    }
} else {
    if ($(window).scrollTop() > 1600) {
        thirdAnimation();
    }
}

The code for the animation is the following:

var thirdAnimation = function() {
    $('.blogs').find('p').delay(1400).animate({
            opacity: 1, 
            left: 0
        }, 'slow'
    );

    $('.blogs').find('img').delay(2000).animate({
            opacity: 1, 
            right: 0
        }, 'slow'
    );

    $('.blogs').find('button').delay(2500).animate({
            opacity: 1, 
            bottom: 0
        }, 'slow'
    );
};

The code above sequentially animates the opacityleftright and bottom properties of the p,imgbutton elements.

 

Introduction to jQuery Scroll-based Animations in javascript

Introduction to jQuery Scroll-based Animations in javascript Posted on 28-03-2016  The web changes every day. New technologies and techniques emerge and others disappear. For this reason, web designers and front-end developers have to be familiar with many of the latest web design trends. 3/10 163

Comment:

To comment you must be logged in members.

Files with category

  • JUnit 5 State Of The Union using java

    View: 429    Download: 0   Comment: 0   Author: none  

    JUnit 5 State Of The Union using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    JUnit 5 has been under development for about 14 months now and the prototype is almost a year old. Time to summarize what happened so far, where the project stands, and where it’s going.

  • Getting Started with Dropwizard using java

    View: 497    Download: 0   Comment: 0   Author: none  

    Getting Started with Dropwizard using java

    Category: Javascript
    Fields: Other

    4.5/1 review
    Dropwizard is a framework for building RESTful web services in Java. In this tutorial we’re going to have a look at how to get started with developing a Dropwizard application by building a new service from scratch.

  • Build Query NULL Value in MySql

    View: 229    Download: 0   Comment: 0   Author: none  

    Build Query NULL Value in MySql

    Category: Javascript
    Fields: Other

    2.5/2 review
    Misunderstanding NULL is common mistake beginners do while writing MySql query. While quering in MySql they compare column name with NULL. In MySql NULL is nothing or in simple word it isUnknown Value so if you use comparison operator for NULL values...

  • Manage Your JavaScript Application State with MobX

    View: 231    Download: 0   Comment: 0   Author: none  

    Manage Your JavaScript Application State with MobX

    Category: Javascript
    Fields: Other

    2.25/2 review
    This article was peer reviewed by Michel Weststrate and Aaron Boyer. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

  • Build Bringing Pages to Life with the Web Animations API

    View: 241    Download: 0   Comment: 0   Author: none  

    Build Bringing Pages to Life with the Web Animations API

    Category: Javascript
    Fields: Other

    4.5/2 review
    This article is by guest author Dudley Storey. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • How to Style Google Custom Search Manually

    View: 210    Download: 0   Comment: 0   Author: none  

    How to Style Google Custom Search Manually

    Category: Javascript
    Fields: Other

    0/0 review
    Website owners very often decide on using Google’s Custom Search Engine (GCSE) for searching through their content instead of using built-in and/or custom search functionality. The reason is simple – it’s much less work, and most often it does the...

  • Test React Components Using Jest

    View: 4834    Download: 0   Comment: 0   Author: none  

    Test React Components Using Jest

    Category: Javascript
    Fields: Other

    4.5/1 review
    This article is by guest author Jack Franklin. SitePoint guest posts aim to bring you engaging content from prominent writers and speakers of the JavaScript community.

  • Programming Question Reverse String without using String function

    View: 622    Download: 0   Comment: 0   Author: none  

    Programming Question Reverse String without using String function

    Category: Javascript
    Fields: Other

    0/0 review
    Write a program to reverse string without using string function. You don’t have to use any in-built string library function. This problem can be solved by multiple approaches. Let’s check it.

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd