前の記事 ≪:汎用に使える450のアイコンセット「Nortwood icons」
次の記事 ≫:大きなパノラマ写真をGoogleMap風インタフェースで拡大縮小させられる...

これは新しい、回転する円形のイメージギャラリー実装サンプル

2011年11月28日-はてなブックマーク

スポンサード リンク
[PR] 英単語を忘却曲線アプリを使って超効率よく記憶する方法
Image Gallery Wheel 記事

これは新しい、回転する円形のイメージギャラリー実装サンプル。
divを並べた簡単なマークアップなのに以下のような複雑なレイアウトを作れています(画像ではありません)
svgを使ってマスク処理されていることで画像のマスキングは実現されているようで、更にradiusやrotateなどを使ってアニメーションも実装されています



クリックでアニメーションしながら画像が切り替わります



マークアップは超シンプル



色々と応用することでこういうことができるんですね。

関連エントリ
関連の記事検索:Webデザイン, Web制作, アニメーション, 画像
スポンサード リンク

By.KJ : 2011年11月28日 09:01 livedoor Readerで購読 Twitterに投稿

間違いの指摘をしていただける方はメール、あるいはTwitter/FBでお願いします(クリック)