Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Question

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Can you help me with CSS3 animations triggered by scrolling?

I came across a code that reveals a DIV element as the user scrolls down:

    <script type="text/javascript">

            $(document).ready(function() {

        /* Every time the window is scrolled ... */
        $(window).scroll( function(){

            /* Check the location of each desired element */
            $('.hideme').each( function(i){

                var bottom_of_object = $(this).position().top + $(this).outerHeight();
                var bottom_of_window = $(window).scrollTop() + $(window).height();

                /* If the object is completely visible in the window, fade it in */
                if( bottom_of_window > bottom_of_object ){

                    $(this).animate({'opacity':'1'},500);

                }

            }); 

        });

    });

    </script>

I'm working on a website with 5 different sections that should be revealed as the user scrolls to them. But I have a question about how to animate the contents within those boxes.

For example: In each box, there will be a title, content, and images. How can I make these elements appear one after another as the user scrolls? With the current code, all elements are shown at once.

I want the title to appear first, then the content, and finally the images when the user scrolls down. And this sequence should repeat for each box as the user navigates through them.

I've tried using CSS3 delays, but I can't predict how quickly users will scroll down.

Any tips would be greatly appreciated!

jquery css animation web scroll

Answer 1

Answer №1

It's quite simple. Start by ensuring that the title, images, and content are each enclosed within their own div elements. Then, repeat the same process but focus on adjusting the positions and sizes of the individual divs. Check out this helpful jsFiddle link

$(document).ready(function () {
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        $('.title').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.innerImage').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.content').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
    });
});

Answer 2

It's quite simple. Start by ensuring that the title, images, and content are each enclosed within their own div elements. Then, repeat the same process but focus on adjusting the positions and sizes of the individual divs. Check out this helpful jsFiddle link

$(document).ready(function () {
    $(window).scroll(function () {
        var bottom_of_window = $(window).scrollTop() + $(window).height();
        $('.title').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.innerImage').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
        $('.content').each(function (i) {
            var bottom_of_object = $(this).offset().top + $(this).outerHeight();
            if (bottom_of_window > bottom_of_object) {
                $(this).animate({
                    'opacity': '1'
                }, 500);
            }
        });
    });
});

Answer 3

Answer №2

Here is a potential solution using the callback function of .animate() and the .getBoundingClientRect() function:

HTML

<div style="height:900px; background:#abc;">example</div>
    <div class="hideme">
        <div class="title">heading 1</div>
        <div class="main">information 1
            <img src="/logo.png" />
        </div>
    </div>
    ...
</div>

JS

$(document).ready(function () {
  $(window).on('scroll resize', function () {
    var win_height = $(window).height();
    $('.hideme').each(function (i) {
      var elem_pos = this.getBoundingClientRect();
      var title = $('.title',this);
      var main = $('.main',this);
      var images = $('img',this);
      if ((elem_pos.top>win_height || elem_pos.bottom<0)) {
        title.css('opacity',0); // hide title
        main.css('opacity',0); // hide contents
        images.css('opacity',0); // hide images
        return true; // below or above viewport, continue
      }
      if (title.is(':animated') || main.is(':animated') || images.is(':animated')) {
        return true; // continue
      }
      title.animate({
        'opacity': 1
      }, 500, function(){
        main.animate({
          'opacity': 1
        }, 500, function(){
          images.animate({
            'opacity' :1
          },500);
        });
      });
    });
  });
});

Check it out on jsfiddle / View in fullscreen

Answer 4

Here is a potential solution using the callback function of .animate() and the .getBoundingClientRect() function:

HTML

<div style="height:900px; background:#abc;">example</div>
    <div class="hideme">
        <div class="title">heading 1</div>
        <div class="main">information 1
            <img src="/logo.png" />
        </div>
    </div>
    ...
</div>

JS

$(document).ready(function () {
  $(window).on('scroll resize', function () {
    var win_height = $(window).height();
    $('.hideme').each(function (i) {
      var elem_pos = this.getBoundingClientRect();
      var title = $('.title',this);
      var main = $('.main',this);
      var images = $('img',this);
      if ((elem_pos.top>win_height || elem_pos.bottom<0)) {
        title.css('opacity',0); // hide title
        main.css('opacity',0); // hide contents
        images.css('opacity',0); // hide images
        return true; // below or above viewport, continue
      }
      if (title.is(':animated') || main.is(':animated') || images.is(':animated')) {
        return true; // continue
      }
      title.animate({
        'opacity': 1
      }, 500, function(){
        main.animate({
          'opacity': 1
        }, 500, function(){
          images.animate({
            'opacity' :1
          },500);
        });
      });
    });
  });
});

Check it out on jsfiddle / View in fullscreen

Exploring CSS3 animations: customizing animations for individual elements based on scroll movements

Answer №1

Answer №2

Similar questions

Embedding an iframe with vertical scrolling enabled

Send a string to the controller through an AJAX request

"Interactive bootstrap tabs nested within a dropdown menu that automatically close upon being clicked

Switching the class from "untoggled" items to the selected item in React

Adding a panel dynamically with Bootstrap incorrectly

Getting the return value in JSP using JSP Ajax Servlet

CSS Dynamix - Include the parameter ?value to resolve caching issues

How to retrieve values from checkboxes generated dynamically in php using jquery

When the form is submitted, the text input vanishes and then the page is refreshed using AJAX technology

Manage the placement of elements using CSS

I am encountering a problem with IE11 where I am unable to enter any text into my

Determining the value of an object property by referencing another property

This code is only functional on JSFiddle platform

The addition of one-page navigation in Angular 7 seems to be experiencing some glitches

Show two choices in a select box next to each other

Is there a method in JavaScript to prevent href="#" from causing a page refresh? This pertains to nyroModal

Troubleshooting jPlayer Preload Problem

The JSON object is not defined

Utilize jQuery to load a separate external sites div into an iframe

Vuetify's Handy Helper Classes