Detect when id or class is in view

JavaScript
1

I came across this site and others that move content when you reach a certain point on the page. http://www.loyalblocks.com/

I’m looking at the mobile section where the cards fan out. I can see that they change margins when you scroll to certain points and use transform in the css, but I don’t understand their javascript.

$(document).ready(function($) {
    // mobile cards animation
    var card1 = TweenMax.to("#card1", 0.3, {rotation: 105, top: 30, left: 155});
    var scene1 = new ScrollScene({triggerElement: '#trigger1', duration: 350, offset: 110}).setTween(card1).addTo(controller);
    //scene1.addIndicators();

I did look up tweenmax and came across GreenSock. I’m wondering if I really need to use/learn Green Sock or if straight javascript is the best answer?

Is there another way to detect when classes and/or id’s are visible on a page?

2

I don’t know about GreenSock, but there’s a plugin called skrollr.js, pretty well documented, does the job.
Also you can just use pure javascript or jquery, which I recommend over skrollr.
In jquery you could do

$(window).scroll(function(){
    if ($('element').offset().top > $(window).scrollTop(){
        //do something
    }
    else{
        //do something else
    }
});

where $(‘element’) is basically any element - $(‘.class’) , $(‘#id’) or $(‘html-tag’)

3

Thanks. So, this will cause the //do something to fire once the elements id is in view and NOT once the element’s id is at a certain point in the screen (e.g. 500px from the top)?

Okay let me see if I fully understand this function.

So what you’re doing here is comparing the elements position to that of the vertical scroll bar’s position? Then you’re saying if the scroll bar’s position is close to the top than the elements position then cause the function that I will enter to fire?

Thanks.

4

Exactly. $(‘element’).offset().top is the elements vertical offset from the top of your page, $(window).scrollTop() is scroll position. Obviously you’ll have to tweak this further to work for you properly -you can add multiple conditions, like

$(window).scroll(function(){
    if ($('element').offset().top-100 < $(window).scrollTop() && $('element').offset().top+100 > $(window).scrollTop()){
        //do something
    }
});

This would mean if the scroll position is between the elements position - 100px and the elements position + 100px, it should execute the function. Experiment with it, maybe you’ll have to add your values in % instead of px ($(‘element’).offset().top+“10%”).
You can read more about jQuery : jQuery documentation
Please do so, it is a really easy and fun alternative to normal javascript.