ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。
15 Awesome Websites That Tell a Story As You Scroll
This post showcases 15 sites that take parallax scrolling to the next level by combining CSS animations and JavaScript to manipulate page elements upon scroll to immerse the user into a developing story. As new CSS properties are becoming widely supported, designers are combining tools to create amazing websites that were once only feasible in Flash. Check out these outstanding designs and start s
パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」
TOP > javascript , WebDesign > パララックス効果を与えてくれるjQueryプラグイン「7 Useful Parallax jQuery Plugins」 2013年のWEBでは大きく活躍していたパララックス効果。視差効果によってもたらされる体験は、今までのWEBとはまた違った感覚を与えてくれました。今回紹介するのはそんなパララックス効果を簡単に利用できるプラグインをまとめたエントリー「7 Useful Parallax jQuery Plugins」です。 7 Useful Parallax jQuery Plugins 手前と奥にオブジェクトを設置し、遠近感を持たせて画面に奥行きをもたせるものから、スクロールによって背景と手前のオブジェクトを動かす定番のものまで様々なパララックス効果を得られるjQueryプラグインが紹介されています。今日はその中から
一味違ったパララックスを実装するスクリプト -Parallax.js | コリス
シンプルな実装で、ウェブページに奥行きを与えるパララックスを実装するjQuery/Zeptoの軽量プラグインを紹介します。 スマフォやタブレットの傾きに対応しているだけでなく、摩擦係数なども設定できるので、一味違った面白いことができそうですね。 Parallax.js Parallax.js -GitHub Parallax.jsのデモ Parallax.jsの使い方 Parallax.jsのデモ パララックスは複数の画像を異なるタイミングで動かして視差効果を生み出すもので、デモは奥行きの表現がすごいので少し酔うかもしれないのでご注意ください。 iPadだと傾けるだけで、ゆらゆらと Parallax.jsの使い方 Step 1: 外部ファイル jquery.jsと当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js"></script>
28 amazing parallax scrolling sites
Have you ever looked at a beautiful website but thought, “I hate those colors?” No? Of course, not. That’s because colo…
パララックス効果で魅せる縦に長いウェブページ | Accessible & Usable
公開日 : 2012年11月26日 (2015年12月14日 更新) カテゴリー : ユーザビリティ / アクセシビリティ 最近、パララックス効果 (parallax scrolling effect) を採り入れた、縦に長いウェブページが注目を集めています。以下の例のように、ページをスクロールしてゆくと、それに呼応して複数の視覚要素が個別に動くことで視差を作り出し、奥行き感や動きを演出する、というものです。 実際の動きを動画キャプチャしてみました。クローズドキャプション (字幕) で補足説明 (動きの解説) も用意してあります。 Anna Safroncik (http://annasafroncik.it) この効果をうまく用いれば、ユーザーの関心を惹きつける (エモーションを刺激する) ことができ、一定時間、ページに滞留してもらえることが期待できます。面白い視覚効果であれば、行きつ戻
Destaque Slideshow Demo
jQuery Destaque Plugin A slide prestentation plugin with a built in paralax effect. This is a example page, for full documentation and details, see The Github README file Simple slides example: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed lacus vel mi imperdiet mollis. Nulla at nisi quam, at porta magna.
スクリプト初心者でも簡単にパララックスのエフェクトを作成できるオンラインサービス -Parallax Background Builder
複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を生み出すパララックスを簡単に、そして確認しながら作成できるオンラインサービスを紹介します。 JavaScriptやCSSの初心者でも簡単にできると思います。 Parallax Background Builder Parallax Background Builderの使い方をざっくりと説明します。 Step 1: 適用範囲の選択 まずは、パララックスの適用範囲を選択します。 左がページ全体、右がdiv要素のみ、です。カーソルを動かすとパララックスの動作が分かります。
パララックスWebデザインまとめ(+無料プラグイン9個)
パララックス効果(英: parallax effect)をご存知ですか。 別名「視差効果」とも呼ばれ、Webデザインで利用されている、エフェクトのひとつです。 複数のイメージ画像のスクロールするスピードを調整することで、奥行きのある立体的な空間を生み出す、アニメーションを得意としたエフェクトとなります。 今回は、海外デザインブログfavbulousで、比較的新しく公開された、パララックス効果を利用したWebサイトを14個まとめたエントリー「14 Impressive Parallax Scrolling Website Showcase Inspiration」が公開されていたので、こちらを中心に、パララックス効果全般についてまとめています。 一緒にパララックス効果に使える、無料プラグインなどもまとめていますので、Webサイト制作に活用してみてはいかがでしょう。 詳細は以下から。 パララッ
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！
HTML+CSS+JavaScriptでつくるサイトの定番演出「高級ペライチ」！ HTMLファイ部の「HTML5の鬼」ことほんだです。 カヤック社内では「高級ペライチ」という愛称で呼んでいる縦や横に長い1ページサイト。 スクロールに合わせたパララックスやアニメーションの演出が印象的ですよね。 今回は「高級ペライチ」とググると1位に表示される、 僕のはてブ「高級ペライチ」タグから厳選32サイトを紹介します！ まずは王道！縦に長い高級ペライチ
Showcase Of 30 Stunning Parallax Scrolling Websites - Lava360
Parallax scrolling is a unusual scrolling technique in computer graphics, popularized in the 1982 arcade game Moon Patrol. But now a day’s parallax scrolling is over coming in websites. This cool effect is now commonly seen as part of the scrolling feature of web pages. In this post we collected some of the best Parallax web designs for you. We are sure that after viewing our article you will defi
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
30 Great Websites with Parallax Scrolling
The parallax effect has been around for years in classic video games, but it became a trend in the web design world. This cool effect is now commonly seen as part of the scrolling feature of a web page. It uses multiple backgrounds which seem to move at different speeds to create a sensation of depth (creating a faux-3D effect) and an interesting browsing experience. Nearby objects have a larger p
Parallax Content Slider with CSS3 and jQuery | Codrops
A simple parallax content slider with different animations for each slider element and a background parallax effect. Today we want to share a simple parallax content slider with you. Using CSS animations, we’ll control the animation of each single element in the slider and create a parallax effect by animating the background of the slider itself. The idea for this comes from the slider of the Kend
Web Designing
Java Script、パララックス効果の仕掛けがもたらす新鮮な驚き スクロール芸でサイトがもっと楽しくなる。 特集記事に掲載したスクロール芸サイトのリンク集を公開します。 誌面の解説記事だけではわからない動きの演出を、ぜひ訪問して確かめてみてください。 P056〜P057「最新・スクロール芸ギャラリー」 ikiji Web is beautiful Unfold 東京タワーズ | Tokyo Towers Soleil Noir 2012 Manufacture d’Essai Balloon TEDxPortland jitto Netlash bSeen P058〜P069「あのスクロール芸を種明かし！」 Freestyle-Night Online Portfolio von Jan Ploch レッドドラゴン（星海社「最前線」） Nike Better World Nizo 鎌倉
[JS]要素の一つひとつを異なるタイミングでスライドさせる、パララックス対応のコンテンツスライダー
jQueryとCSS3アニメーションを使った、パララックス対応のコンテンツスライダーを実装するチュートリアルを紹介します。 Parallax Content Slider with CSS3 and jQuery [ad#ad-2] デモ 実装 デモ 一枚のスライドには、h2要素、パラグラフ、リンク、画像が配置されており、それぞれが異なるタイミングでスライドします。 分かりにくいかもしれませんが、背景もアニメーションで動いています。 Kendo UI こちらも当然パララックス対応のコンテンツスライダーです。 こっちの方が背景がはっきりしてるので、その動作を楽しめると思います。 実装 実装は各ポイントとなる箇所を説明します。 HTML スライダーは複数のスライドを含んでおり、それぞれのスライドにh2要素、パラグラフ、リンク、画像を含んでいます。 <div id="da-slider" cla
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://webdesignmatome.com/webdesign/parallax_jp
INCEPTION – パララックス効果を実装したサイト – creamu
スクロールに応じて要素がアニメーションする、視差効果（パララックス）を取り入れたWebデザイン例とTipsいろいろ - かちびと.net