Loading...

Introduction to jQuery Scroll-based Animations in javascript

View: 363    Dowload: 0   Comment: 0   Post by: hanhga   Category: Javascript   Fields: Other

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

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.

Posted on 28-03-2016 

Comment:

To comment you must be logged in members.

Files with category

  • Mini Youtube Using ReactJS

    Mini Youtube Using ReactJS

    View: 55    Download: 2   Comment: 0

    Category: Javascript     Fields: none

    This is one the best starter for ReactJS. MiniYoutube as the name suggests is a youtube like website developed using reactJS and youtube API. This project actually let's you search , play and list youtube videos. Do check it out and start learning...

  • Angular 6 Starter with Laravel 5.6 API Service

    Angular 6 Starter with Laravel 5.6 API Service

    View: 118    Download: 1   Comment: 0

    Category: Javascript     Fields: none

    Angular 6 and Laravel 5.6 This project is a starter for creating interface with Angular using bootstrap && css && sass and using Laravel 5.6 for api requests. Demo Installation This project is divided in two parts (projects) and before use them you...

  • Simple Richtext Editor Based on pellJS

    Simple Richtext Editor Based on pellJS

    View: 46    Download: 0   Comment: 0

    Category: Javascript     Fields: none

    A simple visual editor for websites using the pell javascipt. It also has the option to switch between visual editor mode and source code mode. I will upload an update for new functionality soon. Source Code Editor Visual Editor

  • Data Visualization for BI: How to Design Layouts for .NET Financial Reports

    Data Visualization for BI: How to Design Layouts for .NET Financial Reports

    View: 69    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    With the Active Reports Server, you can have a multi-tenant environment where users from various departments, companies, or other specifications can log in, view their reports (and only their reports), export the data, or set up a distribution...

  • AngularJS and REST API

    AngularJS and REST API

    View: 246    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    This is a tutorial for those interested in a quick introduction to AngularJS and REST API. We will build the familiar Periodic Table of the Elements found in every chemistry textbook, and allow the user to select a Chemical Element by clicking on...

  • Collective Intelligence, Recommending Items Based on Similar Users' Taste

    Collective Intelligence, Recommending Items Based on Similar Users' Taste

    View: 202    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Using Collaborative Filtering to find people who share tastes, and for making automatic recommendations based on things that other people like.

  • Think Like a Bird for Better Parallel Programming

    Think Like a Bird for Better Parallel Programming

    View: 184    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Coding an application to run in parallel is hard, right? I mean, it must be hard or we’d see parallel programs everywhere. All we'd see are slick parallel apps that use every available core effortlessly. Instead multi-threaded apps are the exception...

  • Getting Started with the Bing Search APIs

    Getting Started with the Bing Search APIs

    View: 197    Download: 0   Comment: 0

    Category: Javascript     Fields: Other

    Bing Search API is a set of REST interfaces that find web pages, news, images, videos, entities, related searches, spelling corrections, and more in response to queries from any programming language that can generate a web request. Applications that...

 
File suggestion for you
Loading...
File top downloads
Loading...
Loading...
Codetitle - library source code to share, download the file to the community
Copyright © 2018. All rights reserved. codetitle Develope by Vinagon .Ltd