LP作成に必要なスキル

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

 

注意点

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

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

全体のHTMLは↓です。

実務をしている会社ではパララックスは必要らしい

実務をしている会社の人が言うには商品購入のページのLPを作るときに動きがないページよりも動きがあった方が閲覧者的にインパクトがあり商品購入に繋がる可能性が上がるらしいです。

思った以上に簡単に作れるのでこれから実務をしたい人はポートフォリオサイトに加えてはどうでしょうか?

私のポートフォリオサイトにも導入しています(かなり前に作ったので下手です)が実務未経験の人が実装できると面接官の印象がいいかもしれません。

https://syougaihukutobiyou.com/portfolio/

ちなみに私が面接を受けて模写サイトを見せたのですがkey framesプロパティを取り入れました、↓です。

https://kyohayata.github.io/pas-pol/

 

パララックスについて解説しているサイトもありますのでよかったらごらんください。

https://peraichi.com/univ/19