動畫div與不同的寬度和速度點擊

我見過這個網站和一個非常好的動畫功能！但我不是一個jQuery專業人員，並且很想了解這個registration-bg是如何工作的，它是以這種方式生成動畫的。動畫div與不同的寬度和速度點擊

http://www.thecapitol.pn/capitolconcerns - >單擊箭頭中間

怎麼可能是在div動畫不同寬度的每個側面，不同的動畫速度？我在網上找不到任何可以這樣工作的東西。

UPDATE

$("#box1").click(function(e) { 
    TweenMax.to(box, 0.5, {x: 500,y:0, rotation: 20}); 
    TweenMax.to(box, 0.5, {rotation: 10, delay: 0.3}); 
}); 

$("#box2").click(function(e) { 
    TweenMax.to(box, 0.5, {x: 0,y:0, rotation: -5}); 
    TweenMax.to(box, 0.5, {rotation: 0, delay: 0.3}); 
});

jsFiddle

來源

2014-10-08 Prall01

我想這是用canvas實現。網站來源指向tweenmax。您可以在Why GSAP頁面獲得更多信息。您檢查與像firebug工具的源細看到abstractView和registration js文件..

更新：

使用GreenSock爲您提供這個加元http://cdnjs.cloudflare.com/ajax/libs/gsap/1.13.2/TweenMax.min.js
大源：Tips for using the GreenSock Animation Platform
嘗試：TweenMax.to($('#box'), 1, {x: -290,y:-300, rotation: 50, delay: 1.5});使您的div 500px後500px和餘量：0

來源

2014-10-08 08:18:59 wooer

謝謝你r快速響應！ http://jsfiddle.net/TRj2U/86/我已經創建了這個小提琴，但仔細觀察js文件後，這就是我創建的。但我不知道我可以如何控制導航欄的每一側。 – Prall01 2014-10-08 09:53:04

不客氣..請參考我上面的編輯..或者看看http://jsfiddle.net/TRj2U/90/，你可以很容易地玩它，並找到你想要的結果。 – wooer 2014-10-08 13:24:55

嘿謝謝你非常！我用一個工作動畫更新了我的小提琴。但動畫滯後......我該如何解決這個問題？ @wooer – Prall01 2014-10-09 12:45:15

動畫div與不同的寬度和速度點擊

回答

相關問題