UNIRRY

WEBデザインとホロスコープと宇宙のブログ

するする移動しながら追随してくるメニューバーの実装

menubar1

やべえ、WEBの記事が・・・!WEBの記事の更新率が・・・!
まもなく冬だからふってくるパターンをいろいろつくろうと思って、雪降らそうと思ったら、クソむずかしい!そんなわけで、ぱぱっ・・・と書ける記事をまずはあげていきます!

追随する固定メニューの実装

メニューバー系の実装をやってくぜもうこーなったら、ということで、するする移動してついてくるやつです。

インストールするもの
・jquery
・jquery.easing.1.3.js(ダウンロードサイト
・jquery.scrollfollow.js(ダウンロードサイト

html

<html>
<body>
<!-- ここから追随させる要素 -->
<div id="cmpsns"></div>
<!-- ここまで追随させる要素 -->
</body>
</html>

css

body {
position: relative;
}
#cmpsns {
position: absolute;
right: 10px;
top: 200px;
z-index: 200; /* 必要があればz-index指定 */
}

js

// 追跡要素
$( '#cmpsns' ).scrollFollow({speed: 500,offset:200});


horoscope

“sozatu” animation!! >>    animation1   |   animation2   |   animation3