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

<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Delayed image load in</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.95.3/css/materialize.min.css" rel="stylesheet"/>
</head>
<style>

</style>
<body>
  <div class="red"></div>
  <div id="gallery scroll-to">
    <a href="#" data-click=".collapsible .collapsible-header:eq(0)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon1.png" id="float" alt="" width="125" /></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(1)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon2.png" id="float" alt="" width="125" /></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(2)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon3.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(3)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon4.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(4)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon5.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(5)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon6.png" id="float" alt="" width="125"/></a>
    <a href="#" data-click=".collapsible .collapsible-header:eq(6)"><img src="http://www.maximiles.co.uk/images/dynamics/uk/email_images/ftpIMAGES2014/loyaltyimages/icon7.png" id="float" alt="" width="125"/></a>
    <img src="" alt="" />
    <img src="" alt="" />
    <img src="" alt="" />
  </div>
  <br><br>
  <div>
    <ul class="collapsible" data-collapsible="accordion">
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Gah</div>
            <div class="collapsible-body">
                <p>Hello StackOverflow! SO's da' bomb diggidy!</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Second</div>
            <div class="collapsible-body">
                <p>Why is the person who invests your money called a broker?</p>
            </div>
        </li>
        <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Third</div>
            <div class="collapsible-body">
                <p>I'd like to <a href="#" data-click=".collapsible .collapsible-header:first">open the First collapsible element</a> in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
      <li>
            <div class="collapsible-header"><i class="mdi-navigation-chevron-right"></i>Forth</div>
            <div class="collapsible-body">
                <p>I'd like to in this list.</p>
            </div>
        </li>
    </ul>
</div>
</body>
</html>

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');
});

score 1 · Accepted Answer · answered Dec 19 '16 at 15:24

1

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);
    });
   }
});

Codepen Demo

answered Dec 19 '16 at 15:24

DaniP

37,813
8
65
74

That's exactly what I was after. Thank you for your help. I am slowly managing to learn stuff (this whole minisite is one big learning curve). – Schro Dec 19 '16 at 15:27
1

Gald to help U mate @Schro – DaniP Dec 19 '16 at 15:28
Sorry another question @DaniP , why does the code stop working when I change it from SCSS to CSS? – Schro Dec 19 '16 at 15:57
@Schro did you know about css preprocessors ? SCSS has another syntax to write the css and needs to be converted properly, on codepen you can view the compiled CSS result by clickng the arrow on the css window. – DaniP Dec 19 '16 at 16:08
1

It's another on a long list of things for me to learn it seems. Thank you for pointing me in the right direction, I have begun to research it. – Schro Dec 19 '16 at 16:21

Animation triggered when user scrolls to specific section

1 Answers1

Codepen Demo