初心者向け。jQueryで文章や画像を左右からフェードインする方法
2054 回閲覧されました
みなさんこんにちは、jonioです。
jQueryで左右からテキストや画像が現れるようにするのはコピペでできますのでやり方を説明します。
できて当たり前なので実装できるようにしましょう。
今回の説明で実装できる画面が↓です。
https://hayatakyohei.github.io/pararax-blog/
そのためのコードはどこを変えればいいかを説明しますが単純にできます。
HTML
HTMLに関してはテキストや画像は変えたい部分を変えるだけです。
次はCSSに関してです。
CSS
9行目で左から右に現れる時ですが「transform:translateX(-50px);」の-50pxで最初どこの位置にあるかを決める事ができます。
-50pxを-100pxや-200pxと小さい値にすると左から右に現れた時に出てくる感じが強くなります。
13行目で「transition:opacity 1s,transform 5s;」の5sで登場するまでの時間を決める事ができるので画面を見ながら調節するといいです。
20行目で左から右に現れる位置を決める事ができるのですが「transform:translateX(0);」の0を20pxなどプラスの大きな値にすると右に大きくずらす事ができますが大きくし過ぎると画面崩れの原因になるので画面を見ながら調節して下さい。
25行目は右から左に現れる時ですが座標にすると思って下さい。
27行目の「transform:translate(50px,0);」ですが50pxのみを変えて100pxなどの大きくすればするほど最初の位置が右にずらせます。
31行目の「transition:opacity 1s,transform 5s;」の5sは現れるまでの時間なので画面を見ながら調節して下さい。
38行目の右から左のどこに現れるかになりますが「transform:translate(0,0);」の最初の0を-10pxや-20pxなどの小さい値にするとより左に進みます。
最後はjQueryです。
jQuery
jQueryに関しては13行目と25行目の「scroll_top >= elem_pos – window_h+100」の100を変えるとどれだけスクロールした時にパララックスが作動するかを変える事ができますので画面を見ながら調節すればいいです。
という感じで数値を変えるだけで実装できますのでjQueryを始めたばかりの人にはお勧めです。
注意点
このパララックスは左右から画像やテキストが現れるからだと思いますがこのままだと画面崩れします。
それを防ぐにはこうします。
全体のHTMLは↓です。