Webサイトでマルチスクロール機能を実装してみた(jQuery)(multiscroll.js)

職業訓練の授業で、jQueryを学習しました

jQueryは、JavaScript言語のプログラムが入った道具箱。
この言語を書くだけで、Webサイトに動きをつけることができる魔法の道具です。

例えば、LightBoxの場合

「クリックすると画像が浮かび上がって拡大表示される機能」です。

  <link href="./lightbox2-2.11.3/dist/css/lightbox.css" rel="stylesheet">
  <script src="./jquery-3.5.1.min.js"></script>
  <script src="lightbox2-2.11.3/dist/js/lightbox.js"></script>

もっと簡単に。外部から読み込ませる場合は下記

<link href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/css/lightbox.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.7.1/js/lightbox.min.js" type="text/javascript"></script>

実装も簡単
機能を適用したい画像に下記のコードを書くだけ

  <a href="hogehoge.jpg" data-lightbox="roadtrip">
    <img src="hoge.jpg" alt="#" width="400" height="300">
  </a>

multiscrollに挑戦してみた

授業の実習で、好きなスクリプトを組んでよいとのことだったので、廻覧した結果「multiscroll」に決定。
理由は、かっこよかったから。

下記ルールに従って、さっそく実装

しかし、まったくスクロールしませんでした。

理由の検証に時間がかかった

公式サイトのソースコードを見ながら研究するも、まったく動かない。
しばらくしてあるコードが気になりました。

<script src="./jquery.easing-master/jquery.easing.min.js"></script>

ググると、multiscrollにアニメーションをつけたい場合は必要だが、無くていいと書いてありました。
しかし、これしか考えられないと、jquery.easing.min.jsのソースをダウンロードし組み込んだ結果、動きました！

jQuery. easingとは何なのか？

いろいろ調べた結果、アニメーションの動きに変化をつけられるとのことでした。
これがあることで、びよーんと伸びたりするとのことでした。
だから、スクロールが何も動かなかったのかと納得。

まとめ

初めてjQueryをさわりましたが、ネットで調べると、動きをつけるプラグインはたくさんあるんだなと知りました。
ポートフォリオにしっかり組み込んでいきたいです。