CSSでの実装が今までとは大きく変わる！ スクロールをトリガーにしたアニメーションを実装する方法

2023/07/13 132 users トリガー CSS スクロール アニメーション 実装

まもなくリリースされるChrome 115で実装されるScroll-driven animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。 スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかり... 続きを読む

パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js

2022/01/12 175 users エフェクト CSS ライブラリ スクリプト 実装

ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。 実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax... 続きを読む

パララックスの実装におすすめのJavaScriptライブラリまとめ【2021年版】 | Web Design Trends

2021/09/02 5 users ライブラリ Vanilla JS 実装 定番テクニック 印象

Webデザインにおいて、定番テクニックの1つとして使われるのがパララックスです。パララックスはライブラリを使用することで手軽に導入することができ、Webサイトの印象を大きく変えることができます。 今回は、パララックスの実装におすすめのJavaScriptライブラリをご紹介します。 基本的にVanilla JSで作られているで... 続きを読む

CSSのみでスクロール時に各セクションを固定するパララックス | かちびと.net

2019/12/15 5 users result sticky position CSS net

Result タイトルでうまく説明できませんでしたけどこういうやつです パララックスの表現法が出始めた時によく見かけるようになってから今も割と見かけるのである程度定着してる感も無くはないですね で、これなんですがそう言えばposition: sticky;で出来ますよね、という内容です css .container {/*高さを画面一杯にし... 続きを読む

パララックスやさまざまなスクロールのエフェクトを簡単に実装できるJavaScriptライブラリ -Locomotive Scroll | コリス

2019/07/24 97 users コリス エフェクト スクロール スマホアプリ 要素

Webページやスマホアプリで要素がビューポート内に入った時に、パララックスやさまざまなスクロールのエフェクトを実装できるJavaScriptライブラリを紹介します。 要素をスクロールに追従して表示させたり、視差効果を使ったパララックスやカーテン効果なども簡単に実装できます。 Locomotive Scroll Locomotive Scroll ... 続きを読む

[JS]スクロール・マウスの位置や速度など、ビューポートの状態を簡単に取得できるJavaScriptライブラリ -Tornis | コリス

2019/05/22 58 users ビューポート コリス スクロール アニメーション マウス

スクロールの速度に合わせたアニメーション、スクロールの位置に合わせたパララックス、マウスの位置・速度に合わせたパララックス、ビューポートのサイズに合わせたレイアウト変更などを実装するために、ビューポートを監視し、その状態を簡単に取得できる軽量JavaScriptライブラリを紹介します。 位置を取得できるのは... 続きを読む

2018年版：パララックスを簡単に実装できるおすすめプラグイン8選 | Web Design Trends

2018/10/04 72 users ライブラリ WEBサイ プラグイン デザイン手法 ユーザー

パララックスは、様々なWebサイトで取り入れられているデザイン手法で、ユーザーを楽しませたりサイトを魅力的に見せたりなど様々な効果を発揮します。 Webサイトでパララックスを実装するためのプラグインやライブラリは様々なものが公開されており、それらを利用することで初心者の方でも簡単にパララックスをWebサイ... 続きを読む

[JS]スマホやタブレットにも完全対応！垂直・水平方向にパララックス スクロールさせる軽量スクリプト -paroller.js | コリス

2017/05/24 60 users コリス 軽量スクリプト 水平方向 タブレット スマホ

ページいっぱいの背景、コンテナいっぱいの背景、要素の背景などを垂直水平方向にパララックスさせるスクリプトを紹介します。 モバイルにも完全対応しており、全体をパララックスさせたり、カード型コンポーネントをずらしながら表示さ ...記事の続きを読む 続きを読む

【動画】パララックスを有効に使ったサイトデザインがカッコ良すぎる！ – jungleocean

2017/05/16 17 users YouTube いちい ラファエロ ジャングルオーシャン 左右

みなさん、こんにちわ！ ジャングルオーシャンのラファエロです！ パララックスという効果を有効に使ったデザインのサイトをYouTubeで紹介してみました！ 初めて動画撮影と動画編集をやったので、ちょっとグダグダですが是非見てみてくださいw 動画が今すぐ見れない人のために内容を軽くご紹介♪ ▲いきなりカッコ良いムービーが流れて興奮するラファエロ ▲左右に分割された面白いトップページのデザイン ▲いちい... 続きを読む

パララックスサイトの基本的な作り方 1/2！ ｜ Web Design Magazine

2015/03/25 271 users パララックスサイト 作り方 HTML 個々 勢い

こんにちは〜！ 今回はパララックスサイトの基本的な作り方を紹介したいと思います。 去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。 そんなパララックスサイトの基本的な作り方です。 パララックス（視差効果）とは パララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。 準備をしよう！ htmlを用意します。 j... 続きを読む

[JS]非常に少ないコードでパララックスのエフェクトを実装できるスクリプト -Parallaxor | コリス

2015/01/19 79 users スタティック jQuery ＳＥＣ コリス エフェクト

指定した要素をスクロールに応じて、さまざまな方向に異なるタイミングでアニメーションさせることができるjQueryのプラグインを紹介します。 Parallaxor -GitHub Parallaxorのデモ Parallaxorの使い方 Parallaxorのデモ デモはChrome, Firefox, Safariでご覧ください。 IEやスマフォではスタティックに表示されます。 demo: sec... 続きを読む

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス

2014/08/20 235 users コリス チュートリアル エフェクト CSS レイヤー

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。 デモはパララックスの構造を可視化できるので、より分かりやすいと思います。 Pure CSS parallax scrolling websites パララックスのデモ パララックスの実装 パララックスのデモ デモは非常にシ... 続きを読む

multiscroll.js - パララックスとはまた違うスクロールエフェクト MOONGIFT

2014/06/12 55 users パララックスエフェクト MOONGIFT スクロール 上下

パララックスエフェクトに代表されるようにスクロールで新しい視覚効果を生み出す試みがされています。単純な上下のスクロールでは得られない大きなインパクトを訪問者に与えることができます。 その新しい手法として紹介したいのがmultiscroll.jsです。スクロールによって起こる新しいエフェクトを楽しんでください。 multiscroll.jsの使い方 何はともあれ動画を見るのが一番分かりやすいかと思い... 続きを読む

スクロールするとヘッダや打ち出しを美しい繊細なエフェクトで上部に隠すテクニック -Scrolling Banner | コリス

2014/06/09 58 users コリス ヘッダ エフェクト スクロールエフェクト スクロール

先日の「スクロールやクリックした際に、おおっ！と思わせるクリエイティブな7つのエフェクト」はかなりインパクトがありましたが、今回紹介するのは非常に繊細なスクロールエフェクトです。 使用するのはよく見かけるレイアウトで、上部からヘッダ、ナビゲーション、打ち出し、コンテンツと積み重ねたものです。 Scrolling Banner スクロールすると、コンテンツは通常通りスクロールされ、画像はパララックス... 続きを読む

これは今読むべき！Web制作の今がわかりやすく説明されている「現場のプロが教えるWeb制作の最新常識」を読みました！ | 男子ハック

2014/04/13 112 users 男子ハック 現場 Web制作 最新常識 プロ

Web制作の現状やトレンドを知っているか知らないかでは大違い 目まぐるしいスピードで変化しているWeb制作の現場。最近では「フラットデザイン」「レスポンシブデザイン」「パララックス」などWeb制作の職業についていなくても耳にしたことがあるキーワードがたくさん。他にもHTML5やSass、Gitなど新しい言語やプロジェクト管理について、今のWeb制作の現場がどうなっているのか非常時わかりやすく説明さ... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリス jQuery スクリプト エフェクト div要素

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグイン色々！ | バンクーバーのうぇぶ屋

2014/02/11 622 users バンクーバー うぇぶ屋 プラグイン フリップ型 事例

最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルペ... 続きを読む

[JS]画像とコンテンツを交互に配置する簡単実装でパララックスコンテンツを作成できるスクリプト -Parallax ImageScroll | コリス

2014/02/10 44 users コリス jQuer レスポンシブ スクリプト エフェクト

ページをスクロールすると、パララックスのエフェクトで次々に画像とコンテンツをカーテンを引き上げるように表示するjQuerのプラグインを紹介します。 もちろんレスポンシブにも対応、またタッチデバイスではパララックスのエフェクトが重く感じることもあるのでオン・オフの設定もできます。 Parallax ImageScroll -GitHub Parallax ImageScrollのデモ Paralla... 続きを読む

あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ | Flips Blog Web担の小技

2014/01/25 392 users パララックス効果 Web担 Flips Blog 納得 小技

今回は、パララックス効果を用いた結果、口コミで広がり、海外でもわりと多くのシェアを誇るサイトを7つご紹介。 実は2014年のトレンドの一つとして、海外では 表示速度をあげる 六角形（蜂の巣） 軽量化 最小限 モバイルファースト コンテンツ最優先表示 というのが上げられていまして、もしかすると今年パララックスは減少傾向になると予測されています。 しかし、コンテンツ最優先表示では、いまだパララックスが... 続きを読む

[CSS]スクリプト無し、スタイルシートで実装するパララックススクロール | コリス

2014/01/22 203 users コリス パララックススクロール CSS スクリプト 一目

パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 Pure CSS Parallax Scrolling デモをスクロールすると、コンテンツと背景が異なるタイミングでスクロールされて表示されます。 背景が派手なので、効果も一目で分かりますねｗ スライド2では、左の2枚の画像も異なるタイミングで重なります。 実装方法を簡単... 続きを読む

パララックス効果を実装できるプラグインやチュートリアル 30 | NxWorld

2014/01/15 48 users NxWorld チュートリアル パララックス効果 プラグイン

あくまでも予想で尚且つ海外の情報というのはあるんですが、海外ブログなどでは去年に引き続き今年もパララックスは流行ると予想しているところが多く、個人的にもパララックスは残りそうなトレンドのひとつだと思ったので整理兼ねてまとめました。全体的に目新しいものではないですが、いずれも簡単にパララックス効果を実装できる便利プラグインやパララックスの実装方法などがわかりやすく解説しているチュートリアルなどです。... 続きを読む

Mediumの記事のタイトルみたいなアニメーションをつくる／skrollr.jsでね | mah365

2014/01/08 14 users medium 半透明 アニメーション mah365 アレ

Mediumの記事のタイトルのアニメーションを見たことはあるでしょうか。下にスクロールすると控えめにタイトル自体も若干アニメーションして半透明になるアレです。流行りのパララックスというやつです。実際にこちらの記事を下スクロールしてもらえると、言わんとしていることがわかると思います。 これ、skrollr.jsを使うと簡単に実現できることが分かったのでご紹介します。 実際動いているもの 真似してつく... 続きを読む

[JS]jQueryのプラグイン100選 -2013年総集編 | コリス

2013/12/24 640 users jQuery コリス インタラクション スクリプト スマフォ

今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。 今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。 スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクション... 続きを読む

デザインの参考にもいい！レスポンシブ対応のHTML5/CSS3のテンプレートのまとめ | コリス

2013/12/02 419 users コリス ミニマル 随所 エフェクト テンプレート

商用でも無料でいいの？というくらい美しくデザインされたHTML5/CSS3のテンプレートを紹介します。 デザインだけでなく、ページ内に取り入れたエフェクトもなかなか面白いものが揃っていますよ。 Brushed デモ ミニマルなデザインが美しい1ページスクロール。パララックスの使い方、固定ヘッダの配置方法、ナビゲーションやパネルのエフェクトなど、随所にセンスが光ります。 個人・商用利用無料。 続きを読む

ASCII.jp：パララックスをサクッと作れるskrollr｜こうめの“これから使える”jQueryプラグイン

2013/10/30 130 users jQuery skrollr jQuery本体 エフェクト

今回紹介するプラグイン skrollr 「skrollr」は、パララックス（視差効果）を簡単に実装できるプラグインです。 サンプルの動画を見ていただければわかりますが、非常に多彩なエフェクトが用意されており、基本的なパララックスサイトであれば、サクッと作れます。 step1 jQueryプラグインの読み込み jQuery本体をjQueryの公式サイトから、skrollrを配布ページからダウンロード... 続きを読む