AddClass to an image when scrolling

Question

I have an <img> tag which already has the icon class.

I need to add two extra classes to that element for [animate.css] (http://daneden.github.io/animate.css/) animations.

Those extra classes, flip and animated, need to be added once the user scrolls to the image.

I tried a lot of different ways but none of them worked. Here's the html:

<div class="col-md-12 ">
    <div class="box">
        <img src="img/world.png" class="icon"/>
        <h1>WEB<br/>DESIGN</h1>
    </div>
</div>

The users should scroll down around 1328px so that the animations starts.

Bottom line: How do I add flip and animated classes to <img> when the user scrolls to it?

Please add the javascript code that failed – sabithpocker Jan 04 '15 at 18:43 — sabithpocker, Jan 04 '15 at 18:43

score 2 · Accepted Answer · edited May 23 '17 at 12:15

You could do this: http://jsfiddle.net/AndyMardell/rqgh699w/

I used the following "isScrolledIntoView" function from this post: Check if element is visible after scrolling

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
        elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

$(window).scroll(function(){
    if (isScrolledIntoView('.box')) {
        $('img').addClass('animated flip').css('background', 'red');
    }
});

It waits for your parent .box element to be visible in the window, then triggers

Unless the question is tagged with jQuery, don't post it in your answer. — theonlygusti, Jan 04 '15 at 19:15

Kevin · Answer 2 · 2015-01-06T23:00:29.170

0

Try something like

window.onscroll = function() { 
  var scrollTop = window.pageYOffset;
  if(scrollTop > 1328) {
    //do what you want.
    alert(scrollTop);
  }
}

Is that what you needed?

edited Jan 06 '15 at 23:00

answered Jan 04 '15 at 18:57

Kevin

17
5

No jQuery has been allowed (thus far). – theonlygusti Jan 04 '15 at 18:59
@theonlygusti I took out the javascript. – Kevin Jan 04 '15 at 19:08
did it help? @theonlygusti – Kevin Jan 04 '15 at 19:22
oh, whoops, :) @theonlygusti – Kevin Jan 04 '15 at 19:34
Maybe you should edit your post as `function(e)` isn't needed, you would be better off with just `function()`. – theonlygusti Jan 04 '15 at 20:40
@theonlygusti force of habbit. – Kevin Jan 06 '15 at 23:01

score -1 · Answer 3 · edited May 23 '17 at 12:08

You can use the onscroll event listener and the scrollTop property to wait until it's time to add those classes, something like:

window.onscroll = function() {
    if (document.body.scrollTop > 1328) {
        // add your classes
    }
}

You can use .className (stackoverflow, MDN) to actually add the classes:

document.querySelectorAll("img.icon")[0].className += " animated flip";
//                                                     ^ note this space

.querySelectorAll could just as easily be replaced with .getElementsByClassName("icon").

If you need a one-time use animation, the above examples will be fine, it looks like this:

window.onscroll = function(){
    if (document.body.scrollTop > 1328){
        document.querySelectorAll("img.icon")[0].className += " flip animated";
    }
}

here's a JSFiddle.

If you need the animation to trigger every time, check out this well-commented JSFiddle

AddClass to an image when scrolling

3 Answers3