[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル
ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモページをスクロールしたとこ パララックスの構造の可視化は、左上の「Debug」をチェックします。 パララックスの実装 Step 1: HTML divなどで各レイヤーを配置します。 <div class="parallax"> <div class="parallax__group"> <div class="parallax__layer parallax__layer--back"> ... </div> <div class="parallax__layer parallax__layer--base"> ... </div> </div> <div class="parallax__group"> ..
![[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル](https://cdn-ak-scissors.b.st-hatena.com/image/square/9a7f8ebcbac962aaeb8aafa79af88e7fa1ccc7c0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201403%2F2014082002.gif)
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
25 free, scrolling plugins for awesome experiences
[“ The art of creating a website these days is learning how to create an online experience. Many of these experiences are extensions of a brand or person and are relayed via different colors, fonts, etc. Thanks to awesome advancements in technologies, we can do a lot of stuff with our websites that we couldn’t do a few years ago. We are taking the experience from dry and drab to fun and fab.<\/p>\
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
【jQuery】要素が見えたタイミングでイベントを発生させるjQueryプラグイン | バシャログ。
はじめまして、今月よりバシャログのメンバーになったfukasawaと申します。 まだまだ勉強中で至らぬ点も多々あるとは存じますが、生温く見守っていただけると幸いです。 本題です。社内で行われているjQuery勉強会のネタ探しのためにWeb DesigningのjQuery Lab.を読んでいたのですが、記事の中でinviewというjQueryプラグインが使われていました。 記事では「グラフを描画する領域がブラウザの表示領域内に入ったタイミングで、アニメーションを実行しグラフを描画する」という動作を行うためにこのプラグインが使われているのですが、inviewを使うことで、このように「ブラウザ上で見えたときに処理を実行する」という動作を実現できるようです。 jquery.inview 気になったので使い方を調べてみました。 簡単な使い方 1. jQueryとjquery.inview.jsを読
jarallax.jsの使い方解説
こんにちは、デザイナーのサリーです。 JSを書けない私が、いろいろとパララックスのJSを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。 使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ箇所があったので、覚え書きの意味も兼ねて、今回はjarallax.jsの使い方を解説します。 （注：スマホやタブレットでは上手く動きませんので、PCでご覧ください。詳しくはこちら「パララックスサイトをつくるときにディレクターが気をつけるべき4つのこと」をどうぞ。） jarallax.jsとは？ パララックスの動きが実装できるJSです。その名の通りjQueryを使用します。 公式ページはこちら： http://www.jarallax.com/ HTML <!DOCTYPE html> <html lang="ja" dir="ltr"> <hea
パララックス効果を作ってみよう | Web技術の最新情報、お役立ちTips等をお届け クリエイターのためのWebテク講座 | 特集 | 人材紹介 | マイナビクリエイター
第17回パララックス効果を作ってみよう 最近よく見るようになった、奥行感を演出するスクロール。いわゆるパララックスと呼ばれる演出効果。 もちろんこれもJavaScriptを使って実装されています。 サンプルを見る 奥行を理解する。 パララックスを理解するには、2D空間における奥行感を理解する必要があります。 下の図を見てください。 これが奥行感を演出する際の鉄則です。 皆さんも、空を眺めたとき、飛行機がゆっくり空を飛んでいるのを見たことがあるはずです。 でも、普通に考えて、飛行機があんなにゆっくり飛んでるはずはありません。 そう、遠くにあるものはゆっくり動いて見えるのです。 そのあたりの理屈は、遠近法と同じですね。同じ10メートルでも、目の前の10メートルと1キロ先の10メートルでは視認できる大きさが違います。 もう一つ例を挙げると、空を浮かぶ雲を見たときに、速い雲と遅い雲がある
クリエイターのためのWebテク講座 -パララックスで横移動
前回のパララックスを応用して、横移動を実装してみましょう。 サンプルを見る こちらのサンプルでは、スクロールすると、スクロールの位置と連動して、横からボックスが出てきます。今回は、最近流行のパララックスの応用について解説します。 縦の移動量を横の移動量に。 jQueryを使って、パララックスのサイトを作る際に肝になるのは、scrollTopの値です。 簡単に説明すると、 ■scrollTopの値がある位置にきたら横移動を開始。 ■横移動には、scrollTopの値を使う。 この2つの処理が実現できれば、パララックスにおける横移動が実装できます。 では、どのように実装するのか、コード解説していきましょう。 <style> #wrap { position:relative; width:900px; overflow:hidden; } #info { position:fixed; top
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://fixedagency.com/