パララックスもこれで簡単に！ 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 ... 続きを読む

【jQuery】背景にパララックス効果を追加するParallaxify | VOYAGER

2016/12/10 28 users ジャイロセンサー Voyager jQueryプラグイン

Parallaxifyは、ジャイロセンサーやマウスに基づいて要素や背景に視差効果を追加するjQueryプラグイン。 Demos Galaxy iOS 7 MockUp Get things going // Run it on single element $('#my-wrapper').parallaxify(); // or globally $.parallaxify(); $('#my-... 続きを読む

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

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

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

「Seene」の神アップデートで、iPhoneだけでフル3Dモデルが撮影できるように : ギズモード・ジャパン

2014/05/12 255 users iPhone Seene ギズ ギズモード iPhoneだけ

DIY , スマートフォンアプリ 「Seene」の神アップデートで、iPhoneだけでフル3Dモデルが撮影できるように 2014.05.13 07:00 iPhoneだけで3Dフォトを撮影できるアプリ「Seene」。去年登場した時にギズでも記事にしました。 これまでは写真に視差効果を与えて擬似的に3Dにするだけでしたが、次のアップデートで完全な3Dテクスチャモデルを作成することができるようになるそ... 続きを読む

パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 | DesignDevelop

2014/01/02 203 users オブジェクト DesignDevelop 手前 エントリー

2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設... 続きを読む

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

2013/10/30 130 users パララックス jQuery skrollr jQuery本体

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

iOS7.0.3、「視差効果を減らす」の仕様変更に賛否両論 : iPhoneちゃんねる

2013/10/23 14 users 賛否両論 iPhoneちゃん 仕様変更 sage 挙動

▼ 「設定→一般→アクセシビリティ」より ホーム画面で酔う人だけでなく、壁紙が拡大されるのを回避するためオンに設定していた人も多い。 ▼ 「視差効果を減らす」をオフにした場合の挙動（デフォルト） ▼ iOS7.0.3：「視差効果を減らす」をオンにした場合の挙動 873 名前：iPhone774G[sage] 投稿日：2013/10/23(水) 08:28:09.58 ID:9bbR42/Ei 視差... 続きを読む

没入型3Dヘッドアップディスプレイ「Oculus Rift」はステレオブラインドも克服する可能性 - GIGAZINE

2013/09/30 27 users GIGAZINE Virtu Oculus Rift 斜視

3DテレビはもちろんiOS7で採用された視差効果などの視差を利用した立体視技術が普及の兆しを見せていますが、斜視などが原因で立体視が困難なため3D映像を楽しめない人(ステレオブラインド)がいることが知られています。しかし、没入型3Dヘッドアップディスプレイ「Oculus Rift」はステレオブラインドネスをも克服し得る可能性を持つことが明らかになっています。 Oculus Rift - Virtu... 続きを読む

無料でiOS 7の視差効果に対応した高画質壁紙をダウンロードできる「Parallax Wallpapers」 - GIGAZINE

2013/09/26 47 users GIGAZINE Clean CARS Space 壁紙

iOS 7で採用された視覚エフェクト機能として、ホーム画面のアイコンが端末の動きに合わせて動いて見える「視差効果」があります。この視差効果に対応した高画質な壁紙を無料でダウンロードできるサイトが「Parallax Wallpapers」です。 Parallax Wallpapers http://parallaxize.com/ 画像は「SPACE(宇宙)」「CARS(自動車)」「CLEAN」「L... 続きを読む

iOS7に最適な壁紙サイズは!? Parallax、ダイナミック、棚系、それぞれ適したWallpaperサイズがある

2013/09/25 40 users iPhone parallax アフ 傾き エフェクト

