CODEWITHSUNDEEP
javascriptjqueryhtmlcss
newbie_girl
newbie_girl

Reputation: 353

Start animation from beginning after scrolling to another element

On my page I have certain animation. When I scroll the whole page I want to make sure that animation starts from the beginning, rather then to have already finished animation on my page. Check this out: http://jsfiddle.net/ykto7uu9/49/

 $(document).ready(function(){
        $("button").click(function(){
            $("#animation").animate({left: '250px'});
        });
    });
html,body {
            height: 100%;
     }
    
    .first {
      background-color: green;
      height: 100%;
      width: 100%;
    }
    
    .second {
      background-color: yellow;
      height: 100%;
      width: 100%;
    }
    
    .third {
      background-color: red;
      height: 100%;
      width: 100%;
    }
    
    .button {
      position: absolute;
      margin-top: 50%;
    }
    
    .animation {
      background:#98bf21;
      height:100px;
      width:100px;
      position:absolute;
        margin-top: 20%;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="first" class="first"></div>
    <div id="second" class="second">
    <button id="button" class="button">Start Animation</button>
    Click on the button Start Animation!<br>
    Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation.
    <div id="animation" class="animation">Block</div>
    </div>
    <div id="third" class="third"></div>

Upvotes: 0

Views: 661

Answers (4)

andfra
andfra

Reputation: 163

You must add scroll() on next line for 'window' selector. Here's your solution:

$(document).ready(function(){
$("button").click(function(){
    $("#animation").animate({left: '250px'});
});
$(window).scroll(function(){
   $("#animation").css({left: '10px'});
});

});

Upvotes: 0

Zorken17
Zorken17

Reputation: 1896

If you want to reset the animation when someone scrolls pass it you need to remove the style attribute of the element like this:

$('#animation').removeAttr('style')

Check out the fiddle here

Upvotes: 1

kekacbre
kekacbre

Reputation: 1

You have a nice JS lib that does just what you need. Its called smoove.

CSS

<style>
html,body {
      height: 100%;
}

.first {
background-color: green;
height: 100%;
width: 100%;
}

.second {
background-color: yellow;
height: 100%;
width: 100%;
}

.third {
background-color: red;
height: 100%;
width: 100%;
}

.button {
position: absolute;
margin-top: 50%;
}

.animation {
background:#98bf21;
height:100px;
width:100px;
position:absolute;
  margin-top: 20%;
  left: 300px;
  opacity: 1 !important;
}
</style>

HTML

<div id="first" class="first"></div>
<div id="second" class="second">
<button id="button" class="button">Start Animation</button>
Click on the button Start Animation!<br>
Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation.
<div id="animation" class="animation block" data-move-x="-300px">Block</div>
</div>
<div id="third" class="third"></div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>

JS

<script>
$(document).ready(function(){
    $('.block').smoove({offset:'10%'});
});
</script>

Here is a quick example, but you can tweek it your way

sample

Upvotes: 0

Vikram
Vikram

Reputation: 632

You can do something like this

$("#animation")
    .animate({left: '250px'})
    .animate({left: '0px'});

Chain the another animation to reset the block's position

Upvotes: 0

Related Questions