パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js
ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax.jsの特徴 simpleParallax.jsのデモ simpleParallax.jsの使い方 simpleParallax.jsの特徴 simpleParallax.jsは、<img>で実装された画像にパララックスアニメーションを追加する、非常にシンプルで軽量なバニラJavaScriptのライブラリです。
simpleParallax.js - a JavaScript library for parallax effects
orientation-String-see exampleThis is the orientation (or direction) of the parallax effect. Choose up and when scrolling down, the image will translate from the bottom to the top (so the image will translate up). When scrolling up, the image will translate from the top to the bottom. Same logic apply for all others orientations (right, down, left, up left, up right, down left or down right). When
WEBLIFE（ウェブライフ）｜Shopify構築・運用支援やCMSを中心としたSaaS事業および映像/Web制作ディレクション
Shopifyを利用したECの構築・アプリ開発や、高セキュリティのホスティングサーバーを内包したCMSを提供。数多くの実績をベースとした運用支援やECのプランニングなど、進化し続けるWebに最適なソリューションを提案します。
Locomotive Scroll - マルチプラットフォームで動作するパララックス・エフェクトライブラリ MOONGIFT
パララックス・エフェクトを使うと、インパクトのある表現が実現します。Webページは縦長のサイトが多いので、スクロールで見た目のインパクトが与えられればユーザの目を引きつけられるでしょう。 今回紹介するLocomotive Scrollはパララックス・エフェクトとDOMの表示されるタイミングを合わせたスクロールライブラリです。 Locomotive Scrollの使い方 デモです。表示される時のアニメーションもいい感じです。 細かくパララックス・エフェクトが適用されています。 表示されたタイミングで文字が動き出しています。 Locomotive Scrollはviewportもサポートされているので、マルチプラットフォームで動作します。スクロールに伴うアニメーションもスムーズです。使いこなすのはデザインも考えないといけないので大変そうですが、パララックス・エフェクトを実装する際に役立つことで
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方
パララックス効果を与えるとても簡単なJavaScriptライブラリ「simpleParallax.js」の使い方 パララックス効果は数年前にトレンドとなって、いまでもWebデザインの表現に欠かせない要素のひとつであるが、しかしその表現はさまざまで、複雑さを増している印象がある。 そんな影響を受けてかパララックスライブラリも高機能になっていき、使いにくい状況になってしまっている。さらにサイト設計に関わるJavaScriptフレームワーク(ライブラリ)との依存性も考えなければならない。 そのような訳で、パララックスの実装に苦手意識をもっていないだろうか？できれば、「パララックス効果を含んだデザインを入稿しないでね」って具合に。 でも大丈夫。実装がとても簡単なJavaScriptライブラリがある。 このエントリーでは、パララックス効果を与えるJavaScriptライブラリ「simpleParal
パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll
Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll -GitHub Locomotive Scrollの特徴 Locomotive Scrollのデモ Locomotive Scrollの使い方 Locomotive Scrollの特徴 Locomotive ScrollはWebページやスマホアプリでビューポート内の要素検出と視差効果によるスムーズなスクロールを簡単に実装できるJavaScriptライブラリです。virtual-scrollにレイヤーとして構築され、要素がビューポート内に入った時にc
マウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプト・「Tornis」
Tornisはマウスの動きやスクロールなど、閲覧ユーザーのブラウザのビューポート状態を監視するスクリプトです。シンプルで軽量、依存関係もなく、使いやすい設計となっています。 パララックスの為のスクリプトというわけではなく、ユーザーがどこまでスクロールしたか、マウスの速度や位置、スクロール速度などを監視する事が目的となります。 パララックス効果は作れるけど、基本的にはビューポートの監視を目的としているそうです。 使い方ソース最後にスクリプトを読み込みます <script src="tornis.js"></script>監視内容を設定します const trackMouse = ({ mouse, size, scroll }) => { if (mouse.changed) {//マウスの動きを監視 //マウス位置を取得 document.querySelector('.js-cursor
[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis
スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。 位置を取得できるのはよくありますが、速度まで取得できるのは珍しいですね。 Tornis Tornis -GitHub Tornisの特徴 Tornisのデモ Tornisの使い方 Tornisの特徴 Tornisは、ブラウザのビューポートの状態を監視する軽量のJavaScriptライブラリです。ビューポート・スクロール・マウスなどに何か変化があった時にその値を取得できます。 マウスの位置 マウスの速度 ビューポートのサイズ スクロールの位置 スクロールの速度 デバイスの向き（近日対応予定） ユーザーが操作し
![[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis](https://cdn-ak-scissors.b.st-hatena.com/image/square/33d3350d493f36f108ffe61f3810fe6f149501d0/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201902%2F2019052210.png)
[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll
Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。 単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 basicScrollではスクロール位置に応じてCSSを変更でき、CSSの変数を利用してアニメーションを適用します。スクロールで同時に表示された要素に対しても別々のアニメーションを簡単に設定でき、JavaScriptを使用してアニメーションをさらに制御できます。 basicScrollの特徴 他のスクリプトへの依存はゼロ CommonJSとAMDのサポート シンプルなJavaScript API ブ
![[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll](https://cdn-ak-scissors.b.st-hatena.com/image/square/50650661e7354b2848147a7358b8dfe4f3f2931c/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201801%2F2018022111-01.png)
Dixon & Moe — Strategy, Design, Development
Strategy, design, development — we help companies understand, prototype and deploy custom technologies. Mission As trained architects, interface designers and software developers, we believe technology can be a motive force in the building, manufacturing and financial industries. Read more. We're trained architects, interface designers and software developers, helping AEC companies understand, pro
[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。 Popper.js Popper.js -GitHub ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
![[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ](https://cdn-ak-scissors.b.st-hatena.com/image/square/63a1314d511ba3f16af07815026a8e0a870e8098/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201602%2F2016041101.jpg)
[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に記述
jQuery不要でスクロールにあわせて要素をアニメーションで表示するスクリプト -WOW.js | コリス
ページ下部にもたくさんのアニメーションが！ アニメーションはAnimate.cssを使用しているので、さまざまなものが利用できます。 どのようなアニメーションががあるのか、実装方法など、当ブログで以前紹介した記事をご覧ください。 classを加えるだけで多彩なアニメーションが簡単に使用できるスタイルシート -Animate.css WOW.jsはデモ以外にも、他のサイトで実際に使用されているさまざまな例があります。 どのサイトもアニメーションが楽しく、とても印象的です。 Stream Line Icons WOW.jsのつかいかた Step 1: 外部ファイル 当スクリプトを</body>の上、Animate.cssをhead内に外部ファイルとして記述します。 <head> ... <link rel="stylesheet" href="css/libs/animate.css"> </
[JS]Appleのプロダクトページのように、スクロール時に各要素をさまざまなアニメーションで表示させるスクリプト -scrollReveal.js
スクロールすると商品写真がアニメーションでスライド表示するAppleのプロダクトページのように、スクロールした時、ロードした時など、ページ内の要素がビューポートに表示した時に、各要素それぞれをさまざまなアニメーションで表示させることができる単体のスクリプトを紹介します。 デモのアニメーション scrollReveal.jsの使い方 Step 1: 外部ファイル 当スクリプトを外部ファイルとして</body>の上あたりに記述します。 jQueryなど他のスクリプトは必要ありません。 <body> ... ... <script src="js/scrollReveal.js"></script> </body> Step 2: HTML スクリプトをセットしたら、あとはアニメーションで表示させる要素に「data-scrollreveal」を追加するだけです。 <h1 data-scrollr
スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。 JavaScriptやCSSの初心者でも簡単にできると思います。 Parallax Background Builder Parallax Background Builderの使い方をざっくりと説明します。 Step 1: 適用範囲の選択 まずは、パララックスの適用範囲を選択します。 左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
最近のWebサイトで見かけるヘッダのアイデア・実装方法のまとめ