CSS3を使った超カッコいいナビゲーション付きスライドショー実装例
2011年10月18日-
スポンサード リンク
Circle Navigation Effect with CSS3 | Codrops
CSS3を使った超カッコいいナビゲーション付きスライドショー実装例
スライドショーというよりかは、ナビゲーションがポイントなんですが、画像の下部に円形でアニメーションしながら次の画像を表示出来るなんていうナビゲーション付きです。
そもそもの写真もカッコいいのですが、ナビゲーションの動き具合がなかなかのセンスを感じます。

プログラムのダウンロードも可能なので、これは機会があれば是非使ってみたいと思ってしまいました。
仕組みとしてはborder-radiusを大きくして円形にしつつアニメーションをかましてるという具合のようです。
このテクニックは色々応用できそうですね
関連エントリ
CSS3を使った超カッコいいナビゲーション付きスライドショー実装例
スライドショーというよりかは、ナビゲーションがポイントなんですが、画像の下部に円形でアニメーションしながら次の画像を表示出来るなんていうナビゲーション付きです。
そもそもの写真もカッコいいのですが、ナビゲーションの動き具合がなかなかのセンスを感じます。

プログラムのダウンロードも可能なので、これは機会があれば是非使ってみたいと思ってしまいました。
仕組みとしてはborder-radiusを大きくして円形にしつつアニメーションをかましてるという具合のようです。
このテクニックは色々応用できそうですね
関連エントリ
スポンサード リンク
Advertisements
SITE PROFILE
最新のブログ記事(新着順)
- iPhone, iPad, Mac, Android などのフリーのベクターモックアップ
- macOS用の使いやすいカラーピッカー「pika」
- CSSでボタンにサイバーパンク効果を与えるサンプル
- カラフルな球体をWEB上でうごかすThree.jsをつかったサンプル
- ダークモード対応のミニマルなHTMLページを作れるCSS「spcss」
- CSSのみで実現できるローディングアニメーションやエフェクト集「Css Effects」
- スムーズに横スクロールするレイアウトサンプル
- 斬新なページメニューが作れる「Inline Menu Layout with Gallery Panel」
- 世界中で今何時を計算できる「Spacetime」
- シンプルなタブUIを実現できる「Skeletabs」
- 過去のエントリ