CSSだけでヒーローイメージのセクションにシンプルなパララックス効果
Result CSSだけで簡単なパララックス効果を出そう、というもの。既にありふれた情報かもしれませんが。 内容としては3D空間を作り、ヘッダに疑似要素を作って背景画像を設定、z軸に沿ってオブジェクトを遠ざけるよう設定します。 header::before { transform: translateZ(-4px); } header div { transform: translateZ(-2px); }また、3D空間の中でフラット描画されるよう、親要素にtransform-styleを設定しておきます。 header { transform-style: preserve-3d; }これだけだと単に縮小された状態になってしまうのでscaleで戻してあげる必要があります。 scaleで戻すには計算が必要です。Googleの記事では以下の計算法が使われています。 scale = (pers
スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」:phpspot開発日誌
ScrollMagic - The jQuery plugin for magical scroll interactions. スクロールに連動してアニメーションやパララックス効果が作れる「ScrollMagic」。 サンプルも豊富なので、スクロール連動型のコンテンツを作る際に選択肢の一つとして使ってみてもよさそう。 最近流行りとなってしまったスクロール連動型ですが、このブームはいつまで続くのでしょうね。 関連エントリ スクロール後、ナビゲーションをページトップに固定するjQueryプラグイン「stickUp」 スクロールにより積み重なるナビゲーションヘッダーを作れる「Slinky.js」 スペースキーでスクロールするスライドっぽい物が作れるjQueryプラグイン「Scrollocue」 スクロールに連動するパララックスな星空背景を実装できるjQueryプラグイン「Starscroll」
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
マウスホイールで横スクロール+パララックス効果のあるコンテンツを実装するスクリプト・jInvertScroll
マウスホイールで横スクロール+パララックスなWebサイトを作れる、というスクリプト。なかなか良さそうだったので備忘録です。コンテンツが横移動するだけで、スクロールバーは縦になります。 横スクロールなパララックスサイトを作れる、というスクリプトです。jQueryに依存します。 パララックスは種類の山？のようなもので確認できます。非圧縮で4KB前後と軽量なのも嬉しいですね。 <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="jquery.jInvertScroll.js"></script> <script type="text/javascript"> (function($) { $.jInvertScroll(['.foo']); }(jQuer
パララックスを使ったストーリー性のあるWebサイトまとめ | Goodpatch Blog
昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: 15 Awesome Websites That Tell a Story As You Scroll） Every Last Drop http://everylastdrop.co.uk/ 私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。 Ben the Bodyguard http://benthebodyguard.com/index.php 写真やメモ管理アプリの
LiXUS CORPORATION
品質マネジメントの国際規格であるISO9001:2008を北大阪物流センターにて認証取得。高品位な物流サービスを保証しています。また阪神物流センターにて、労働安全衛生マネジメントシステムの国際規格OHSAS 18001:2007を認証取得し、より安全な職場環境の構築をめざしています。 リクサスの品質方針 総合物流企業として保管・輸送から流通加工に至るまで、一貫した物流システムを提案・構築します。 物流に関する法令、条例、その他当社が同意した協定を遵守します。 「安全・確実・迅速・丁寧」を基本とし、高付加価値で高品質なサービスを提供するため、システムの継続的改善に取り組みます。 社員一人一人が物流品質の維持向上に積極的に取り組めるよう、本方針の周知徹底と品質向上教育に努めます。 この品質方針は、広く一般に公表します。 リクサスの安全衛生方針 安全衛生管理体制を整備し、安全衛生意識の高揚と健康
パララックス効果を作るスクリプトやプラグインのまとめ:phpspot開発日誌
Parallax Scrolling Scripts and Plugins | Impressive Webs パララックス効果を作るスクリプトやプラグインのまとめ。 最近では国内でもちらほら見かけるようになったパララックスなデザイン。 一言にパララックスといっても色々な実装があり、どれも斬新なものになっていて、見ておくだけでも参考になるであろう物が満載 こういう今では真新しいような技術も数年後には新しいテクニックが出てきていて、陳腐化したり応用されて汎用的なものになったりと今後も技術の進歩が楽しみですね 関連エントリ パララックス効果をダイナミックに使ったスライダー実装jQueryチュートリアル パララックス効果を使った秀逸なjQueryスライダー実装チュートリアル＆サンプルDL
Range Rover Evoque Special Edition With Victoria Beckham
The Range Rover Evoque Special Edition - Reserve yours today. Thank you for registering. A Land Rover representative will be in contact shortly. Einwilligung in die Datenverarbeitung zu weiteren Zwecken Wir möchten gerne mit Ihnen weiteren Kontakt halten und sicherstellen, dass Sie mit unseren Leistungen zufrieden sind und Ihre Anfrage ordnungsgemäß bearbeitet wurde. Hierzu benötigen wir folgende
jQuery Parallax Plugin Demo
(Almost) Static Background This section has a background that moves slightly slower than the user scrolls. This is achieved by changing the top position of the background for every pixel the page is scrolled. Multiple Backgrounds The multiple backgrounds applied to this section are moved in a similar way to the first section -- every time the user scrolls down the page by a pixel, the positions of
[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js
普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.js - The jQuery Slider Plugin with Infinite Style [ad#ad-2] Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴 エレメント単位で設定できるCSS3アニメーションを使ったスライダーです。 オープンソース。 すべてのモダンブラウザをサポート。 スマートフォンなどのタッチデバイスをサポート。 古いブラウザでも機能します。 ※IE7とFirefox3.6でもテスト済み。 セマンティックなマークアップ。 Responsive Web Des
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
http://webdesignmatome.com/webdesign/parallax_jp