スポンサーリンク

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

学習の備忘録
この記事は約4分で読めます。
スポンサーリンク

職業訓練の授業で、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>
  • 公式サイトからソースをダウンロードします。
  • cssディレクトリ内のlightbox.cssを取り出し、導入するhtml内で読み込む
  • jsディレクトリ内のlightbox.jsを取り出し、導入するhtml内で読み込む

※ローカルに入れているため、このようなパスになっています。

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

<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>
<img>に、サムネイルとなる画像
<a>に、クリック後拡大表示される画像
を配置になります。

multiscrollに挑戦してみた

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

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

  • 公式サイトからソースをダウンロードします。
  • cssディレクトリ内のlightbox.cssを取り出し、導入するhtml内で読み込む
  • jsディレクトリ内のlightbox.jsを取り出し、導入するhtml内で読み込む

※ローカルに入れているため、このようなパスになっています。

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

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

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

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

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

jQuery. easingとは何なのか?

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

まとめ

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

スポンサーリンク
ブログの応援よろしくお願いいたします!!
ブログ運営者 兼 筆者
ふらんぶ@パラレルワーカー

More

本業は「サービスデザイナー」で、副業は「Webデザイナー」として、パラレルキャリアを実践し、自分の生き方を追求中

職業訓練校卒(Webデザイン) ▶東証プライム上場のWeb系IT企業勤務▶私生活に影響の出ないスモール副業活動

本ブログは、未経験でのWeb系職種志望者に向けて、勉強方法(おもに職業訓練校)や就職に役立つ情報を自分の体験談をふまえてわかりやすく発信
最近は、副業の幅を広げるためにWebデザインとWebマーケティングの勉強を継続しており、その学習記録をメインに執筆中

「居そうで居ないWeb系職業訓練校の身近な先輩サポーター」として、職業訓練校(Webデザイン)での体験や実務未経験でのWeb系企業への就職の実績をもとに、Web系職種志望者向けのサービスを提供
有料記事公開中

Follow Me
スポンサーリンク
Follow Me
スポンサーリンク


Dayantler

スポンサーリンク
タイトルとURLをコピーしました