スクロールの速さが変化

ページトップリンク
-スクロールの速さが変化-

デモページを見る

See the Pen 8-1-9 スクロールの速さが変化 by 動くWebデザインアイディア帳 (@ugokuweb) on CodePen.

「Result」内のリンクをクリックして動きを確かめてね!

動きを実現する仕組み

リンクをクリックした後のスクロールの速さをjQuery Easing Plugin というjQuery のエフェクトに変化をつけるライブラリを使って変化させる。

[使用するライブラリ]
* jQuery
* jQuery Easing Plugin(https://github.com/gdsmith/jquery.easing

HTMLの書き方

  1. head終了タグ直前に自作のCSSを読み込みます。
    <link rel="stylesheet" type="text/css" href="css/8-1-9.css">
    </head>
  2. body内のページの先頭に戻るリンクを表示させたい場所にHTMLを記載します。
    <p id="page-top"><a href="#">Page Top</a></p>
  3. body 終了タグ直前に jQuery、jQuery Easing Plugin、動きを制御する自作のJS の3 つを読み込みます。
    <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script>
    <!--自作のJS-->
    <script src="js/8-1-9.js"></script>
    </body>

自作のCSS内の書き方

/*リンクの形状*/
#page-top a{
	background:#942D2F;
    display: block;
    padding:20px;
	width:100%;
	color: #fff;
	text-align: center;
	text-transform: uppercase; 
	text-decoration: none;
	font-size:0.8rem;
	transition:all 0.3s;
}

#page-top a:hover{
	background: #777;
}

自作のJS内の書き方

// #page-topをクリックした際の設定
$('#page-top').click(function () {
    $('body,html').animate({
        scrollTop: 0//ページトップまでスクロール
    }, 1500,"easeInOutQuint");//ページトップスクロールの速さ※数字が大きいほど遅くなる, easingプラグインでアニメーション速度に変化
	//linear、swing、jswing、easeInQuad、easeOutQuad、easeInOutQuad、easeInCubic、easeOutCubic、easeInOutCubic、easeInQuart、easeOutQuart、easeInOutQuart、easeInQuint、easeOutQuint、easeInOutQuint、easeInSine、easeOutSine、easeInOutSine、easeInExpo、easeOutExpo、easeInOutExpo、easeInCirc、easeOutCirc、easeInOutCirc、easeInElastic、easeOutElastic、easeInOutElastic、easeInBack、easeOutBack、easeInOutBack、easeInBounce、easeOutBounce、easeInOutBounceなどから選択可能
    return false;//リンク自体の無効化
});

この技術を使ったサンプルサイト

バリエーション
を見る

「機能」に関わる
動き一覧

書籍情報

紙面だからこそできるまとめ方でコードを説明し、
全体を俯瞰して調べることが出来る構成になっています。

もちろん、パーツのサンプルコードもzipでまとめてダウンロードできます。
購入をしてくださった方には特典がありますので是非チェックしてみてください!

書籍紙面サンプル

出版社:ソシム株式会社
2021/2/27 発売

書籍紙面サンプル

出版社:ソシム株式会社
2021/7/31 発売

Page
Top