スライダーのアニメーションをマウスの位置によって変化するスクリプト
appleの30周年の記念のサイトがありまして、
そこの年表の動きを実際にやってみるべく試してみました。
そのサイトはこちらで、
Apple – Macの30年
デモはこちらです。
(アニメーションの動きしかやっていません・・・)
まだ思った通りにいってないので、もっとブラッシュアップする必要があります。。。
HTMLは以下になります。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <div class="bg_img"> <ul id="slider" class="slider"> <li class="slide1"><a href=""><img src="up.png" /></a></li> <li class="slide2"><a href=""><img src="trojan2.png" /></a></li> <li class="slide3"><a href=""><img src="weight.png" /></a></li> <li class="slide4"><a href=""><img src="world.png" /></a></li> <li class="slide4"><a href=""><img src="user.png" /></a></li> <li class="slide4"><a href=""><img src="trojan.png" /></a></li> <li class="slide4"><a href=""><img src="treasure_chest.png" /></a></li> <li class="slide4"><a href=""><img src="trophy.png" /></a></li> <li class="slide4"><a href=""><img src="webcam.png" /></a></li> <li class="slide4"><a href=""><img src="virus.png" /></a></li> <li class="slide4"><a href=""><img src="shield.png" /></a></li> <li class="slide4"><a href=""><img src="shoping_cart.png" /></a></li> <li class="slide4"><a href=""><img src="shopping_basket.png" /></a></li> <li class="slide4"><a href=""><img src="slot_machine.png" /></a></li> <li class="slide4"><a href=""><img src="smiley.png" /></a></li> <li class="slide4"><a href=""><img src="speech_bubble.png" /></a></li> <li class="slide4"><a href=""><img src="star.png" /></a></li> <li class="slide4"><a href=""><img src="teachers_day.png" /></a></li> </ul> </div> |
その部分のCSSはこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | .bg_img { width: 960px; margin: 0 auto 150px; border: 1px solid #ccc; overflow: hidden; clear: both; } #slider { position: relative; overflow: hidden; } #slider li { float: left; width: 128px; } |
この辺は普通で特別なことはありません。
最後jsですが、jQueryを使用しています。
こちらは直接jsファイルをご覧ください。
(余計なソースが書いてありますが、ご愛嬌でお願いします)
まだまだうまくいかないですね〜〜
Author Profile
スターフィールド編集部
SHARE
