[JS]最近よく見かける縦長ページ用のさまざまなアニメーションが簡単に実装できるスクリプト -ScrollReveal
デモページ フッタはダイナミックに3Dで表示されます。 ScrollRevealの使い方 Step 1: 外部ファイル 当スクリプトとAni.jsを</body>の上、アニメーション用のスタイルシート「animate.css」をhead内に記述します。 <head> ... <link rel="stylesheet" href="http://cdn.jsdelivr.net/animatecss/3.1.0/animate.css"> </head> <body> ... <script src="anijs-min.js"></script> <script src="helpers/scrollreveal/anijs-helper-scrollreveal-min.js"></script> </body> Step 2: HTML 各要素のアニメーションの設定は、HTMLに記述
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
パララックスサイトを簡単に作成できるjQueryプラグイン8選
twitter facebook hatena google pocket いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollToを駆使しています。 URL：http://ianlunn.co.uk/articles/recreate-nikebetterworld-parallax/ demo：http://ianlunn.co.uk/plugins/jquery-parallax/ #2 JoelBesada/scrollpath GitHub 見えないパスにそってスクロールしていって気持ちいい感じです。 こんな記述が必
レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」:phpspot開発日誌
Cool Kitten: A parallax scrolling responsive framework レスポンシブなパララックス効果付きサイトを作るフレームワーク「CoolKitten」 レスポンシブなフレームワークは多くありますが、更にパララックスなサイトを作る機能も盛り込まれたフレームワーク。 パララックスなサイト作ってみたいけど、スマホでも動かすの面倒、といった場合に使えそうです。 幅を広げた状態。普通にパララックスがかかります 幅を狭めても、レスポンシブでパララックス効果が得られます 関連エントリ パララックス効果を作るスクリプトやプラグインのまとめ レスポンシブなナビゲーションの見本やチュートリアル 複数アニメーションを組み合わせられるスライダーを実装できるjQueryプラグイン「Sequence.js」 これは新しい円形のスライダーが実装できる「Tiny Circles
HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 | DevelopersIO
そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに - パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ○ニー映画で古くから使われていたり、ビデオゲームにおいても横スクロールアクションのゲームなどで昔から使われています。 JavaScript（jQuery）でパララックスエフェクト 1 | スクロール値を取得 どれだけスクロールしたかという値を取得します。これだけではまだパララックスも何もありませんが、全てはここから始まるのです。 $(function() { $(window).scroll(fu
[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax
Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方 「Demo 3」を例に、実装方法を簡単に紹介します。 外部ファイル 「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jarallax-0.2.3b.js"></script> HTML HTML自体は通常通りに実装し、アニメーションのエフェクトを適用するエレメントには参照できるようid, classなどを付けます。 <h1 class="logo">Jarallax</h1> <div class="container" id="slide1"> <h2>見出し：slide
日産NOTE・ユニクロPinterestに学ぶ「ついつい、最後まで見てしまう」ウェブデザインの仕掛け
このサイト、Twitterでは日本国内外のウェブデザイン界隈で話題になっているようで、 「スクロールするという身体的な心地よさ×最後まで見たいという欲求。」 「Nissan’ın Note için tasarladığı inanılmaz internet sitesi」（トルコ語） 「Awesome Web hack」 と、ウェブデザインのプロの目も引くクオリティーだったようです。素晴らしいですね。 スクロール連動のコマ撮り、可能にしたのは「スクロールを操るjavascriptライブラリjquery-mousewheel」 では、このコマ送りスクロールサイトはどのように作られているのか。サイトの裏側を見てみましょう。今回はHTMLファイルの裏側を紹介します。 ページ内の一コマです。 大きく分けて、今回の表現のポイントは2つです。 ・コマ切れにした画像の配置 ・スクロールの制御によるコ
レスポンシブ&パララックス&Webフォントで自社サイトをリニューアル！併せてスマートフォン情報ブログ「SPhere!」もスタート。 | 株式会社インフォバーン
インフォバーンは、自社サイトをリニューアルいたしました。 リニューアルに際しては、コミュニケーション戦略立案、オウンドメディア構築、オウンドメディア運用支援など、インフォバーンのさまざまなソリューションをわかりやすく提示することはもちろん、技術的なパイロットケースとして以下の取り組みを行いました。 ●レスポンシブWebデザイン PC、スマートフォン、タブレットなど、多様なデバイスからのアクセスに対応するためにレスポンシブWebデザインを導入。さまざまな画面サイズへの対応はもちろん、表示スピードの高速化など、細かなチューニングも行っています。 ●パララックス効果 トップページのデザインにパララックス効果を導入。複数のレイヤーを異なるスピードでスクロールさせることで、サイトに奥行き感を生み出しています。 ●Webフォント／Webフォントアイコン 見出しと、背景のテキストには、Webフォントを使
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TH!NK TOKYO
Loading...