prefers-reduced-motionでアニメーション（視差効果）を減らす設定をしたデバイスに対応させる

2022/11/24 7 users アクセシビリティ CSS みなさん 画面 アニメーション

2022年11月24日 CSS, アクセシビリティ アニメーションのあるWebページって、見るのも作るのも好きなんですが、みなさんはいかがでしょう？中には動きが苦手で目が疲れてしまう、画面酔いしてしまう…なんていう方もいらっしゃるかと思います。今回はアニメーションが苦手な方のためにWebサイト側でできることを考えてみ... 続きを読む

Webページに軽快な視差効果、スクロールすると要素が近づいてくるエフェクトを実装できる軽量のJavaScript -PushIn.js

2022/06/06 5 users エフェクト 軽量 要素 JavaScript Webページ

Webページにインタラクティブな視差効果のアニメーションを実装できる軽量のJavaScriptを紹介します。 スクロールすると要素が近づいてくるエフェクトは、Appleのランディングページなどでもよく見かけます。スクロールすると要素が押し出されるように近づくプッシュイン、スクロールすると要素に向かってカメラが近づく... 続きを読む

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

Titaniumで視差効果や顔認識（実証コード付き）を試す(1/2) - Ti Weekly Clips++ - Mobile Touch - モバイル/タブレット開発者およびデザイナー向け情報ポータル

2013/10/15 8 users Titanium NEWS atnd.org 渋谷ヒカリエ

Ti Weekly Clips (2013/10/06～2013/10/12)++ #TitaniumJP #News - SDKアップデートやイベントなどのニュース ##■ 勉強会情報 Titanium もくもく会 #13 2013 : ATND http://atnd.org/events/44490 2013年11月19日に渋谷ヒカリエのKDDIさんの会議室をお借りして、Titanium M... 続きを読む

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

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

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

iOS 7の壁紙サイズまとめ！iPhone 5以降は1536×1040、iPadは2448×2448 | delaymania

2013/09/27 8 users delaymania パララックス 奥行き 壁紙 iPad

iOS 7の壁紙で酔います@delaymaniaです。 iOS 7から壁紙のサイズが変わりました。 iPhone各種とiPad各種のサイズを調べたのでまとめておきます。 パララックス(視差効果)の壁紙 iOS 7から壁紙が動いたように見えますよね。 これはパララックス(視差効果)というもので、この効果によって奥行きを感じるようになりました。 この効果を出すために壁紙のサイズがディスプレイサイズより... 続きを読む

無料で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 ... 続きを読む