パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends
Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで、依存関係など意識せずに利用することができます。 パララックス（Parallax）とは、英語で「視差」という意味で、Webサイトにおけるパララックスはスクロールなどの動きに合わせて要素が動くスピードをずらしたり、異なる動きを加える演出のことを指します。 数年前に大きく流行し、現在ではWebサイトの定番テクニックの1つとして定着しています。 パララックスをWebサイトに取り入れることによって、デザインに立体感や奥行きを生み出すことができ、また一味違った雰囲気のデザインを作
paroller.js
paroller.js paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements. You can use it on elements with background property or on any other element. While scrolling elements can move: vertical, horizontal. Manipulated through html data-* attributes or jQuery options. Mobile ready. Easy to use. GitHub Download | Previous versions Before closing </body> el
手軽に使える、スクロールに応じて動作するパララックス系スクリプト・「paroller.js」
paroller.jsは手軽に導入できるパララックススクリプトです。jqueryに依存します。スクリプトを読みこんで設定、対象の要素に指定されたカスタムデータ属性を付与するだけと、楽に導入できるのが魅力です。この手のは沢山あるのでお好みで。ライセンスはMIT。 paroller.js
JavaScriptコードは1行のみ！超手軽にWebサイトでパララックス効果を実現できる「Rellax.js」使ってみた - paiza開発日誌
どうも、まさとらん（@0310lan）です。 みなさんは、自分のWebサイトに「パララックス効果」を取り入れたいと考えたことはありませんか？ 「なんだか難しそう…」とか、「実装が面倒くさい…」のようなイメージをもし持っているのであれば、今回ご紹介するJavaScriptライブラリが一発解消してくれますよ！ 【 Rellax.js 】 今回のテーマである「パララックス（視差効果）」がどんなモノであるかは、「Rellax.js」の公式サイトを見ると分かりやすいです。 このように画面を上下に動かす際に、複数のHTML要素が異なるスピードでアニメーションすることで、Webページが立体的になって印象に残りやすいサイトになります。 「Rellax.js」は、このような「パララックス効果」を可能な限り簡単に書けるようにしてくれるJavaScriptライブラリというわけです！（ちなみに、「ver1.0」か
[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ
縦長のランディングページなどで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。 プロダクトやサービスを魅せるスクリプト、さりげないけど気持ちいいアニメーション、縦長ページならではのナビゲーション、レイアウト補助など、全コンテンツを1ページにおさめ、スクロールを前提にしたページならではの面白くて役立つスクリプトが満載です。
![[JS]縦長ページに面白い仕掛けや便利な機能を実装できるスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/12d806b696946054b69c1dc3670ffa2dc1985773/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201503%2F2015112505.png)
数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス
実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要素を加え、あとのコンテンツは普通に実装します。 <div class="background"></div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1> <h2 class="pageSubTitle">見出しLv2</h2> <p>パラグラフ</p> <p>パラグラフ</p> <p>パラグラフ</p> </div> <div class="slogan"> <h2 class="sloganTitle"> Parallax scrolling </h2> </div> <div class="wrapper"> <h1 class="pageTitle">見出しLv1</h1>
Yahoo! JAPAN Creative Blog — ヤフオク!がパララックスを使った理由
こんにちは、ヤフオク!制作部のYです。 今回はヤフオク!販促ページのパララックスについて、いくつかの事例を交えつつ紹介したいと思います。 パララックスとはパララックス (parallax)とは言葉で説明しようとすると難しいのですが、視差（しさ）の事です。 ウェブでも「重ねられた要素（レイヤー）をスクロールに伴い、異なる速度で移動させる事で視差効果を生み出し、奥行きを表現する」という パララックスデザインが2012年から爆発的に流行りました。 そろそろブームも終わりかな、と思いきや、iphone5s、iphone5cのサイトも典型的なパララックスですし、 他のサイトでも、全体のクオリティが高く、コストをかけてると思われるサイトでパララックスを採用しているところがいまだにとても多いのです。 ちなみにiOS7の壁紙でもパララックスが採用されています。 ヤフオク!14周年の事例（2013年9月リリ
スタイルシートで実装するパララックススクロール | コリス
パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 実装方法を簡単に紹介します。 HTML デモのHTMLをシンプルにするとこんな感じになります。 各スライドはdivで配置し、それぞれclassにslideを、idで個別の名称を付与します。 <div id="title" class="slide header"> <h1>Pure CSS Parallax</h1> </div> <div id="slide1" class="slide"> <div class="title"> <h1>Slide 1</h1> <p>パラグラフ パラグラフ</p> </div> </div> <div id="slide2" class="slide"> <div class="title"> <h1>Slide 2</h1
parallax.js
WOW, that's deep man! parallax.js reacts to the orientation of your smart device, offsetting layers depending on their depth within a scene... Oh, you don't have a smart device? No worries, if no gyroscope or motion detection hardware is available, parallax.js uses the position of your cursor instead. Radical. This project is a collaboration between Matthew Wagerfield & Claudio Guglieri.
ナイキ、アディダス、グーグルも採用！人気のデザイン表現“パララックス効果”の仕組み
ナイキやアディダス、グーグルなど先進的なデジタルキャンペーンで知られる企業が先んじてウェブサイトに取り入れている表現手法があります。それが“パララックス効果”です。まずは、その効果を体験いただければと思います。 パララックス効果の名を世に知らしめた「NIKE BETTER WORLD」 このウェブサイトの役割は、ナイキのCSR活動を広くPRすること。米広告代理店「Wieden+Kennedy」や、デザインディレクターIan Coyle氏らが製作を手がけており、サイトでは環境負荷が小さくなるよう開発されたThe Free TR Fit、100%リサイクルされているシューズボックスなどが紹介されています。 人間の視点をずらすことで、奥行きを感じさせる 先ほどのNIKE BETTER WORLD、サイトに“奥行き”を感じませんでしたか？3D技術を使っているわけでもないのに、平面であるはずのウェブ
WEBのあれやこれや...他力本願メモBlog — パララックス効果を用いたコンテンツを作りたい！
基本、Web系の記事メモです。内容は他力本願ですいません。綺麗にカテゴリとかまとめる気はないです。アーカイブから見た方が見やすいかも〜w パララックス効果を用いたコンテンツを作りたい！ パララックス効果を用いたページが流行って（？）ますよね。 作ってみたいと思ったので色々探ったページをメモ 【まずはデザイン（見た目）の参考】 Nike Better World http://www.nikebetterworld.jp/ ACTIVATE http://activatedrinks.com/#/activate Manufacture d’Essai http://www.manufacturedessai.it/it/ iutopi - Creative Land / Branding, Graphic & Web Design | | | | | | | Mauro Macch
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
日本電子専門学校 Webデザイン科 卒業・進級制作展 CONNECT 2018