タグ

JSとwebデザインに関するburavo46のブックマーク (1)

  • [JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー

    jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla

    buravo46
    buravo46 2012/04/13
    要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
  • 1