※Web開発javascriptデザイン

写真を縦スライスしたphoto演出

job_illustrator_pc_woman-e ※Web開発
Sliding Image Panels with CSS3 | Codrops
Today we'll show you how to create some neat sliding image panels with CSS only. The idea is to use background images fo

sliding-imageCodrops/上記アニメーションの作り方
ユニークな Web デザインを次々とリリースする Codrops で公開されている CSS アニメーション例です。1 枚の写真を 4 分割し、CSS animation の slideOutUp や transition の opacity ease-in-out などが与えられています。

デモの写真は、幅 600 px なので 150 px ずつに 4 等分区切って、nth-child() セレクターで要素指定されています。様々なプロパティが使われているので、CSS 初心者にとっては良い教材になるのではないでしょうか。

これ全部CSS!?驚くほど自由自在なCSSアニメーション20選
CSSアニメーションは、Webデザインの可能性を大きく広げてくれるテクニックです。HTML と CSS の基礎知識があれば誰でも簡単に実装でき、PC でもスマホでも CSS アニメーションを楽しむことができます。
タイトルとURLをコピーしました