パララックスエフェクトの基本
Sample #1 | スクロール値を取得してみる パララックスエフェクトは、ページのスクロール値を元にして、さまざまな要素を動かしていくというのが基本的な仕組みです。 ということで、まずは手始めにどれだけスクロールしたかという値を取得して、画面に表示させてみましょう。この時点では、まだパララックスも何もありませんが、すべてはここから始まるのです。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Get scroll value | Learning Parallax effect</title> <link rel="stylesheet" href="css/getScrollValue.css"> </head> <body> <h1>スクロール値を取得</h1> <p class="indicator">スクロ
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」
パララックスというか、スクロールでアニメーションさせるjQueryプラグイン「ScrollTween.js」 こんにちは、鴨田です。 今年に入ってから、パララックス効果を用いたサイトをよく見かけますね。 春くらいに話題になって、定番のプラグインもあるので、最近もいろいろなところで見かけます。 とはいえ、最近は視差効果で奥行きを表現するというよりも、 単純にスクロールに連動してアニメーションさせることも含めて、 パララックスサイトと呼んでいるが多いのではとも思います。 何かと話題のスマホアプリ「comm」の紹介ページもそうですね。 そんな流行に従って、パララックスサイトの作り方を少しご紹介できればと思います。 今回ご紹介するのは、「ScrollTween.js」というプラグインです。 シーエーモバイル社のコーポレートサイトを作成するために開発され、 せっかくだからということで、公開されている
いずれ使用してみたいパララックス及びスクロール効果プラグイン | ECサイト｜システム開発会社｜スターフィールド
最近ちょくちょくみかける パララックス効果や、スクロールの効果のプラグインを紹介します。 jQuery Scroll Path パスを設定し、そのパスに沿って動かせるというもの。 今までのスクロールとは奇想天外な動きをするので、ちょっとびっくりします。 ランディングページとかに利用するとインパクト与えられるかも。 DEMO DOWNLOAD Curtain.js コンテンツがするすると切り替わるプラグイン。 紙芝居みたいですね。 こちらは、以前実際に試したものがありますので、そちらをご覧下さい。 使用方法等も記載しています。 カーテン、というかシャッター？みたいにページが切り替わるJS jQuery-Parallax 背景画像とコンテンツのスクロールした時の速度をずらし、インパクトとユニークさを感じることができます。 Nikeのサイトでも使用されたみたいですね。 DEMO DOWNLO
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
