【続・続・続】ウェブページ制作珍道中…『パララックスを使ってみた』

ウェブ制作のスキルを上げるべく、時間を見つけて何かしらのメソッドを身につけています。

コーディングしながら、メモをとる…の繰り返しで、まだまだ未知数の部分や理解できていない部分もあったり、こんなに大変なのかと日々痛感しております。

ネットでウェブページ制作についていろいろ調べていて「パララックス」という手法があることを知り、早速取り入れてみました。

「パララックス」とは「視差」を意味する用語で、画像に奥行きを出したりして効果を出すことをいいます。

というわけで、試行錯誤しながら作ってみたのが「架空の温泉旅館」のサイトです。

あいにく、ココナラブログは直リンできないので、動画にしたものを載せておきます。

PC版では、背景画像を固定しつつも、要素はきちんとスクロールするように作りました。そして、テキストやボタンなどは下からふわっとフェードインするアニメーションを加えてみました。

PC版（スクロールがカクカクしてます^^;）

スマホ版

…というわけで、これについてもHTMLやCSS、JQueryなどの文章を記載していきますが、階層違いでボタンが機能しなかったり、レイアウトが崩壊するなど、予想外の出来事が起きましたが、とことん原因を突き詰めれば解決するものだと勉強になったのでした。