本作品は、JavaScript・CSSアニメーション・Swiperを活用した動きのあるWebページです。

スクロールに応じて各セクションがふわっと表示されるように設計されており、閲覧者にストレスなく自然な動線でコンテンツを届けることを目指しました。

テキストアニメーションは一文字ずつ時間差で表示される仕様とし、印象的なファーストビューを演出しています。また、Swiperライブラリによる自動スライド機能を導入し、レスポンシブ対応で画面幅に応じてスライド枚数が変化するようにしています。

使用スキル

・HTML/CSS/JavaScript

・Swiper.js（スライダーライブラリ）

・メディアクエリを用いたレスポンシブな挙動調整

主な実装機能

・スクロールに応じたセクションアニメーション

・ファーストビューでの一文字ずつのテキストアニメーション

・Swiperによる自動スライド

・ヘッダー固定表示処理