CODEWITHSUNDEEP
jquery
lixtetraxx
lixtetraxx

Reputation: 61

Reverse scroll reveal script

I have a simple timeline that show info block when scrolling the page. The elements bounce in from each side while scrolling down. Right now the elements, when loaded, stays visible but I would like them to hide when not in view and re-appear the same way when I scroll back to top...

How can I modify the code in "reverse"? Thank you for your help.

here is the code I use:

jQuery(document).ready(function($){
var $timeline_block = $('.cd-timeline-block');

//hide timeline blocks which are outside the viewport
$timeline_block.each(function(){
    if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
        $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden');
    }
});

//on scolling, show/animate timeline blocks when enter the viewport
$(window).on('scroll', function(){
    $timeline_block.each(function(){
        if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
            $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
        }
    });
});
});

Upvotes: 3

Views: 1157

Answers (3)

Taly Emmanuela
Taly Emmanuela

Reputation: 205

Based on Travis answer I added an else if statement which worked. Worth adding a class like 'bounce-off' as it isn't too smooth when it hides. 

  function onScroll() {
  $('.cd-timeline-block').each( function() {
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
      $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
    } else if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
      $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
    }
  });
};

$(window).scroll(onScroll);
$(onScroll);  // shorthand for $(document).ready(onScroll);

Upvotes: 0

Travis
Travis

Reputation: 1513

You've got the basic statements there, just roll up the behavior into a function, and call that function once when the page loads.

function onScroll() {
  $('.cd-timeline-block').each( function() {
    if( $(this).offset().top <= $(window).scrollTop()+$(window).height()*0.75 && $(this).find('.cd-timeline-img').hasClass('is-hidden') ) {
      $(this).find('.cd-timeline-img, .cd-timeline-content').removeClass('is-hidden').addClass('bounce-in');
    } else {
      $(this).find('.cd-timeline-img, .cd-timeline-content').addClass('is-hidden').removeClass('bounce-in');
    }
  });
};

$(window).scroll(onScroll);
$(onScroll);  // shorthand for $(document).ready(onScroll);

Upvotes: 1

Adjit
Adjit

Reputation: 10305

When you hide the class you need to remove the bounce-in class. Otherwise, when you show it and add the bounce-in class the element already has it, so the animation will not run again.

For your viewport function:

$timeline_block.each(function(){
    if($(this).offset().top > $(window).scrollTop()+$(window).height()*0.75) {
        var $block = $(this).find('.cd-timeline-img, .cd-timeline-content');
        $block.addClass('is-hidden');
        $block.removeClass('bounce-in');
    }
});

Upvotes: 0

Related Questions