Animation triggered when user scrolls to specific section

Question

I have an animated sequence of icons (http://codepen.io/Dingerzat/pen/XNjzVr) that I want to activate when the icons are scrolled to and in view of the user. I found a bit of code I believe is what I need here: Trigger event when user scroll to specific element - with jQuery

I have tried merging it together with my piece of code. Though it does not seem to work and I am not sure why. It also seems to crash the builder. Any advice would be greatly appreciated.

HTML



  
  Delayed image load in
  





  
  
    
    
    
    
    
    
    
    
    
    
  
  


  
    
        
            Gah
            
                Hello StackOverflow! SO's da' bomb diggidy!
            
        
        
            Second
            
                Why is the person who invests your money called a broker?
            
        
        
            Third
            
                I'd like to open the First collapsible element in this list.
            
        
      
            Forth
            
                I'd like to in this list.
            
        
      
            Forth
            
                I'd like to in this list.
            
        
      
            Forth
            
                I'd like to in this list.
            
        
      
            Forth
            
                I'd like to in this list.

CSS

@import "compass/css3";

.red {
    height:800px;
    background:red;
}

body { background: #e6e6e6; } 
#gallery { width:90%; 
  img { margin:1px; display: none; } 
} 

#float{
position: relative;
-webkit-animation: floatBubble 2s;
  animation-fill-mode: forwards;  
  }


@-webkit-keyframes floatBubble{
 0%{
        top:0;
        -webkit-animation-timing-function: ease-in;

   }


   33% {
      top: 50px;
      -webkit-animation-timing-function: ease-out;
   }
  66%{
        top:25px;
        -webkit-animation-timing-function: ease-in;

   }

  100%{
        top:50px;
        -webkit-animation-timing-function: ease-in;

   }

}

JS

$(window).scroll(function() {
   var hT = $('#scroll-to').offset().top,
       hH = $('#scroll-to').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
    console.log((hT-wH) , wS);
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
  $(this).delay(i*200).fadeIn(3000);
});


$('[data-click]').on('click', function (e) {
    $( $(this).data('click') ).trigger('click');
});

DaniP · Accepted Answer

First you need to change the float id to a classname since you use it multiple times on the HTML and ID's must be unique.

Then use the code to trigger the event when you reach the gallery element like this:

$(window).scroll(function() {
   var hT = $('#gallery').offset().top,
       hH = $('#gallery').outerHeight(),
       wH = $(window).height(),
       wS = $(this).scrollTop();
   if (wS > (hT+hH-wH)){
    $('#gallery img').each(function(i) {
      $(this).addClass('float').delay(i*200).fadeIn(3000);
    });
   }
});

Animation triggered when user scrolls to specific section

Answers (1)

Codepen Demo

Related Questions