デザイン

デザイン

【デザイナー必見】効果的なパララックス効果の使い方とは?パララックス効果を実装した例

LINE25

Line25 was built in March 2009 as a place to share web design ideas and inspiration through articles, tutorials and examples of stunning site designs.

本記事は、20 Parallax Scrolling Tutorials Every Designer Must Read
翻訳・再構成したものです。
配信元または著者の許可を得て配信しています。

1,368 views

読了時間 : 約5分8秒

パララックススクロールは、上手く使用すると、ウェブサイトを美しく目を引くデザインにしてくれる素晴らしいトレンドです。

 

パララックススクロールとは、ウェブページをスクロールするときに、背景を前面の画像よりも遅く動かすことによって生じる効果のことです。

 

この効果は、視聴者がウェブサイトを見ている時に、彼らを魅了するような奥行きの錯覚を作り出します。

 

それはとても可愛く、ウェブサイトをもっともっと面白く、隅々まで見てみようという気にさせるでしょう!

 

しかし、視差効果が上手く設定されていない場合、ユーザーにとって非常に乱雑で分かりにくい場合があります。

 

なので過度にこの効果を使い過ぎないことが非常に重要です。

 

パララックスを用いたウェブサイトでは、1ページあたりの情報が多いため、読み込みに時間がかかります。

 

さらに、この効果はモバイルデバイスとの互換性があまりないため、モバイルフレンドリーなウェブサイトを構築しようとする時は、別の手法を用いることをお勧めします。

 

この記事では、デザイナーであれば読むべき、20のパララックススクロールのチュートリアル(使用説明書・手引き)を集めました。

 

これらのウェブサイトは、パララックススクロールを使ったウェブサイトがどのように見えるかがよく分かる非常に良い例が載っているので、パララックス効果を最大限に活用する方法を理解するのに役立ちます。

 

またこれらのチュートリアルは、 jQueryとCSSを使用してパララックススクロールを用いたウェブサイトを作成するのに役立ちます。

 

このチュートリアルを見れば、自分のウェブサイトのデザインでもこの効果を使用してみようという気になるでしょう。

 

では早速これらのチュートリアルを見てみましょう。

 

コメント欄であなたの意見をお聞かせください!

 

Parallax Content Slider With CSS3 And jQuery

パララックススクロールには多くのメリットがあります。その1つは、視聴者の関心を引きつけ、ウェブページに長く留まらせます。

このチュートリアルでは、CSS3とjQueryを使用してこの効果を作成する方法を説明します。

Create a Funky Parallax Background Effect Using jQuery

パララックススクロールを使えば、サイトの設計者は、視聴者の関心を妨げることなく魅了することが出来、かつメッセージをより明確に伝えることができます。

jQueryを使ってファンキーなパララックス効果を背景に作成する方法を学んでください。

A Simple Parallax Scrolling Technique

パララックススクロールを用いることで、デザイナーは1ページにすべての情報をまとめることが可能です(ウェブサイトを1ページにまとめるテクニックは非常に人気があります)。

そうすることで、ユーザーもサイトが見やすくなります。

このチュートリアルでは、この簡単なテクニックを学びます。

 

The Parallax Effects With jQuery

パララックススクロールによって、あなたが販売または宣伝しようとしていることを訪問者がより深く理解出来るよう、ウェブサイトを一種のストーリーブックに変えることが出来ます。

このチュートリアルでは、jQueryを使ってこの効果を適応する方法を学びます。

 

Jazz up a Static Web Page with Subtle Parallax

このトリックでは、この効果を控えめに使用しており、それによりユーザーの注意を引くような繊細な3Dのビジュアル・ナラティブになっています。

例としてこのチュートリアルを見てください!

 

Scrolling Parallax: A jQuery Plugin with Tutorial

Scrolling Parallax Pluginでは、jQueryのイベントをスクロールバーとマウスホイールに結びつけます。

これにより、背景画像がウェブページと異なるペースでスクロールするようになります。

このチュートリアルを見て、このプラグインがどのように作成されたかを学んでください。

 

Parallax gallery

パララックススクロールは、多くの2Dアニメーションやゲームで使われている効果です。

このチュートリアルでは、パララックススクロールのギャラリーを作成する方法を最初から学習します。

 

Build a parallax scrolling website interface with jQuery and CSS