iOS7へのメジャーアップデートでまた大きく仕様が変わりました。私も昨日アプデしたばかりで全く付いて行けてませんが、本日は見た目に大きく影響する壁紙サイズについて書かせて頂いこうかと。 iOS7からは壁紙に視差効果(Parallax Effect)という設定が新たに付きました。iPhoneの傾きに合わせて壁紙が動くわけですね。 このエフェクトのお陰で今迄の壁紙はサイズが合わないんですよ。特に棚系、... 続きを読む

iOS 7用壁紙の紹介サイトまとめ！ 視差効果「Parallax Effect」に対応した棚壁紙も発見 | NANOKAMO BLOG

2013/09/23 41 users parallax effect 棚壁紙 ハンサムクロジ 発見

どうもハンサムクロジです。 iOS 7にアップデートして、視差効果「Parallax Effect」があるせいで既存の棚壁紙が使えなくなっちゃいましたね。 もちろん設定で「Parallax Effect」をオフにしちゃえば、拡大された状態や傾けた時に動いたりするのを停止させてそのまま使うことはできるのですが、せっかくだし「Parallax Effect」はオンにしときたいというかたも多いかと思われ... 続きを読む

iOS 7で「必要ない / 不便」という声が多そうな機能6選（と、その設定を変更する方法） : ライフハッカー［日本版］

2013/09/21 23 users ライフハッカー デバイス 例外 iOS 7 オフ

新しいバージョンのOSがリリースされると、ちょっとした問題や使いにくい点が生じることは多々あります。iOS 7も例外ではありません。今回は、特に使いにくそうな新機能6つをピックアップし、その変更方法を紹介します。 1．視差効果をオフにする iOS 7ではデバイスを傾けると背景画像も少しスクロールするという「視差効果」が採用されています。クールな仕掛けですが、そこまで便利というわけではありません。特... 続きを読む

iOS 7で「必要ない / 不便」という声が多そうな機能6選（と、その設定を変更する方法） : ライフハッカー［日本版］

2013/09/21 608 users ライフハッカー デバイス 例外 iOS 7 オフ

新しいバージョンのOSがリリースされると、ちょっとした問題や使いにくい点が生じることは多々あります。iOS 7も例外ではありません。今回は、特に使いにくそうな新機能6つをピックアップし、その変更方法を紹介します。 1．視差効果をオフにする iOS 7ではデバイスを傾けると背景画像も少しスクロールするという「視差効果」が採用されています。クールな仕掛けですが、そこまで便利というわけではありません。特... 続きを読む

iOS7 の Parallax Effect(視差効果) 壁紙が全部揃う！「Free iOS 7」

2013/09/21 98 users parallax effect 壁紙 iOS7 iPhone

iPhone や iPad を iOS7 にアップデートしてから、端末の背景に設定する壁紙に困っている人はいませんか？　私もその一人です。 iOS7 以降はParallax Effect(視差効果) がデフォルトで適用されますので、それに対応した壁紙が欲しい所ですよね。ところが、Parallax Effect(視差効果) 対応の壁紙を探すと行っても、iPhoneの世代によってもサイズが変わってきま... 続きを読む

｢iOS 7｣の｢Parallax Effect (視差効果)｣機能に対応した壁紙集

2013/09/19 17 users parallax effect parallax 壁紙集

本日、正式にリリースされた｢iOS 7｣には奥行きを再現するための｢Parallax Effect（視差効果）｣といった機能が搭載されていますが、Cult of Macがその｢Parallax｣に対応した壁紙を多数紹介しています。 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本 ｜ クラスメソッド開発ブログ

2012/10/16 761 users パララックスエフェクト パララックス parallax ディ

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。 はじめに – パララックスエフェクトについて パララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。 アニメーションの世界ではディ... 続きを読む

シンプルなパララックス効果付きのイメージスライダーを実装するjQueryプラグイン・jQuery Destaque - かちびと.net

2012/10/11 44 users イメージスライダー net やり場 jQueryプラグ デモ

