Kontext

JavaScript

iOSの画面切り替えのようなスライドができるJavaScript「Kontext」

KontextというJavaScriptを使えばiOSの画面切り替えのようなエフェクトのスライド機能を実装することができます。CSSのトランスフォームとアニメーションを活用した3Dの動きがすごくいい感じですね。ダイナミックに画面をスライドで切り替えたい時に役立ちそうです。

[ads_center]

Kontext

Kontext

Kontext

デモをPCで閲覧した場合、下部にあるドットナビゲーションの他に、キーボードの矢印キーでもスライドを切り替えることができます。

iPhoneのように立体的に画面が切り替わっていくので、3Dのスライダーを実装したい時に覚えておきたいJSですね。

jQueryなどを使わなくても実装できる辺りがいいと思います。

関連記事

  1. jQuery.mousetip

    JavaScript

    マウスの動きや位置に追従してくるツールチップを実装できる「jQuery.mousetip」

    jQuery.mousetipはマウスの動きや位置に追従してくる軽量の…

  2. Images grid

    JavaScript

    画像のグリッドレイアウトを製作できるjQueryプラグイン「Images grid」

    Images gridは画像のグリッドレイアウトを製作するためのシンプ…

  3. FlexNav

    JavaScript

    見た目もシンプルでレスポンシブ対応のナビゲーションメニューを実装できるjQueryプラグイン「Fle…

    シンプルなデザインでレスポンシブにも対応したナビゲーションメニューを実…

  4. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryの基本的なanimateメソッドを使って適当に遊んでみる

    jQueryのanimateメソッドを使えば自分で好きなようにアニメー…

  5. ARIA TOOLTIP

    JavaScript

    WAI ARIAを活用したユーザーフレンドリーなツールチップ実装「ARIA TOOLTIP」

    ARIA TOOLTIPはWAI ARIAを活用したユーザーフレンドリ…

  6. Granim.js

    JavaScript

    流れるように変化するグラデーションのアニメーションを実装できる「Granim.js」

    Granim.jsは美しく変化するグラデーションのアニメーションを実装…

最近の記事

  1. mill オイルヒーター
  2. Anker PowerWave 10 Pad & Stand セット

アーカイブ

PAGE TOP