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ライブラリ -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 コリス 軽量スクリプト 水平方向 タブレット スマホ

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

パララックスサイトの基本的な作り方 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のサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。 ってことで、今日は僕が知ってる中で『お、これ、シングルペ... 続きを読む

あぁこれがパララックス効果の使い方かと納得のパララックス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枚の画像も異なるタイミングで重なります。 実装方法を簡単... 続きを読む

[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を配布ページからダウンロード... 続きを読む

[JS]スマフォなどのジャイロスコープにも対応した一味違ったパララックスを実装するスクリプト -Parallax.js | コリス

2013/08/27 84 users jQuery Zepto ジャイロスコープ コリス 傾き

シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ... 続きを読む

パララックスサイトを簡単に作成できるjQueryプラグイン8選｜skuare.net

2013/08/13 196 users パララックスサイト skuare.net Tweet 感じ

パララックスサイトを簡単に作成できるjQueryプラグイン8選 Tweet いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollTo... 続きを読む

【iOS7】フラットデザインUI実装に役立つライブラリのまとめ - Over&Out その後

2013/06/18 218 users iOS OSS Objective-C コンポーネント ビュー

iOS, Objective-C, ライブラリiOS7で採用されたフラットデザインっぽいUIを、現行iOS（〜6.x）で実装する際に役立つOSSをまとめました。後半ではiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。 FlatUIKitフラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当する... 続きを読む

Xcode - 【iOS7】フラットデザインUI実装に役立つライブラリのまとめ - Qiita [キータ]

2013/06/18 78 users カテゴ キータ OSS コンポーネント ビュー

iOS7で採用されたフラットデザインっぽいUIを、現行iOS（〜6.x）で実装する際に役立つライブラリ（OSS）をまとめました。 またiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。 FlatUIKit フラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当するUIKitコンポーネントのカテゴ... 続きを読む

トレンドを巧く取り入れてる、美しいクリーンなデザインのウェブサイトのまとめ | コリス

2013/06/17 115 users コリス WDF トレンド ウェブサイト ウェブデザイン

最近のウェブデザインのトレンド、フラット、パララックス、ミニマル、大きい写真画像、CSS3アニメーションなどを巧く取り入れ、細部にまでこだわった美しいクリーンなデザインのウェブサイトをWDFから紹介します。 21 Beautiful Clean Website Designs 上記でたくさん紹介されている中から、いくつか刺さったものをピックアップしました。 Knock Knock Factory ... 続きを読む

パララックスを使ったストーリー性のあるWebサイトまとめ | MEMOPATCH

2013/05/16 198 users MEMOPATCH パララックス効果 ストーリー たくさん

昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: ... 続きを読む