かめ。ブログ

フロントエンドエンジニアが「Web」「Youtube」「3D」「お金」「お買い物情報」など、興味があることについて深堀っていくブログです。

【模写・Photoshopデータ配布】パララックス効果を使ったサイト作成「full bloom」

2021年9月20日

2021年9月23日

概要説明

専門学校で教えている中で、毎年2年生に、パララックス効果を使ったサイトの課題を出しています。
自分としても作ってみようと思い、仮のサイトとして母の日をモチーフショッピングサイトのキャンペーンサイトをイメージして制作しました。
作っていたサイトデータをダウンロードできるようにしていますので、HTML・CSSの勉強や、Photoshopデザインの参考として自由にお使いください。

パララックス効果とは

パララックスとは視差効果のことです。
webサイトでこの効果を使う時には、スクロールなどの動作に応じて、
タグのスピードに強弱をつけて動かすことで立体感がでて視差効果を出すことができます。

実際のデモサイト

full bloom

https://fullbloom.herokuapp.com/

このサイトデザインのご利用について

あくまで勉強用としてデザインしたものです。
商用目的のサイトデザインとしてのご利用や、デザインの再配布、一部変更した再配布などはご遠慮ください。

サイトデザインスクリーンショット


Photoshopの素材データ psdファイル

https://drive.google.com/file/d/1J2bG7940c1xWS9B2i5S_3pap1fWPnaGz/view
一部写真データに関しては、素材サイトのものを使っていますので、グレーアウトや差し替えているところがあります。
差し替えてご使用してください。

Github サイトデータ

https://github.com/kamem/fullBloom
数年前に作ったものですので、一部古い情報や、古い作り方の部分があります。

https://github.com/kamem/fullBloom/tree/master/src
srcのなかにhtml,css,jsなどのデータが入っていますので参考にしてください。

最後に

もし良ければ、メッセージなどいただけましたらやる気が出て色々制作意欲が増しますm

かめにOFUSEする

またMentaの教えるサービスをしています。始めたてで安めに設定していますので気になる方がいましたらお声がけください。

Menta

おすすめの本

Javascriptを勉強する際に読んでおくと良いなと思った本たちです。
特にリーダブルコードは綺麗なコードを書く考え方が身に付きます。いまでもその考え方が根付いています。

よくみられてる記事