WEMO | コピペで終わらない、本質的な理解を目指した知識整理のメモをお届け。
jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや？コードの意味を読み解い...
Parallax-Scroll by Aen
Parallax-Scroll is a jQuery plugin to create elements with background images that behaves as if their background-attachment property is between scroll and fixed, similar to the parallax scrolling effect you see on Spotify and is loosely based on Peder Andreas Nielsen’s Parallax ImageScroll. It makes clever use of background-position and background-size properties instead of CSS3 tranforms. It runs
Demos
Demos of jQuery Lazy Load XT plugin Lazy Load XT is a jQuery plugin for images, videos and other media.
Lazyload Images
Images will be loaded when they show in the screen. Scroll down to see the effect. HTML <div class="lazyload batman" > <!-- <img src="images/batman.png" class="batman" /> --> </div> JavaScript function load(img) { img.fadeOut(0, function() { img.fadeIn(1000); }); } $('.lazyload').lazyload({load: load}); Batman is a fictional character, a comic book superhero appearing in comic books published by D
[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor
指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: second Parallaxorの使い方 Step 1: 外部ファイル 当スタイルシート・スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <link href="parallaxor.min.css" rel="stylesheet"> </head> <body> ... コンテンツ ... <script src="http://code.jquery.com
![[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor](https://cdn-ak-scissors.b.st-hatena.com/image/square/d9ead73de963a2e762fa0becb8a28dab2b49e44e/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015011904.png)
アニメーションを実装するなら知っておきたい「requestAnimationFrame」の使い方 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、フロントエンドエンジニアのおじいちゃんです。 今回はパフォーマンスを意識したアニメーションを実装できる「requestAnimationFrame」について書きたいと思います。 requestAnimationFrameとは requestAnimationFrameは、アニメーション実装時など、再描画が頻繁に行われる処理に使えるメソッドになります。 window.requestAnimationFrame() メソッドは、ブラウザに描画させたいアニメーションを指定し、次の再描画の前に、アニメーションを更新する指定した関数を呼び出すように要求します。このメソッドは再描画する前に呼び出されるコールバックメソッドを引数にひとつとります。 引用元：MDN setTimeoutやsetIntevalと比較されることが多いですが、主に以下のような違いがあります。 requestAnima
ScrollMagicを使ってスクロールに応じたアニメーションをさせてみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、CTOのづやです。 サイトを作っていると「スクロールに応じて何かをさせたい」なんてことをよく思ったりするのではないでしょうか。 0から書いてもいいのですが、簡単にできたら、というときのためのプラグイン「ScrollMagic」を試してみました。 こんな例のような動きがつけられちゃうらしいので、早速紹介していきます。 使うための準備 まずはこちらのGitHubから。 ScrollMagicはjQuery PluginなのでjQueryが必須なのはもちろん、TweenMaxといったライブラリも必要になります。 読み込むときには当然それらも必要になりますので、↓のような感じで準備しましょう。 <script src="js/TweenMax.min.js"></script> <script src="js/jquery.min.js"></script> <script src="
リサイズ $(window).resize が終了した時点で実行 | Web Design Leaves
リサイズのイベントは多数発生するので、リサイズが終了した時点である処理を実行する場合の方法のメモ。（「[jQuery] ウインドウのリサイズ操作が終わった時にだけ処理を実行する」を参考にさせていただきました。） setTimeout()メソッド このメソッドに関数と時間（ミリ秒）を指定すると、指定した時間が経過したときに、指定した関数が実行される。 また setTimeout() の戻り値（タイマーID：整数）を claerTimeout() に渡すと関数の実行が取り消される。
[JS]縦長のスクロールページに使いたい便利なスクリプト -isInViewport.js
Demo: Basic div要素が縦に並べてあるだけのページで、最初は背景のカラーが全てグレーです。スクロールするとビューポート内にある2番目のdivのみ明るいグレーになります。 アドバンスではビューポートを上から100px狭く設定し、適用しています。 ※ベーシックにもスクロールするとこの機能が発動します。 Demo: Advanced isInViewport.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトをhead内に外部ファイルとして記述します。 <head> ... <script src="jquery.min.js"></script> <script src="isInViewport.min.js"></script> </head> Step 2: HTML HTMLは特に意識する必要はありません、通常通り実装します。 <div> ...
簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス
ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScrollの使い方 Step 1: 外部ファイル </body>の上あたりに、jquery.jsと当スクリプトを外部ファイルとして記述します。 <body> ... コンテンツ ... <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="../jquery.imageScroll.js"></script> </body> Step2: HTML
[JS]縦長1ページのスクロール時にさまざまなインタラクションを加えるスクリプト -ScrollStory
ティザーサイトやプロダクトページ、ポートフォリオ、企業サイトなどにも多く採用されているスクロールを前提とした縦長のページにさまざまなインタラクションを加えることができるjQueryのプラグインを紹介します。 Scroll Storyの名の通り、スクロールするごとにさまざまなストーリーを与えることができます。 ScrollStory -GitHub ScrollStoryの特長 ScrollStoryのデモ ScrollStoryの使い方 ScrollStoryの特長 ScrollStoryは、スクロールベースのページとインタラクションをシンプルな実装で作成できます。 スタイルにとらわれない、自由なスクロールベースのページを作成可能。 既存コンテンツの流用だけでなく、新たにオブジェクトを配列で生成することにも対応。 jQuery UIの16種類のイベント・コールバックが利用できます。 アクテ
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
[JS]ヘッダをスクロールに合わせて表示・非表示する1ランク便利なスクリプト -Headroom.js
スクロールベースのページを実装する時にぴったり！ ヘッダをユーザーのスクロール操作に合わせて表示・非表示するスクリプトを紹介します。スクロールのダウン・アップでclassを付与するので、ヘッダに限らず他にもいろいろと使えそうです。 スクリプトは単体で動作しますが、jQuery/ZeptoやAngularJSのプラグインとしても動作します。 Headroom.js 下にスクロールすると、ヘッダが上部に吸い込まれます。 一旦消えたヘッダは、上にスクロールするとどのポジションからでも表示されます。 この「どのポジションからでも」というのがこのスクリプトの便利なところです。 スクリプトにはさまざまなオプションが用意されており、デモページで楽しめます。 デザインは似ていますが、こちらは「Playroom」です。 デモページ ヘッダの非表示・表示のタイミングが細かく設定でき、アニメーションのエフェクト
Web Designing
INTRODUCTION＿スクロール駆動型サイトが定着した理由 Row to The Pole Manufacture d'Essai lamoulade 360°Langstrasse Zurich aguije 三村仁司｜現代の名工 LAMDASH DNA The Twelve デジタルガレージ オキナワーズ 三人展「片想い」 解説事例 オキナワーズ W's Company Fillet Digital Agency Coiney Tria （株）リクサス DIVERSE SYSTEM - JAPAN BEYOND BY LEXUS Magazine 琉Q - ルキュー Daniel Eckler COLUMN01＿ギャラリーサイトに見る「シングルページサイト」の傾向 One Page Mania One Page Love siteInspire AWWWARDS CSS DESIG
[JS]スクロールして次に表示するコンテンツを引っ張り上げるように表示するスクリプト -pullupScroll
スマフォやタブレットのアプリでよく見かける、次に表示するコンテンツを引っ張り上げるように少しだけ遅らせて表示するjQueryのプラグインを紹介します。 こういうちょっとしたエフェクトって、楽しいですね。 デモページ デモの動きだけでなく、左上のアイコンに3種類のエフェクトが仕込まれていて、面白いです。 pullupScrollの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/equal-height-columns.js"></script> Step 2: HTML 引っ張り上げる各エレメントにclassを付与し、それらを内包する
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
jQueryで処理されるタイミング 【div箱の高さが取得できない！の原因１】
Lazy-loading Google Maps by Osvaldas Valutis
Website Qwanturank.live
Home - Designzzz
skrollr - parallax scrolling for the masses