jQuery로 Mootools 변환

Question

내 웹 사이트에서 Vimeo 웹 사이트 스크롤/이징 효과 (태양과 구름 찾기)를 구현하고 싶습니다. Vimeo는 Mootools를 사용하여 jQuery를 사용하려고합니다. 어떻게해야합니까?

다음은 (그렇지 않은 경우는이 몰라 너무 게시이를 삭제할 수있다) jQuery를 포팅 할 필요가 여유 일부입니다

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

가 알았어요!

$(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); 
});