[Notes] Interesting animation in jQuery

剛剛意外再次看到tzangms的部落格,沒想到已經過了幾年的時間了!因為這段日子對javascript開始有了一些研究,所以對它的Banner scrolling 的特效很感興趣,就順手研究了一下它的 js code,沒想到這麼簡單就能做到,不知道該說 jQuery 太厲害了,還是想到這種實作方法的人太聰明呢:P

上面這張是他網站的截圖,光是版面的配置以及使用的自製圖案來看,其實就看得出小巧精美的一面,不過今天的重點是那個Banner,我對於他可以做到捲動的效果感到很好奇,而實際做法其實也就是想像中這麼容易,只是他利用了一個CSS background-position的特性,原來當div的background設定成無限延展的時候(預設),就可以利用把position拉到無限遠的地方並搭配 Timer(jQuery可以用animate)設定好一個時間差,然後讓頁面在這個時間內一直偏移position的值來完成捲動的特效。

最後附上測試用程式碼,而圖檔的部分則是以tzangms的banner為例。
https://gist.github.com/757436.js?file=gistfile1.html

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s