PRE PAGE
HOME > HTML & CSS > jQueryで文章や画像をフェードインするのはコピペでできる(必須)
2022年05月22日

jQueryで文章や画像をフェードインするのはコピペでできる(必須)

jQueryで左右からテキストや画像が現れるようにするのはコピペでできますのでやり方を説明します。

できて当たり前なので実装できるようにしましょう。

今回の説明で実装できる画面が↓です。

https://hayatakyohei.github.io/pararax-blog/

そのためのコードはどこを変えればいいかを説明しますが単純にできます。

 

 

左右からフェードインの実装方法

HTMLに関してはテキストや画像は変えたい部分を変えるだけです。

次は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に関しては13行目と25行目の「scroll_top >= elem_pos – window_h+100」の100を変えるとどれだけスクロールした時にパララックスが作動するかを変える事ができますので画面を見ながら調節すればいいです。

という感じで数値を変えるだけで実装できますのでjQueryを始めたばかりの人にはお勧めです。

 

 

注意点

このパララックスは左右から画像やテキストが現れるからだと思いますがこのままだと画面崩れします

それを防ぐにはこうします。

全体のHTMLは↓です。

●いいねをつけてもらえると励みになります。