[JS]背景画像をアニメーションさせて、サイトの印象をガラッと変えるスクリプト
Post on:2009年6月22日
sponsors
背景画像にアニメーションのエフェクトを加え、カラーをゆっくりと変更してサイトの印象をガラッと変えるスクリプトをYOU LOVE.USから紹介します。
The youlove.us scrolling background effect expained
demo: YOU LOVE.US
ヘッダ・フッタ・コンテンツの背景はアニメーションでスライドし、しばらく時間がたつとサイトの印象はガラッと変わります。
背景画像は下記のようになっており、ゆっくりとスライドします。
スクリプトのベースにはjQueryが使用されており、下記のスクリプトをプラグインとして使用します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
<textarea name="code" class="js" cols="60" rows="5"> $(function() { // *** // Scrolling background // *** // height of background image in pixels var backgroundheight = 4000; // get the current minute/hour of the day var now = new Date(); var hour = now.getHours(); var minute = now.getMinutes(); // work out how far through the day we are as a percentage - e.g. 6pm = 75% var hourpercent = hour / 24 * 100; var minutepercent = minute / 60 / 24 * 100; var percentofday = hourpercent + minutepercent; // calculate which pixel row to start graphic from based on // how far through the day we are var startoffset = backgroundheight / 100 * percentofday; // end 1x background height after the start offset so we get a smooth loop var endoffset = startoffset + backgroundheight; function scrollbackground() { // set the background start position $('body').css({ backgroundPosition: '50% -' + startoffset + 'px' }); // animate through to the end $('body').animate({ backgroundPosition:'(50% -' + endoffset + 'px)' }, 100000, "linear", function () { // callback to self to loop animation scrollbackground(); } ); } // start the animation scrollbackground(); } </textarea> |
sponsors
