タグ「パララックス」

タグパララックス

新着順人気順 5 users 10 users 50 users 100 users 500 users 1000 users

(1 - 25 / 63件)

縦や横に長いサイト「高級ペライチ」1度は見ておきたい超定番演出のまとめ32個！ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

2012/06/19 1735 users KAYAC DESIGNER Blog 愛称スクロール演出

HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。今回は「高級ペライチ」とググると1位に表示される、僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介... 続きを読む

HTML5 × CSS3 × jQueryを真面目に勉強 – #6 パララックスエフェクトの基本｜クラスメソッド開発ブログ

2012/10/16 761 users パララックスエフェクト parallax HTML ディ視界

そんな訳で、パララックス・スクロールについて少し学んでみたので、超初心者向け（※自分含む）のサンプルをいくつか紹介していきたいと思います。はじめに – パララックスエフェクトについてパララックス（parallax）を直訳すると視差です。視差効果とは、視界が移動する際に各物体がそれぞれ異なったスピードでスクロールすることで、奥行き間をはじめとした視覚効果を指します。アニメーションの世界ではディ... 続きを読む

スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net

2011/07/06 694 users NIKE パララックス効果メモスクロール複数

最近ちょくちょく見かけるようになったので調べた事をメモ。スクロールすると、複数要素が、それぞれアニメーションするような Webデザイン。視差効果を生み出すようなパララックス効果を取り入れたものや、ユニークにアニメーションするものなどなど。以前見たNIKEのプロモーションサイトでちょっと心惹かれたんですけど、特に最近よく見かける気がするのでいくつか参考にしたいサイトを探してみました。単なる... 続きを読む

[JS]jQueryのプラグイン100選 -2013年総集編 | コリス

2013/12/24 640 users jQuery コリスインタラクションスクリプトスマフォ

今年も数多くの素晴らしいjQueryのプラグインがリリースされました。当ブログで紹介したものをはじめ、未紹介のものまで、jQueryのプラグイン100+α選です。今年目立ったのは、アニメーションを使ったスクロール関連のスクリプト。スクロール前提の1ページサイト、パララックスなど、コンテンツをより大きなサイズで楽しむものが増えました。また、スマフォ・タブレットに大きく影響を受けたインタラクション... 続きを読む

シングルページなサイトをデザインする上で、知っておいて損は無いかもしれないプラグイン色々！ | バンクーバーのうぇぶ屋

2014/02/11 622 users バンクーバーうぇぶ屋プラグインフリップ型事例

最近多いですねー、1ページで完結するタイプのサイト。One Page Loveのサイトなんかから、シングルページの事例も大量に見ることが出来ますし、パララックスやらフリップ型のコンテンツやら、なんか色々出てきてて着いて行くのがやっとです… でも実際シングルページをつくろうとすると、え？何これどうなってんの？って物も多くてビビることもしばし。ってことで、今日は僕が知ってる中で『お、これ、シングルペ... 続きを読む

デザインの参考にもいい！レスポンシブ対応のHTML5/CSS3のテンプレートのまとめ | コリス

2013/12/02 419 users コリスミニマル随所エフェクトテンプレート

商用でも無料でいいの？というくらい美しくデザインされたHTML5/CSS3のテンプレートを紹介します。デザインだけでなく、ページ内に取り入れたエフェクトもなかなか面白いものが揃っていますよ。 Brushed デモミニマルなデザインが美しい1ページスクロール。パララックスの使い方、固定ヘッダの配置方法、ナビゲーションやパネルのエフェクトなど、随所にセンスが光ります。個人・商用利用無料。続きを読む

あぁこれがパララックス効果の使い方かと納得のパララックスWebデザイン7つ | Flips Blog Web担の小技

2014/01/25 392 users パララックス効果 Web担 Flips Blog 納得小技

今回は、パララックス効果を用いた結果、口コミで広がり、海外でもわりと多くのシェアを誇るサイトを7つご紹介。実は2014年のトレンドの一つとして、海外では表示速度をあげる六角形（蜂の巣）軽量化最小限モバイルファーストコンテンツ最優先表示というのが上げられていまして、もしかすると今年パララックスは減少傾向になると予測されています。しかし、コンテンツ最優先表示では、いまだパララックスが... 続きを読む

