レスポンシブサイトでパララックス効果をCSSだけで実装する方法 - ECサイト構築運営に役立つ情報発信｜モバイルファーストマーケティングラボ
最近、パララックス効果（視差効果）を取り入れたサイトを目にするケースが増えてきています。ECサイトの場合、商品ページにパララックス効果を取り入れる必要性はそれほど高く無いかもしれません。 しかしLP（ランディングページ）の見せ方として、パララックスさせることで工夫次第で、人を惹きつけるページを作成することができます。 パララックス効果を持たせるには、javascriptによる実装がよく使われています。しかし今回ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法をご紹介します。 パララックス効果とは パララックス効果とは、日本語で訳すと「視差」効果と訳すことができます。 同一点を異なった2点から眺めたときに見える方向の違い，すなわち，二つの方向の間の角度を視差という。 参考：コトバンク WE
記事中の画像などをページトップに留めて面白い効果を作る「jquery-stopattop」:phpspot開発日誌
GitHub - nstublen/jquery-stopattop: jQuery plugin that will stop elements from scrolling any further than the top of the browser window. 記事中の画像などをページトップに留めて面白い効果を作る「jquery-stopattop」 スクロールしても画像だけはそのまま留まるようなモダンな効果を作れます。 demo 関連エントリ スクロール要素にプログレスバーを付けられるjQueryプラグイン「PrognRoll」 スクロールで消えるレスポンシブなナビゲーションサンプル スクロールインした際のアニメーションを簡単実装「AOS」
パララックスを簡単実装！オススメのjQueryプラグインまとめ！ | 札幌・東京のホームページ制作・ウェブ制作会社monomode
絶賛パララックス記事祭り開催中です！！ パララックスのサイトを作る際は、背景の動きをずらしたりなどの全体の動きの設定とタイトルをスライドインさせたりといった各要素の動きを考え制作を行うことが多いのではないかと思います。最近、パララックスについて調べることが多かったということもあり、今回は、それぞれの用途に分けて簡単にパララックスのサイトを作ることができるプラグインをまとめてみたので、ご紹介したいと思います。 サイト全体の動きを設定するプラグイン skrollr URL：http://prinzhorn.github.io/skrollr// タグごとに色を変えたり、さまざまさアニメーションを簡単に実装することができるプラグイン。 Create a Parallax Scrolling Website Using Stellar.js URL：http://cdn.tutsplus.com/
[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic
スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。 スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロールなどにも対応しています。
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama
パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワーアップしたjQueryのプラグインを紹介します。
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
scrolldeck.js
scrolldeck created by Chicago Web Developer John Polacek. I work at at AuctionsByCellular. We make mobile bidding and auction software for charities. Follow @johnpolacek A jQuery plugin for making scrolling presentation decks For example: animations, fullscreen images or parallaxing Powered by Scrollorama Download: zip tar How to Use Build a web page with each slide as a div. Pro-Tip: Use rem’s to
Page not found. Nike.com
Nike asks you to accept cookies for performance, social media and advertising purposes. Social media and advertising cookies of third parties are used to offer you social media functionalities and personalized ads. To get more information or amend your preferences, press the ‘more information’ button or visit "Cookie Settings" at the bottom of the website. To get more information about these cooki
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
Home | The Clean Bedroom
Organic Mattress and Bedding StoreWith the growing concern about the effects of the harmful pesticides, chemicals, and toxins found in average bedding and mattresses, more and more consumers are looking for healthier and safer alternatives. While you may have heard about the benefits of making such a switch, finding a natural mattress or organic bedding can often be difficult. We have gathered a g
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Flipsblog.jp
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
スクロールに応じてパララックス効果を出せるjQueryプラグイン・scrolloramaを使ったプレゼンテーションサンプル - かちびと.net
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net
http://www.splashnology.com/article/new-websites-with-parallax-scrolling/4081/