CODEWITHSUNDEEP
javascriptjqueryhtmlcss
parish parab
parish parab

Reputation: 71

Animate image left to right on scroll

What I am trying to do is I have around 6 inline images I want slide them left to right on specific position and stop there for each image. And images have to slide at the time the scrool comes over them. I tried this javascript for it (totally new to JS)

$(window).scroll(function(){
if($this.scrollTop()>300)
{
    $('.onfoot1').slideright();
}
function slideright(){
    var a = getElementsByClassName('.onfoot1');
    var stoppos = 100;
    if (parseInt(a.style.left)< stoppos )
    {
        a.style.left = parseInt(a.style.left) + 3 + "px";
        setTimeout(slideright , 1);
    }
 }
});

Markup

<div class="onfoot1"></div>

CSS

div.onfoot1{
  content:url(../img/onfoot1.jpg);
  left:0;    
}

Upvotes: 1

Views: 5748

Answers (1)

Ren&#233; Martin
Ren&#233; Martin

Reputation: 518

I've put together a working examle for your code: https://jsfiddle.net/hmzw9y65/

I've made a few assumptions there... You are using $(...) syntax so I guessed you are using JQuery. JQuery has a .animate() function which should do the trick (http://api.jquery.com/animate/). Also I guessed that you may want to make the css-position of the div fixed so it stays on screen when you scroll.

EDIT: I noticed that you don't want you image on the bottom of the screen but animating when screen reaches it. Updated my fiddle to do that: https://jsfiddle.net/hmzw9y65/1/

Upvotes: 3

Related Questions