[JS]これスゴイよ！スクロール時にさまざまな楽しいエフェクトを与えるスクリプト -ScrollMagic | コリス

2014/03/09 381 users コリス jQuery スクリプトエフェクト div要素

スクロールに合わせて、さまざまなアニメーションをシンクロさせるjQueryのプラグインを紹介します。 Appleのプロダクトページのように次々に要素を表示したり、簡単にパララックスを加えたり、特定の要素をスクロール時にピンで留めて表示したりなど、スクロール系のエフェクトは全部できてしまう感じです。スマフォなどレスポンシブ対応はもちろん、水平スクロール、無限スクロール、div要素の内側のスクロール... 続きを読む

[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr | コリス

2012/05/06 366 users skrollr コリス head href link

skrollrのデモ：ウェブページ skrollrの使い方 skrollrはHTML5+CSS3で実装します。基本書式 skrollrを使用する際の基本書式は下記のようになります。「skrollr.css」はskrollrを使用する際のCSSの基本セットが記述されています。 <!DOCTYPE html> <html> <head> <title>タイトル</title> <link href... 続きを読む

[JS]スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ | コリス

2012/02/23 348 users jQuery コリススクロール面白いエフェクトバス

パララックスをはじめ、パスに沿ってスクロールさせたり、スクロールに合わせてパネルを表示するなど、スクロール時に面白いエフェクトを与えるjQueryのプラグインを紹介します。 scrollorama スクロールに合わせて、 [...] 続きを読む

[JS]スクロールするのが楽しくなる！多彩なパララックスのエフェクトを簡単に実装できるオープンソースのスクリプト -Jarallax | コリス

2012/10/16 326 users script src コリス jquery.js text

Loodsmedia ディスプレイ内のコンテンツもパララックスします。 Jarallaxの使い方「Demo 3」を例に、実装方法を簡単に紹介します。外部ファイル「jquery.js」と当スクリプトをhead内に外部スクリプトとして記述します。 <script type="text/javascript" src="jquery.js"></script> <script type="text... 続きを読む

パララックスサイトの基本的な作り方 1/2！｜ Web Design Magazine

2015/03/25 271 users パララックスサイト作り方 HTML 個々勢い

こんにちは〜！今回はパララックスサイトの基本的な作り方を紹介したいと思います。去年くらいから流行始めたパララックスサイト。今年になってもその勢いは止まりません。そんなパララックスサイトの基本的な作り方です。パララックス（視差効果）とはパララックス（視差効果）とは画像やテキスト等の個々の要素を別々に動かして視差効果で立体的にみせるテクニックです。準備をしよう！ htmlを用意します。 j... 続きを読む

[CSS]パララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアル | コリス

2014/08/20 235 users コリスチュートリアルエフェクト CSS レイヤー

ページ上のコンテンツを複数のレイヤーで構成し、それぞれを異なるタイミングでスクロールさせるパララックスのエフェクトをスクリプト無し、CSSで実装するチュートリアルを紹介します。デモはパララックスの構造を可視化できるので、より分かりやすいと思います。 Pure CSS parallax scrolling websites パララックスのデモパララックスの実装パララックスのデモデモは非常にシ... 続きを読む

【iOS7】フラットデザインUI実装に役立つライブラリのまとめ - Over&Out その後

2013/06/18 218 users iOS OSS Objective-C コンポーネントビュー

iOS, Objective-C, ライブラリiOS7で採用されたフラットデザインっぽいUIを、現行iOS（〜6.x）で実装する際に役立つOSSをまとめました。後半ではiOS7っぽく下のビューをブラーかけて半透過表示するライブラリや、パララックス表示するライブラリも紹介しています。 FlatUIKitフラットデザインなUIコンポーネント詰め合わせ。ソースをみると、ほとんどのコンポーネントが該当する... 続きを読む

[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D | コリス

2011/07/07 214 users コリス奥行きスクリプトデモ実装

パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。使用画像 5枚の画像を使用したパララックス Smart3Dの実装一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。続きを読む

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

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

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

パララックスを使ったストーリー性のあるWebサイトまとめ | MEMOPATCH

2013/05/16 198 users MEMOPATCH パララックス効果ストーリーたくさん

昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！（参考: ... 続きを読む

パララックスサイトを簡単に作成できるjQueryプラグイン8選｜skuare.net

2013/08/13 196 users パララックスサイト skuare.net Tweet 感じ

パララックスサイトを簡単に作成できるjQueryプラグイン8選 Tweet いまさらな気もしますが、パララックスなサイトを簡単に実現するためのjQueryプラグインを紹介します。 sponsors #1 Nikebetterworld Parallax Effect Demo | Ian Lunn 老舗な感じのところですね。 jQuery localscrollとか、jQuery scrollTo... 続きを読む

簡単パララックス入門。 jarallax.jsの使い方解説 | 株式会社LIG

2013/04/23 179 users 株式会社LIG ClickTale サリー使い方解説クセ

デスソース並に熱い、ヒートマップWEB解析ツールの紹介！「clicktale」が日本上陸 152526 こんにちは、デザイナーのサリーです。美味しそうなごはんの写真を見ると元気が出ます。 jsを書けない私が、いろいろとパララックスのjsを漁ってみて、一番書き方がシンプルでわかりやすそうだったのが「jarallax.js」でした。使ってみたら簡単でいい感じでしたが、ところどころクセがあって悩んだ... 続きを読む

パララックスもこれで簡単に！ HTMLやCSSを変更せずにシンプルに実装できるスクリプト -simpleParallax.js

2022/01/12 175 users エフェクト CSS ライブラリスクリプト実装

ユーザーのスクロール操作に合わせて視差効果を与えるパララックスのエフェクトをシンプルに実装できる軽量のバニラJavaScriptのライブラリを紹介します。実装は非常に簡単で、HTMLやCSSを変更せずに、パララックスのさまざまなエフェクトを実装できます。 simpleParallax.js simpleParallax.js -GitHub simpleParallax... 続きを読む

[JS]パララックス、スライドなど、スクロール時のエフェクトをよりスムーズにしたスクリプト -SuperScrollorama | コリス

2012/05/27 172 users コリストゥイーンエフェクトスクリプト jQuery

パララックスをはじめ、フェードやスライド、トゥイーンなど、多種多様なアニメーションに対応している、「スクロール時に面白いエフェクトを与えるjQueryのプラグインのまとめ」で紹介した「scrollorama」を強力にパワ [...] 続きを読む

タブやアコーディオン、パララックスなどを実装出来るjQueryベースのUIツールキット・jKit - かちびと.net

2013/01/05 147 users アコーディオンバリデーション御挨拶喪中マー

jQueryベースのUIツールキット・jKit のご紹介です。タブやアコーディオンなどの良く使われるものから、簡易的なパララックスやバリデーション、ズーマーなどなど多機能なUIキットとなっています。 2013年になりました。喪中により新年の御挨拶を控えさせて戴きます。皆様に取って本年が充実した年でありますようお祈りいたします。さて、今日はUIキットのご紹介。jQueryベースとなっていま... 続きを読む

[JS]パララックスもApple風スライダーもOK、エレメントごとに動作が設定できるスライダー -Sequence.js | コリス

2012/02/20 143 users コリスセマンティック jQuery スライダースラ

普通のかっこいいスライダーだけでなく、パララックスを使ったスライダー、AppleのiPhoneページに使用されているようなスライダーなどを簡単に、そしてセマンティックに実装できるjQueryのプラグインを紹介します。 Sequence.jsの特徴 Sequence.jsのデモ Sequence.jsの使い方 Sequence.jsの特徴エレメント単位で設定できるCSS3アニメーションを使ったスラ... 続きを読む

CSSでの実装が今までとは大きく変わる！スクロールをトリガーにしたアニメーションを実装する方法

2023/07/13 132 users トリガー CSS スクロールアニメーション実装

まもなくリリースされるChrome 115で実装されるScroll-driven animationsにより、スクロールをトリガーにしたアニメーションの実装方法が大きく変わります。スクロールすると要素がアニメーションで表示されたり、スクロール量で変化するインジケーター、背景が変化するパララックスなど、実装がそれなりに手間がかかり... 続きを読む

(1 - 25 / 63件)

次の25件 »