smoothScrollの実装
ページ内をするするっとスクロールするスクリプトを実装する手順のメモ。
スクリプトの読み込み
//smoothScroll.jsの読み込み
<script src="js/smooth-scroll.min.js"></script>
//smoothScrollの実行
<script>
//SmoothScroll
smoothScroll.init({
speed: 1000 ,
updateURL: false,
}) ;
</script>
HTMLの指定
ページトップに戻る場合
<a href="#" data-scroll="">ページトップへ</a>
指定したセクションに移動させる場合
<a href="#section-title" data-scroll="">Section Titleへ移動</a>
<h1 id="#section-title">Section Title</h1>
固定ナビの場合
<!-- Fixed-Top-Header -->
<div data-scroll-header>
<div>Navigation<div>
</div>
オプションの設定
//smoothScrollの実行
smoothScroll.init({
selector: '[data-scroll]', // スムーススクロールが有効なリンクに付ける属性
selectorHeader: '[data-scroll-header]', // 固定ナビに付ける属性
speed: 500, // スクロールする総時間(ミリ秒)
easing: 'easeInOutCubic', // スピードのアニメーションパターン
offset: 0, // 到達場所からズラすピクセル数
updateURL: false, // URLを[#〜]に変更するかしないか
callback: function () {} // コールバック関数 (到達時に実行される関数)
}) ;
easingの種類
easeInQuad だんだんとスピードが上がる。
easeInCubic だんだんとスピードが上がる。後半、急に上がる。
easeInQuart だんだんとスピードが上がる。後半、とても急に上がる。
easeInQuint だんだんとスピードが上がる。後半、さらに急に上がる。
easeInOutQuad 移動開始時と終了時がゆるやかになる。
easeInOutCubic 移動開始時と終了時がゆるやかになる。中盤、急に上がる。
easeInOutQuart 移動開始時と終了時がゆるやかになる。中盤、とても急に上がる。
easeInOutQuint 移動開始時と終了時がゆるやかになる。中盤、さらに急に上がる。
easeOutQuad だんだんとスピードが下がる。
easeOutCubic だんだんとスピードが下がる。前半、急に上がる。
easeOutQuart だんだんとスピードが下がる。前半、急に上がる。
easeOutQuint だんだんとスピードが下がる。前半、急に上がる。
jsファイルは、Github/cferdinandi/smooth-scroll からダウンロード。
jQueryプラグインは、plugins.jquery.com/smooth-scroll から。
コメントを残す