可変式MVアニメーション･Swiper スライダー 実装
見出しが縦書き、横書きに可変するスライダーアニメーション。スマホ対応。
See the Pen Untitled by kens yokota (@mailpt05) on CodePen.
目次
メインビジュアルをSwiperで実装する方法
トップページを印象的に見せるために、多くのサイトでは「メインビジュアル（MV）」にスライダーを設置するよ。今回のコードは、Swiper.jsを利用して横書き・縦書きのタイトルを組み合わせたスライダーを実装した例。レスポンシブ対応も含めて、PCとスマホの両方で最適な表示ができるようになっているよ。
CSSでスライダーのレイアウトを整える
まず、.mv クラスでメインビジュアル全体の高さを指定し、内部の .swiper と .swiper-slide でスライドを全画面表示できるようにしているんだけど、
特に注目すべきは、object-fit: cover; を使って画像を枠いっぱいに表示している点だね。
これで、どんな比率の画像でもきれいにトリミングされ、デザインが崩れないんだよ。
また、768px以下の画面幅では高さを 80vh に変更しており、スマホ表示でも自然な比率を保てるように工夫しているよ。
テキストアニメーションの工夫
.slide-caption では、テキストをスライド上にオーバーレイ表示している。
最初は 不透明度0 & 左にオフセット された状態から始まり、アクティブスライドになるとふわっと表示される仕組みだよ。
opacity: 0;
transform: translateX(-50px);
transition: opacity 0.6s ease-out, transform 1.2s ease-out;
という指定が、スライド切り替え時の自然なアニメーションを作っている。
横書きと縦書きを組み合わせる
今回のユニークなポイントは、タイトル部分を「横書き」「縦書き」で使い分けている点。
.caption-main… メインタイトル（大きく横書き表示）.tategaki… 左側に縦書き配置.tategaki02… 右側に縦書き配置
縦書きには writing-mode: vertical-rl; を使ってるよ。
これで、日本語サイトに多い 「片側に縦書きタイトルを配置するデザイン」 を実現！
スマホ対応のレスポンシブ調整
スマホ表示ではレイアウトが大きく変わるんだ。
- テキストのフォントサイズを小さめに調整
- 縦書き部分は
marginを切り替えて、両サイドに配置 - サブタイトルも改行しやすいように
line-heightを調整
特に 「.tategaki02」のサブタイトルは、スマホ用に 左右に広がるよう配置 してて、PCと異なる印象を演出しているよ。
Swiperの設定
JavaScript側では、以下を設定。
loop: true… 無限ループで繰り返し表示autoplay.delay: 5000… 5秒ごとに切り替えeffect: 'fade'… フェード効果で切り替えspeed: 600… 切り替え速度0.6秒
この設定で、ゆったりした雰囲気のフェードスライダーが完成。
実装まとめ
今回のコードは、
- Swiperで作るメインビジュアル
- 横書き＋縦書きのタイトル配置
- PC/スマホで異なるレスポンシブ対応
- アニメーションで滑らかな切り替え
といった要素を組み合わせた、実用的でデザイン性の高いスライダー実装例。
Web制作の現場でも、マンションサイト・ブランドサイト・イベント告知ページなどで応用できる構成になっているよ。