電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

JavaScriptで「スクロール時にメニューをふわっと表示」を実装する方法

calendar

WEBサイトでよく見かける「スクロールすると浮かび上がってくるmenuボタン」、これの実装はJavaScriptで可能です。

今回は、その作成方法をまとめてみようと思います。

※完成はこんな感じです。↓

 

作成のおおまかな流れとしては、

・htmlにボタンを作成

・JavaScriptでscrollのイベント処理を記述

・cssのanimetionでふわっと感を演出

なお、JavaScriptついてはライブラリを使用しません。基本ネイティブなJavaScriptで作成します。

スポンサーリンク

html

main閉じタグ前の「div id ura」がmenuボタンとなります。

main閉じタグ前の「div id move」がtopへ戻るボタンとなります。

他の記述は適当にかいているので、無視してください。

CSS

.uramenu(menuボタン).topmove(topへ戻るボタン)でボタンの位置と形を整えます。position:fixed;は指定した位置を固定しスクロールに追従するので必須です。

画面がページのTOPにある場合(初期の状態)はボタンを消しておきたいので、「visibility:hidden;」を記述しておきます。また、「opacity:0;」で透明にしておきます。

後にJavaScriptでスクロールのイベント処理を発生させたとき、.uraopenを付与し、menu名のアニメーションを実行させます。また、「visibility:visible;」を記述し、この段階で消していた要素を出現させておきます。

アニメーションの長さは3秒とし、1秒ごとに背景が濃くなるようにしています。

アニメーションが終わると、実行された内容が消えてしまう(今回の場合だと浮かび上がったボタンが消えてしまう)ので、.uraopenに「animation-fill-mode: forwards;」を記述しておきます。これでアニメーション後も変化した状態が続くようになります。

そのほかの記述は無視でOKです。

JavaScript

スクロールイベントの場合は、

window.addEventListener(“scroll”, function() {処理内容});

と記述します。

windowは省略可能なので、addEventListener(“scroll”, function() {処理内容});でもOKです。

処理内容にifを使って分岐させていますが、これは「scrolly(縦方向のスクロール)>px」は真。つまり、定数pxに100が入っているので、縦方向のスクロール位置が100pxを超えれば真の処理、となります。

真の処理では、前途したボタンのclassにuraopen classを付与するので、アニメーションが開始する仕組みです。

偽の場合は、縦の位置が100px未満の場合となるので、removeでuraopen classを外しています。つまり、ボタンの表示は消えます。