複数枚のスライドを階段状に表示するスライドショーのご紹介

IC
DESIGNER

今回は、複数枚のスライドを階段状に表示するスライドショーをご紹介します。

ありきたりなWebデザインに飽き飽きしている方は、本記事でご提案するエモーショナルなスライドショーの導入をぜひ検討してください。

階段状スライドショー(Diagonal Slideshow)の概要

スライドGIF

スライドショーの中身について解説していきます。

選択中のスライドが画面の中央に位置し、ひとつ前のスライドが画面の左上隅に、ひとつ後のスライドが画面の右下隅に表示されるレイアウトです。画面全体で見ると、階段のように斜めに表示されています。

別のスライドを選択したいときは、左右に表示されている当該スライドをクリックしましょう。

選択中の中央のスライドをクリックすると、画面左にグラフィックスが移動し、画面右にテキストコンテンツが表示されます(スマホの場合、背景にグラフィックスが、前面にテキストコンテンツが表示されます)。

この階段状スライドで使用しているアニメーションツールは『TweenMax』です。アニメーションは最新のCSSプロパティを使用しています。古いブラウザではサポートされない可能性があるのでご注意ください。

3つのスライド

▲3枚のスライドが表示されたスライドショー

フォーカス

▲スライドをクリックして開いてみると、フルスクリーンで表示される

まとめ

いかがでしたか?

このスライドショーが気に入った人は、ぜひ使ってみてくださいね。

(著者:Mary Lou 翻訳:Annie)

 

こちらもおすすめ!▼

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
デザイナー副業案件
Workship