定番
履歴

jQuery スクロールで移動速度を変える

jQuery スクロールで移動速度を変える

文字などエレメントをスクロールの動きとずらす表現のサンプルです。

jQueryのプラグインskrollr.min.jsを使って、文字が遅れて表示する表現を実装しています。

このサンプルでは、画面に対してその要素がどの位置なのかという相対的なrelativeモードで書かれています。

記述の仕方は、 data-[数値]-[画面のどこに]-[要素のどこが]という記述で発動します。 どこかの部分は、top、center、bottomの3種類のみ。数値の部分のプラスマイナスで調整も可能です。

サンプルのdivタグ

<div class="line" data-bottom-center="line-height:100px;opacity:0.0;"
data-center-center="line-height:30px;opacity:1.0;">サンプル</div>


↓スクロールさせるための余白です。




この文字がページ下から現れます。
この文字がページ中央に移動しながら、高さを変えています。
ページ中央に達すると、スタイルの変更が完了します。
以上がサンプルを実装した文字列になります。

文字だとわかりにくいので、要素のスタイルを変えたものも置いておきます。

<div class="box2" data-bottom-center="border-top-width:300px;opacity:0.0;"
data-center-center="border-top-width:0px;opacity:1.0;">
</div>

上記も同様に画面の下部から、ページの中央まで移動するうちに、スタイルを変更させています。

skrollr.min.jsについて、 「data-0」から「data-500」といったページ上部からの移動距離の絶対値で動かす「absoluteモード」のサンプルはこちら

スマホ対応する為にbodyに id="skrollr-body"を追加しています。

2017-10-29 21:14:30
このページの二次元コード

関連するサンプル

人気記事ランキング

© 2018 kipure
Top