こんにちは。メンターのまさやです。

Web制作を勉強されている方々でJSに苦手意識がある方が多いのではないでしょうか？

今回はそんな方に向けてよく使う４つのJSが必要な実装を簡単に行う方法を紹介します。

1. スライダー

よく出てくるスライダーですがプラグイン（ライブラリ）を使えば簡単にできます。ここでは主な2つを紹介します。どちらか選んで使ってください。

またオプションでfadeを指定することで横スクロール式のスライダーだけでなくフェイドアウト式のスライダーもできます。詳しくはswiper.js オプションなどで調べるとたくさん出てきます。

2. ハンバーガーメニュー

ハンバーガーメニューはいろいろな挙動がありますが以下の動画の通りにやれば大抵のものは簡単にできます。
https://www.youtube.com/watch?v=8BItmm-CQvc
この動画で使っているファイルは以下からダウンロード可能ですよ。
https://webgodweb.com/download.php?youtube=8BItmm-CQvc

3. スムーズスクロール

スムーズスクロールとは href="#id名" を指定することでページ内移動ができるのですがそれをスクロールしてるみたいにスムーズになるようにするものです。

CSSの scroll-behavior: smooth; でも実装可能ですがsafariで対応がされていない気がしています。
2022年3月にSafari15.4の登場によりCSSの scroll-behavior: smooth; が対応されました。今後はJSではなくCSSでの実装が主流になりそうです。

scroll-behavior: smooth;

結論JSに以下のコードを書きましょう。
JSで実装したい場合

$(function(){
$('a[href^=#]').click(function() {
var speed = 500; // スクロール速度(ミリ秒)
var href = $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$('html').animate({scrollTop:position}, speed, 'swing');
return false;
});
});

（Jqueyのバージョンが1.8.3でないと動かない場合があります。以下のコードで読み込めます）

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

これでhref内に#があった場合、スムーズにスクロールされるようになります。jQueryを読み込んでいる必要があるので気をつけてください。
参考記事は以下になります。
https://web.havincoffee.com/design/2020/09/2009281.html

4. アコーディオン

HTMLのみで実装する方法
以下の記事を参考にどうぞ
https://code-kitchen.dev/html/details-summary/

JSを使用する方法
動画の通りにやればできます。
https://www.youtube.com/watch?v=Vw7xzB78uGg

5. モーダル表示

JSのclassListを使いこなせるようになればそこまで難しくありません。下記の動画を参考にしてください。
https://youtu.be/6JF0UAX7g-k

6. フェードインなどのアニメーション

aos.jsというライブラリが便利です。以下の記事を参考にどうぞ。
https://crepro-media.com/pickup/aosjs/

以上で実際現場で使用頻度が高くJSが必要なものは終わりです。そこまで難しくないと思います。