CODEWITHSUNDEEP
jqueryhtmlcss
Rory H
Rory H

Reputation: 37

Cross-fade animation

So I am trying to make my cross-fade image animation load after it reaches a certain distance from the top of the page, 100px. I have tried adding the following JQuery, however I can't seem to get it to work. What am I doing wrong?

I appreciate any help on this, thank you!

I've uploaded my source to here http://jsfiddle.net/6c8w76bx/12/

Thanks in advance.

HTML:

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<div id="cf3" class="cf3FadeIn">
<img class="bottom" src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/192648142935Bv3.jpg" alt="192648142935Bv3.jpg">
  <img class="top" src="http://dvqlxo2m2q99q.cloudfront.net/000_clients/192648/file/1926481429316kf.jpg" alt="1926481429316kf.jpg">
  </div>

CSS:

@-webkit-keyframes cf3FadeIn {
   0% {
     opacity:1;
   }
   25% {
    opacity:1;
  }
  75% {
    opacity:0;
  }
  100% {
   opacity:0;
 }
}

.cf3FadeIn {
  position:relative;
  height:544px;
  width:957px;
  margin:0 auto;
}
.cf3FadeIn img {
  position:absolute;
  left:0;
}

.cf3FadeIn img.top {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
}

JQuery:

  $(window).scroll(function() {
    $('#cf3').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+100) {
            $(this).addClass("cf3FadeIn");
        }
    });
});

Upvotes: 0

Views: 159

Answers (2)

guest271314
guest271314

Reputation: 1

Try

css

#cf3 img.top {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
  /* set `paused` `animation-play-state` value */
  -webkit-animation-play-state : paused; 
}

js

  $(window).scroll(function() {
    $('#cf3').each(function(){
    var imagePos = $(this).offset().top;

    var topOfWindow = $(window).scrollTop();
        if (imagePos < topOfWindow+100) {
            // substitute `$("img.top", this)` selector : `img.top`
            // for `$(this)` selector : `div#cf3` DOM element 
            // set "running" `animation-play-state` value
            $("img.top", this).addClass("cf3FadeIn")[0]
            .style.webkitAnimationPlayState = "running";
        }
    });
});

jsfiddle http://jsfiddle.net/guest271314/6c8w76bx/63/embedded/result/

See also , animation-fill-mode , animation-direction

Upvotes: 1

tbh__
tbh__

Reputation: 324

with the scroll removed: http://jsbin.com/hehide/edit

add a class 'active' or whatever you want to...

.cf3FadeIn img.top.active {
  -webkit-animation-name: cf3FadeIn;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-duration: 5s;
  -webkit-animation-direction: normal;
  -webkit-animation-delay: 0s;
  -webkit-animation-fill-mode: forwards;
}

and add/change your selector to:

  $('.top').addClass("active");

this is just one way to handle it, the real problem is that your elements need to have the animation added when the event happens (by adding the class that has the animation on it), not before, and this is assuming that your scroll logic works.

Upvotes: 1

Related Questions