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を外しています。つまり、ボタンの表示は消えます。
