Div element animation while scrolling

Question

I have multiple <div class="box"> (one for every part of the page, example one for slideshow, one for news and so on) that slides up on windows load, but what I want to do exactly is that it start to slide up,with a delay of 2 seconds, when the user scroll the page and the section is visible to the user.

$(window).load(function(){
    $('.box').addClass('boxload');
});

as you can see when the windows loads it add a css class that it make the div slide up, I can see the first element but when I scroll, ofcourse, the others div class="box" are already up, and I want that those others start the slide when the section appear on screen. The css

    .box {
  display: block;
  position: relative;
  width: 40%;
  height: 100px;
  margin: 0 auto;
  padding: 10px 20px;
  top: 95px;
  background: #E0563B;
  color: #fff;
  z-index: 6;
  -webkit-transition: all 1s ease-in-out;
  -moz-transition: all 1s ease-in-out;
  -o-transition: all 1s ease-in-out;
  transition: all 1s ease-in-out;
  box-shadow: 0 0 20px #000000, inset 0 -1px 3px #000000;
}
.boxload{
    position:relative !important;
    top:45px !important;
    -webkit-transition: all 3s ease-in-out;
  -moz-transition: all 3s ease-in-out;
  -o-transition: all 3s ease-in-out;
  transition: all 3s ease-in-out;
}

Any suggestions?

I tried this

$("#last-post").scroll(function(){
$('.box').addClass('boxload');
});

but is not working...

Can you show some code, what have you tried so far ? And how you are sliding up the div elements ? — Ashis Kumar, Sep 26 '13 at 10:07
the div elements are sliding up just by adding a class $(window).load(function(){ $('.box').addClass('boxload'); }); what I need is that this slides happend while the element is visible — Michele Petraroli, Sep 26 '13 at 10:10
Would you mind uploading your HTML, your CSS and your current code to jsbin.com? Would help us a lot. — Jan Berktold, Sep 26 '13 at 10:13
you may find the html here [link]http://snipt.org/embed/AhgC3 — Michele Petraroli, Sep 26 '13 at 10:25

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

If I understood you correctly:

Use the jQuery scroll event handler, to get notified, whenever your user scrolled.

Then use the window.setTimeout function to call your function two seconds (2000 ms) later.

Use element.getBoundingClientRect to get the absolute position of the object. Related question.

And lastly, use whatever technique you want to animate the box.

Leave a comment, if I misinterpreted your post.

edited May 23 '17 at 12:05

Community

1
1

answered Sep 26 '13 at 10:22

Jan Berktold

976
1
11
33

you understand exactelly what I need... how do I get the exactelly position of the div when I scroll the page? – Michele Petraroli Sep 26 '13 at 10:28

Div element animation while scrolling

1 Answers1