ここでは、jQueryとCSSを使用して作成されたパララックススクロールのデモが見れます。

このチュートリアルの手順に従って、このようなインターフェースを構築する方法を学びましょう。

 

CSS3 Parallax scrolling slider

この一般的な効果を垂直にスライドするように設定する方法を学びます。

JavaScriptは使用せず、単純にcss3プロパティのみを使用します。

 

Parallax Slider With jQuery

パララックスの基本動作を異なる背景に移す方法は次のとおりです。

このスライドをどのように作成し、構築するのかを学びます。

 

Fluid CSS3 Slideshow with Parallax Effect

このチュートリアルでは、パララックス効果を持つスライドショーの作成を行います。

これにはいくつかCSS3プロパティを使用します。

 

SUPER SCROLL ORAMA

これは、とてもクールなスクロールアニメーション用のオリジナルのjQueryプラグインです。

Githubで正確なコードを調べてみてください。

 

One page website, vertical parallax

このチュートリアルでは、ウェブサイトの構造を分析してから、jQueryとCSSを使用して作成されたNikeのウェブサイトから発想を得て、ウェブサイトを作成してみます。

 

Nikebetterworld Parallax Effect 

このチュートリアルでは、オリジナルのjQuery Parallaxスクリプトを使用し、Nikebetterworldに似たウェブページを再作成します。

 

Parallax

この包括的なチュートリアル/ガイドを参考にして、簡単に一つずつ、パララックスを使ったウェブサイトを構築する方法を学びます。

 

Simple parallax scrolling tutorial

このチュートリアルでは、パララックスを使ったウェブサイト用にHTMLを設定する方法、異なる速度で背景画像をアニメーション化する方法、アニメーションのタイミングと持続時間を制御する方法について学習します。

 

Creating a Parallax Scrolling Webpage Using Jarallax.js

このチュートリアルでは、このパララックススクロールの効果に基づいて、Jarallax.jsというJavaScriptライブラリを使用して同一のページを作成します。

あなた個人のまたはクライアントのウェブサイトでこの素晴らしい効果を適用出来ます。

 

How TO – Parallax Scrolling

この効果を使用する上での不利になりうる点は、負荷時間とモバイル使用です。

この効果をマスターするために不可欠なこのステップチュートリアルを使用して、「パララックス」スクロール効果をCSSで正しく作成する方法を学びましょう。

 

Create a Masked Background Effect With CSS

パララックススクロールを使えば、デザイナーはユーザーエクスペリエンスの流れを無制限に制御できるようになり、記憶に残るだけでなく、ウェブページを限りなくインタラクティブで魅力的なものにします。

パララックススクロールのようなこのテクニックを、まだJavaScriptを使わずに学んでください。

このチュートリアルでは、CSSを使って簡単に行う方法を説明します。

 

How to Give Your Logo the “Slip Scroll” Effect

パララックススクロールを適切に使用すると、スクロールダウンした時に、明るくきれいに展開する美しいストーリーを作成できます。

このチュートリアルでは、JavaScriptを使用してシンプルなパララックス効果を作成します。

この効果では、ユーザーがスクロールするときに背景でロゴの色を変更します。

 

【セレキュトのおすすめpickup】
 
■クリエイターの実績、知識はあるけどいい仕事が見つからない方におすすめ!
 【レバテックフリーランス】
 ・案件数業界最大級、エージェントの理解が深い、発注額高、圧倒的低マージン、単価アップ交渉◎
 ・エンジニア勉強会の開催有り、就業後もサポート有り
 ・年収が上がったクリエイター多数
 ・案件)【Deep Learning】AIプロダクト開発の求人・案件/~900,000円/月 など
 ⇒レバテックフリーランスを見てみる
 
■今のクリエイター技術をもっと向上したい方におすすめ!
 【デジタルハリウッドSTUDIO by LIG】
 ・あのWeb制作のプロ集団「LIG」が運営の上野・池袋のWebクリエイター育成スクール
 ・6ヶ月で未経験からwebクリエイターへ、転職サポート◎
 ・映像教材はいつでもどこからでも受講可能
 ・LIG監修のオリジナル映像講座や特別LIVE授業など特典盛りだくさん!
 ・無料相談会受付中!
 ⇒デジタルハリウッドSTUDIO by LIGを見てみる

おすすめ新着記事

おすすめタグ