MADOGATARI展［SHAFT 40th ANNIVERSARY］
「魔法少女まどか☆マギカ」© Magica Quartet／Aniplex・Madoka Partners・MBS 「〈物語〉シリーズ」© 西尾維新／講談社・アニプレックス・シャフト 「ぱにぽにだっしゅ！」© 氷川へきる／スクウェアエニックス・ぱにぽに製作委員会 「キノの旅 -the Beautiful World-」© 時雨沢恵一／アスキー・メディアワークス／「キノの旅」製作委員会 「十二戦支 爆烈エトレンジャー」© I＆S 「メカクシティアクターズ」© じん／1st PLACE・メカクシ団アニメ製作部 「ニセコイ」© 古味直志／集英社・アニプレックス・シャフト・MBS 「電波女と青春男」© 入間人間／アスキー・メディアワークス／『電波女と青春男』製作委員会 「ef-a tale of memories.」© minori/「ef」製作委員会 「まりあ†ほりっく」© 2009 遠藤海成・
パララックスを使ったストーリー性のあるWebサイトまとめ | Goodpatch Blog
昨年度からWebサイトに取り入れられ始めたパララックス効果、現在でも取り入れられているWebサイトをよく見ます。実際にパララックスが取り入れられているWebサイトを実際に触って興味を持ったり、作成された方もいるのではないでしょうか。参考にできるパララックスを使ったサイトはたくさんありますが、今回はパララックス効果を上手く取り入れ、ストーリーを印象的に伝えているサイトをまとめてみました！ （参考: 15 Awesome Websites That Tell a Story As You Scroll） Every Last Drop http://everylastdrop.co.uk/ 私たちが起きてから寝るまでに使う水の量が視覚的にわかるWebサイトです。 Ben the Bodyguard http://benthebodyguard.com/index.php 写真やメモ管理アプリの
スマホ対応パララックス！簡単便利な skrollr の使い方 | 株式会社メイプルシステムズ
こんにちは、うっちーです。 先日、スマホ用サイトを作ってたのですが、パララックス効果を入れるのに四苦八苦したので、備忘録も兼ねてシェアしたいと思います。 Jqueryでパララックス 最初はJqueryを使って普通に作ってたんです。 こんな感じで。 ＜HTML＞
超簡単！フルパララックスサイトのプラグイン！ | ホームページ制作のLiruuDesign(リールーデザイン)！
WEB制作って そんなサラッと作れるものじゃなく・・・・ 構成やデザイン コンテンツの見せ方 使用する画像や文章 コーディングにSEO 進捗管理 ブラウザチェック などなど やることは山ほどあります。 サイト作るには、アイディアが湧くかどうかも関わってくるので、 個人的には期限設けられるといいものが出なくなります。 なので、余裕を持って制作に打ち込みたいのですが、 なぜかほぼ毎回スピードを要求されるため、 かなりの妥協と温度差を感じている次第でして・・・・。 たとえば、 「こんなサイトにしたいんだよねぇ~」 っと参考サイトを見てみると・・・・ こっこれはパララックスやんけっっ コンテンツの写真集めやライティング、デザインにコーディングにレスポンシブ対応に・・・・ めちゃんこだなぁ~ 「して・・・・」 「公開はいつ頃で？」 「う~んっ」 「今週中ねぇ！」 「・・・・」 「・・・・えっ？」 「
シングルページで魅せる、縦方向にパララックス効果を表現するjqueryサンプル | バニデザノート
１ページで魅せるポートフォリオサイト風の動きのなかで 最近よく見かけるパララックス効果を採用したデザイン。 今回は縦にスクロールする際に、 スクロールの速度をレイヤーごとに調整して 視覚的に速い部分と遅い部分が起こるようなチュートリアルがありましたので 紹介いたします。 ▼One page website, vertical parallax http://www.webdesignshock.com/one-page-website/ このチュートリアルは、nike better worldというNikeのサイトから インスピレーションを受けて作成されています。 なので、こちらも見ておくことをおすすめいたします。 デモはこちらから。 大事なのは初期のBOXの定義（ＣＳＳ）と それぞれのＢＯＸがどんな動きをするのか （今回だったら特にスクロールスピード）を確認しておくこと。 いまブラウザの
パララックス効果を与えてくれる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プラグインが紹介されています。今日はその中から
Merry Scrolling with skrollr.js
I have a weakness for scrolling effects, I haven’t got fed up with parallax and I don’t mind scrolling up and down and from right to left and see what happens. Recently I got impressed by the James Bond 007 Cars Evolution by Evans Halshaw. Don’t miss it if you haven’t already seen it on your desktop (the mobile experience is not the same). James Bond 007 Cars site uses a very nice plugin skrollr.j
パララックスサイトの作り方の初歩
最近パララックス（視差効果）を取り入れたサイトが増えてきました。 仕組みや簡単なものを作れるようにしておきたかったのでいろいろ試してみました。 ちなみにもっと効率良く作れる方法とかもあるかもしれませんので、一例ということで御覧ください。プラグインはまだ試したことがないので そちらを使ったほうが楽かもしれません。 パララックス効果のjQueryプラグインまとめ あと動作はこの記事時点でのFirefoxの最新版でしか確認はしていません。 スクロール量を取得する まずはスクロールすると動くので、スクロール量を取得します。ちなみにjQueryを使ってます。 $(function(){ $(window).scroll(function(){ var y = $(this).scrollTop(); $("#num").text("スクロール量：" + y);//表示用 }); }); サンプルペー
jParallax - webdev.stephband.info
All who wander are not lost! Why this site This site describes the travel experience of myself and my traveling companion and photographer... Paul (aka: my husband). We tend to avoid the snazzy places... like to stay closer to the people. If you like staying in the big American hotels to rub shoulders with other Americans, you won't like our style of travel. Most of our trips are planned via the
Welcome dangersoffracking.com - BlueHost.com
Bluehost - Top rated web hosting provider - Free 1 click installs For blogs, shopping carts, and more. Get a free domain name, real NON-outsourced 24/7 support, and superior speed. web hosting provider php hosting cheap web hosting, Web hosting, domain names, front page hosting, email hosting. We offer affordable hosting, web hosting provider business web hosting, ecommerce hosting, unix hosting.
Inzeit - Mobilizing Retail
Georg Jensen represents quality craftsmanship and timeless aesthetic design. And so must their mobile identity. Georg Jensen Georg Jensen wanted an application to present their beautiful line of watches in a modern yet aesthetic way. The app is built around the entire watch catalogue, with intuitive navigation and custom features such as Try it On. Furthermore, there is strong integration to both
[JS]奥行きを生み出す『パララックス』を簡単に実装できるスクリプト -Smart3D
複数の画像のスクロールのタイミングをずらして表示するパララックスを簡単に実装できるjQueryのプラグインを紹介します。 jQuery.Smart3D デモページ [ad#ad-2] パララックスはそれぞれのタイミングをずらして視差効果を生み出し、奥行き感を出すものです。 上記デモでは背景と人物の画像2枚をそれぞれマウスに合わせてずらして表示しています。 使用画像 5枚の画像を使用したパララックス Smart3Dの実装 一番最初に紹介したデモの実装方法です。 HTML 各画像をリスト要素で配置します。 <ul id="mindscape"> <li><img src=".../mindscape1.png" /></li> <li><img src=".../mindscape2.png" /></li> </ul> CSS スタイルシートでサイズを設定し、好みでborderなどのデザイン
jQuery scroll parallax plugin | Dave Cranwell
Update: examples now fixed!Parallax, for those not in the know, "is an apparent displacement or difference in the apparent position of an object viewed along two different lines of sight" (wikipedia). You'll perhaps know it better as "that sideways pan effect animators use where the distance moves slowly but layers of scenary nearer the 'camera' move quicker".It's become a popular effect on websit
Scrolling Parallax: A jQuery Plugin | Jon Raasch's Blog
Scrolling Parallax examples Simple scrolling parallax effect Multiple, layered parallaxes for a nice depth effect Parallax in all directions: vertical and horizontal scrolling Parallax called on a piece of inline HTML markup About Scrolling Parallax Scrolling Parallax is a new jQuery plugin that binds a parallax effect to the scrollbars and mouse wheel. This allows a background image or anything e
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Beatbox Blogging Academy
http://www.diaryofawimpykidmovie.com/
http://www.welldoneteamgb.com/
http://kuri.nifty.com/mock/201206/parallax/