Mootools to jQuery convert

Question

Hi,

I would like to implement the Vimeo website scroll/easing effect (look for the sun and clouds) in my website. Vimeo uses Mootools to do that, I want to use jQuery. How do I do this?

Below is the easing part that needs to be ported to jQuery (don't know this is allowed to post so delete this if it isn't):

var scroller;

window.addEvents({
'domready': function () {

   var sun = new Element('img', {
        'src': 'http://assets.vimeo.com/images/land_sun.gif',
        'id': 'sun'
    }).inject(document.body);

   var cloud = new Element('img', {
        'src': 'http://assets.vimeo.com/images/land_cloud.gif',
        'id': 'cloud',
        'styles': {
            'position': 'fixed',
            'z-index': '20',
            'top': '48px',
            'right': ((window.getWidth() - $('main').getCoordinates().right) - 65) + 'px'
        }
    }).inject(document.body);

    var cloud2 = new Element('img', {
        'src': 'http://assets.vimeo.com/images/land_cloud2.gif',
        'id': 'cloud2'
    }).inject(document.body);

    var sun_style = new Fx.Style($('sun'), 'top', {
        duration: 2500,
        transition: Fx.Transitions.Quad.easeOut
    });

    var cloud_style = new Fx.Style($('cloud'), 'top', {
        duration: 2500,
        transition: Fx.Transitions.Quad.easeOut
    });

    var cloud2_style = new Fx.Style($('cloud2'), 'top', {
        duration: 2500,
        transition: Fx.Transitions.Quad.easeOut
    });

    scroller = function () {
        var distance = (window.getScrollTop() / (window.getScrollHeight() - window.getHeight()));
        sun_style.stop().start($('sun').getCoordinates().top, (0 - (distance * 275)));
        cloud_style.stop().start($('cloud').getCoordinates().top, (48 - (distance * 300)));
        cloud2_style.stop().start($('cloud2').getCoordinates().top, (325 - (distance * 425)));
    }

    scroller.periodical(100);
}

});

Answer 1

Got it!

$(document).ready(function(){        
    var scroller = function () {
        var distance = ($(window).scrollTop() / ($(document).height() - $(window).height()));

        $("#floating_1").stop().animate({
            "top": (300 - (distance * 500))
        }, 2500, "easeOutQuad");

        $("#floating_2").stop().animate({
            "top": (5 + (distance * 100))
        }, 2500, "easeOutQuad");

        $("#floating3").stop().animate({
            "top": (0 + (distance * 220))
        }, 2500, "easeOutQuad");

    }           
    setInterval(scroller,100);
});