プログラミング

コピペOK!jQueryのパララックスで左右から文章や画像を出す

コピペでできるパララックス

コピペでできるjQueryのパララックス

 

パララックスを実装したい人
パララックスを実装したい人

パララックスを実装したいけどjQueryの使い方がよく分からないからどうすればいいか分からない。
お手軽にできる方法はないかな?

 

といった悩みに当サイト(実務未経験からWEBエンジニアへの道のり)の管理人のjonioがお答えします。

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

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

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を始めたばかりの人にはお勧めです。

説明を終わります。