Coding Fun Html Scroll Activated Fade Animation | HTML CSS jQuery

Scroll Activated Fade Animation | HTML CSS jQuery





Hey, in this episode you are going to learn how to make scroll activated fade animation. But it is not going to be your usual one element animation, so stick around to find out what it mean by it 😉

Episode 05

FOLLOW THIS LINK TO GET -50% DISCOUNT OF MY UDEMY COURSE, THAT IS ONLY 10 EUR (OR ABOUT 11…

Tags: , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,

16 thoughts on “Scroll Activated Fade Animation | HTML CSS jQuery”

  1. Ahmed Rashed says:

    thanks
    but please focus on what part u write into to can follow u
    thanks again for code

  2. Sultan B says:

    You talk like a robot and in a fast manner.

  3. Clear, efficient and fast, A+

  4. Why does no one know how to do this without fucking jQuery?

  5. Juan Zamora says:

    Scroll player video app youtobe

  6. Antun Črnja says:

    Great tutorial. Can you please make same like this but with increasing fixed header height? (h1 fixed, and increasing padding on scroll). i can't figure it out how to make that 🙁

  7. That was really nice tutorial. I practiced it and then applied the code for scrolling horizontal scrolling in scroll panel. But its not working.
    here is my code in which I made certain changes.
    $(function(){
    var documentel = $(document),
    fadelem = $('container');
    documentel.on('scroll',function(){
    var currscrollpos = documentel.scrollLeft();
    fadelem.each(function(){
    var $this = $(this),
    elemoffsetleft = $this.offset().left;
    if(currscrollpos>elemoffsetleft)
    $this.css('opacity',1-(currscrollpos – elemoffsetleft)/400);
    });
    });
    });
    here .pane is container class which contains the background image which i need should be faded when horizontal scrolling is done.
    here is the html code of the same,

    <div class = "container">
    <div class = "driver">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    <img class = "image" src = "al.jpg" alt = "pp">
    </div>
    </div>
    please help since i have been working on this since a 2 days and still not able to find the solution.

  8. Wu Hazel says:

    Great tutorial, thanks!

  9. Kidz Valdez says:

    Hi! I'm having a problem… everytime I reach the bottom and get to the top again (through scrolling) my header is getting and getting out of sight/invisible (decreasing opacity)…

  10. hello sir, very nice tutorial but i am having problem. it is not working on internet explorer. would you please help me?

  11. Louis Moreno says:

    This is awesome but I have a question. The fade is activated once the element reaches the top of the window. What if we need to take into account a navigation bar?

  12. Raul R says:

    Just what I was looking for, thanks

  13. Ashley New says:

    Great but please talk slower. Thanks.

Leave a Reply

Your email address will not be published. Required fields are marked *