百貨店のキャンペーンサイト制作のコーディング支援をさせていただきました。

お得意様だけに招待があるキャンペーンを、店舗でタブレットを利用して直接お客様にご案内するようで、タブレットとスマートフォンをメインとしたWebサイトになります。

制作環境について

制作期間

約1.5ヶ月

担当

フロントエンドコーディング

主な言語・ツール・サービス

• html（Pug）
• CSS（Sass）
• Javascript

コメント

キャンペーンサイトということで、演出を多く取り入れた制作になりました。

最初に表示されるウェルカム画面ではVimeo APIを利用した動画を流し、演出のSKIPボタンを押すとトップページの背景にウェルカム画面の動画の続きが背景として表示されます。

ファーストビューはタップ感知でその下のコンテンツが斜めに迫り上がるように出現する演出なのですが、ファーストビューにかけたマスクの値を変化させて表現しました。

他にもスクロールアニメーションでタイトルとギャラリーが表示され、表示後に文字を1文字ずつ回転させたりと特別なキャンペーンに相応しいリッチな演出に仕上がりました。