[JS]デスクトップとスマホの両方に対応！さまざまなパララックススクロールを実装できるスクリプト -basicScroll | コリス

2018/02/21 72 users コリス CSSアニメーション 単体 軽量スクリプト スクリプト

Webページやスマホアプリで、ユーザーがスクロールした位置に応じてCSSアニメーションを簡単に適用できるパララックススクロールを実装する軽量スクリプトを紹介します。 単体で動作するので、非常に便利だと思います。 basicScroll basicScroll -GitHub basicScrollの特徴 basicScrollのデモ basicScrollの使い方 basicScrollの特徴 b... 続きを読む

[CSS]スクリプト無し、スタイルシートで実装するパララックススクロール | コリス

2014/01/22 203 users コリス パララックス CSS スクリプト 一目

パララックス=スクリプトと思っていたのですが、スクリプト無しでも実装できるんですね。 今後、実装方法がますます進化しそうです。 Pure CSS Parallax Scrolling デモをスクロールすると、コンテンツと背景が異なるタイミングでスクロールされて表示されます。 背景が派手なので、効果も一目で分かりますねｗ スライド2では、左の2枚の画像も異なるタイミングで重なります。 実装方法を簡単... 続きを読む

パララックスエフェクトを使った素敵Webサイトデザイン + チュートリアルまとめPhotoshopVIP |

2013/12/13 95 users パララックスエフェクト Flash 奥行き アニメーション

最近の魅力的なWebデザイントレンドのひとつとして、パララックススクロールを利用したサイトデザインが人気です。 パララックスエフェクトは、複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としています。また、これまで3Dエフェクトに使われていたFlashに変わる、新しい表現アイデアでもあります。 海外デザインブログSplashnol... 続きを読む

[JS]既存のページに数行加えるだけでパララックススクロールを実装できるチュートリアル | コリス

2013/08/01 191 users コリス jQuery チュートリアル エフェクト スクリプト

jQueryとほんの数行のスクリプトでパララックススクロールのエフェクトを与えるデモを紹介します。 Parallax scrolling background デモはスクロールすると、コンテンツと背景画像がいい感じのタイミングでずれてスクロールします。 実装は簡単です。 既存のページにもこれなら簡単に組み込めると思います。 HTML パララックススクロール用の背景を配置するために先頭に空のdiv要... 続きを読む

ウェブデザインで注目すべき5つのトレンド：パララックススクロールから大胆な色使いまで : ライフハッカー［日本版］

2013/07/30 112 users ウェブデザイン GigaOM ライフハッカー トレンド 色使い

Webツール , デザイン , 仕事がはかどる , 最新テック ウェブデザインで注目すべき5つのトレンド：パララックススクロールから大胆な色使いまで 2013.07.30 20:00 GIGAOM：最新のウェブデザインについてデザイナーに聞きました。パララックススクロールから大胆な色使いまで、5つの注目トレンドを紹介します。 最近のスタートアップはデザインでブレークする、けれど 問題はウェブサイト... 続きを読む

肉球がパララックスしてレスポンシブ対応のちょっと面白そうなフレームワーク -Cool Kitten | コリス

2013/02/06 76 users コリス パララックス フレームワーク エフェクト ベータ版

ベータ版ですが、ちょっと面白そうなシンプルなフレームワークがリリースされていたので紹介します。肉球に惹かれたわけではないですよ。 Cool Kitten Cool Kitten -GitHub Cool Kittenはデスクトップ・タブレット・スマートフォンなど、レスポンシブ対応のパララックススクロールのエフェクトを備えたフレームワークです。 スクロールすると、肉球がパララックス！ 肉球 もちろん... 続きを読む

[JS]Firefoxでのパララックススクロールのもたつきを解消するスクリプト | コリス

2011/07/05 60 users コリス Opera Firefox スクリプト Safari

パララックススクロールとは下記のサイトなどで使用されているテクニックで、複数のレイヤーをそれぞれ異なるタイミングでスクロールし、視差効果を生み出すものです。 Iutopi ここで紹介するのは、これらのパララックススクロールを操作する際、Firefoxでもたつくのを解消するスクリプトです。 この現象は、IE, Chrome, Safari, Operaでは見られません。 Firefoxでのパララック... 続きを読む