「トランジション採用」でフリーランスの正社員転換を支援 他
- 隔週月曜更新!フリーランス・副業ニュース
今回は、複数枚のスライドを階段状に表示するスライドショーをご紹介します。
ありきたりなWebデザインに飽き飽きしている方は、本記事でご提案するエモーショナルなスライドショーの導入をぜひ検討してください。
スライドショーの中身について解説していきます。
選択中のスライドが画面の中央に位置し、ひとつ前のスライドが画面の左上隅に、ひとつ後のスライドが画面の右下隅に表示されるレイアウトです。画面全体で見ると、階段のように斜めに表示されています。
別のスライドを選択したいときは、左右に表示されている当該スライドをクリックしましょう。
選択中の中央のスライドをクリックすると、画面左にグラフィックスが移動し、画面右にテキストコンテンツが表示されます(スマホの場合、背景にグラフィックスが、前面にテキストコンテンツが表示されます)。
この階段状スライドで使用しているアニメーションツールは『TweenMax』です。アニメーションは最新のCSSプロパティを使用しています。古いブラウザではサポートされない可能性があるのでご注意ください。
▲3枚のスライドが表示されたスライドショー
▲スライドをクリックして開いてみると、フルスクリーンで表示される
いかがでしたか?
このスライドショーが気に入った人は、ぜひ使ってみてくださいね。
(著者:Mary Lou 翻訳:Annie)
こちらもおすすめ!▼
スライドアウトボックスメニューという新しいアプローチのご紹介
Workship MAGAZINE