画像がスライドする際に視差効果 を与える事が出来るjQueryプラグ インのご紹介。イメージスライダー とは相性良さそうですね。シンプル なものですが、応用も出来そうです。 パララックスなイメージスライダーです。画像をスライドさせるとテキストがやや遅れて動きます。 jQuery Destaque デモが目にやり場に困る写真ですが・・工夫すれば訴求力のあるコンテンツに出来そうです。アニメーションはe... 続きを読む

スクロールに応じてパララックス効果を表現できるスクリプト・jarallax - かちびと.net

2012/09/20 82 users パララックス効果 スクロール net jQuery 備忘録的

スクロールに応じて視差効果 を表現できるスクリプト・ jarallaxのご紹介。jQueryを 必要とするみたいです。よく 見かけるやつですが、デモが 良かったので備忘録的に。 jQuery依存のパララックスエフェクト実装スクリプトです。時間無いので紹介だけとさせて頂きます。 jarallax よくあるパララックス実装スクリプト。デモ作る暇が無かったので公式のをご覧下さい。 Sample フェード... 続きを読む

パララックス効果を表現できる背景をオンラインで簡単に生成出来るWebサービス・Parallax Background Builder - かちびと.net

2012/09/03 31 users パララックス効果 net 背景 パララックス オンライン

去年よく話題に上った、マウスを動かす 事で視差効果（パララックス）を表現す るやつをオンラインで生成出来る、という Webサービス・Parallax Background Builder のご紹介。こういうのも簡単に生成出来る ようになったんですね。簡単ではありま すが。 マウスに応じて複数レイヤーを動かす事で視差効果を表現できるパララックスな背景を簡単に作成できる、というWebサービス。凝った物... 続きを読む

パララックスを実現するためのチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」 | DesignDevelop

2012/07/14 47 users パララックス DesignDevelop parallax

パララックスを実現するためのチュートリアル&リソース集「Parallax Scrolling Tutorials & Resources」 大きな話題を呼び、国内でも様々なPRサイトに実装されたパララックス（視差効果）。今までには無い体験は多くの人の注目をあつめました。今日紹介するのはパララックスを実現するためのチュートリアルやリソースをあつめた海外のチュートリアル&リソース集「Parallax ... 続きを読む

Photoshop VIP ☞ ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ(+無料プラグイン9個)

2012/03/27 348 users エフェクト アニメー Photoshop Vip 魅力 奥行き

Home　>　 まとめ　>　その他まとめ　>　ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ(+無料プラグイン9個) パララックス効果(英: parallax effect)をご存知ですか。 別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。 複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメー... 続きを読む

最近話題のパララックス効果を利用したアニメーションとデザインのキレイな国内・海外サイトまとめました | Webデザインクリップ｜Web制作に便利な情報を集めたまとめサイト

2011/12/19 137 users パララックス効果 平面 上下 奥行き アニメーション

パララックス効果とは・・ スクロール時に平面で重なり合う画像を異なる速さで上下や左右に動かすことで奥行きがあるように見せる視差効果を「パララックス効果」と呼びます。css3やjavascriptで実装されているものが多く、このパララックス効果をうまく取り入れることでちょっとユニークなアニメーションを表現できます。このパララックス効果を上手く利用したWEBサイトを国内・海外ともにまとめて紹介します。... 続きを読む

jQueryでWebサイト内を無限にスクロール出来るようにする - かちびと.net

2011/07/09 111 users jQuery パララックス 語彙 スクロール 実装

ちょっと語彙があるかもですけど、無限に スクロール出来るように見せる、みたいな 方法です。これが何の役に立つんですか とか言われると困っちゃうんですけど・・・ こういうのがあってもいいかなと思ったの でちょっと作ってみました。実装にはjQuery を使います。 土曜日なのでちょっとネタ的な話題です。 数日前に「スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデ... 続きを読む

[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D | コリス

2011/07/07 214 users パララックス コリス 奥行き スクリプト デモ

パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 続きを読む