【JavaScript＆CSS】画面をスクロールした時に横からふわっと出現させる方法
中山テック 代表の中山です。
さて、以前似たようなブログを執筆しましたが、リファレンス的に残してるので気になさらぬよう・・・
今回はスクロールして該当の位置に到達すると横からふわっと画像や文字を出す方法についてのブログとなります。
早速、お話したいと思います。
サンプル
夜中に見てる方、飯テロしてごめんなさい（汗
上記3つの画像が左からふわっと浮き出てきました。
※スクロール系のJavaScriptはこれ以上記述したくない（重くなる）ので全て左から出てますが、右から出す方法も後述します
HTML
ありません。
今回はID指定ではなくclass指定となっております。
※タグに「class=".クラス名"」を追加するだけにしたいがため
CSS
.fuwattoYoko {
opacity: 0;
visibility: hidden;
transform: translateX(-150px); ⇒①
transition: all 1s;
}
.fuwattoYoko.is-show {
opacity: 1;
visibility: visible;
transform: translateX(0px); ⇒②
}冒頭で話したリンク先の処理とほぼ同じです。
違いは①「translateX」に変更していることと②px数がマイナスから0に指定していること。
※リンク先では「translateY」で50px⇒0にしている。下から上にふわっとさせたいため
マイナス指定しているのは、左側から出したいがためです。。
もし右の方から出したい場合は「150px」など、正の整数で定義してください。
JavaScript
function fy_effect() {
var element = document.getElementsByClassName('fuwattoYoko');
if(!element) return;
var scrollY = window.pageYOffset;
var windowH = window.innerHeight;
var showTiming = 200; //要素を表示するタイミング
for(var i = 0; i < element.length; i++) {
var elemClientRect = element[i].getBoundingClientRect();
var elemY = scrollY + elemClientRect.top;
if(scrollY > elemY - windowH + showTiming) {
element[i].classList.add('is-show');
}
}
}
window.addEventListener('scroll', fy_effect); //スクロール時に実行かなり手抜きです（汗
というのも、関数名と変更されたクラス名（fuwattoYoko）を変えただけなので。
scrollYは「TOPから見てどこまでスクロールしたか」の位置を取得してます。
scrollXにしなきゃいけないのでは？と思った方もいらっしゃるかもしれませんが・・・
ふわっと出すのはあくまで「一定の場所まで」スクロールしたという判定があってこそなのです。
※JavaScript制御は冒頭のリンク先のFunction内で定義しても可
まとめ
今回はだいぶ短いブログでしたがいかがでしたでしょうか。
以前似たようなブログを書いたことがあるので、このような形となってしまいました。
少しずつHP内のブログにおいて、JavaScriptネタが増えてきました。他で困っている処理があれば画面追従している「索引」もご覧ください！
最後までご覧頂き、ありがとうございました。
