バックグラウンドと様々な画像、CSSで行う面白スクロールトリック

  • 2008/03/18
  • このエントリーをはてなブックマークに追加

スポンサーリンク

スクロールトリック

ページをスクロールするだけでこんなに感動したのは初めてだったので、思わず脊髄反射で記事に。
すごい長いページなんですが、ここまで無駄な遊びを提供するバックグラウンドは見た事が有りませんでした。
(どうやら透過pngを使っているようなので、firefoxで見たほうがいいかもしれない)
IT/Web業界に強い転職サイトGreen

姿形まで変えてみせるトリックにうっとり


バックグラウンドで、固定表示されている虹みたいな縦棒。
CSSによる背景のトリック


これが、色々と姿形を変えていきます。

画像をアップしようと思いましたが、感動が薄れてはここの作者に失礼なので、あとはご自信の目で確かめてみてください。

面白バックグラウンドトリックを使うサイト
The portfolio of Bryan Katzel



スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

ごろ太郎 おもしろーw

よくこんなの見つけてきましたねーw
遊び心に惚れぼれしました。

「play」をクリックしたときのシュ~という動く画面、
「top(へ戻る)」をクリックしたときもシュ~と戻る画面、
どうやって作るのか参考サイトあればどなたか教えてください。
(ソース見たけど全然わかんなかった…)

2008/03/19 Wed 12:09| |

すごすぎw zeroshiki

画面上部から下部まで一つのストーリーになってるみたいです。

2008/03/19 Wed 18:28| |

えど これはすごいですね!

はじめまして。
以前からこのサイトは見させて頂いていましたが、初めてコメントします。

このサイト、すごいですね!
ざっとしか見てないですが、PNGをうまくつかったサイト、って感じでしょうか。
こういう発想、ぜひ自分にもほしいです・・。

2008/03/21 Fri 09:52| |

kanazaki 面白いですね。

こんにちは。
上記のサイト面白いですね。
CSSでこんな面白いサイトが出来るとは、感心してます。
20回は上下してしましました^^;

参考になりましたありがとうございます

2008/03/24 Mon 17:54| |

もかり おもしろい~

これはたのしいですね~。
こんなにすてきにしてもらえている背景はじめてみました。

2008/04/05 Sat 04:04| |

ネス おもしろい~!でも…

サイトの中身に全然目が行かない罠w

見せ方としては面白いですけど、デザインとしてはイマイチな印象が正直なところ。
でも応用したら展開の幅が広がりそうです!

2009/01/13 Tue 16:56| |

トラックバック

この記事にトラックバックする人はクリック

links for 2008-03-18

バックグラウンドと様々な画像、CSSで行う面白スクロールトリック*ホームページを作る人のネタ帳 (tags: css) ...

World Invaders:2008-03-18 13:25

縦にスクロールするのが楽しくなるサイト

Yamadaさんの運営する「ホームページを作る人のネタ帳」に面白いサイトが紹介されていたので、ちょっと覗きに行ってみました。 記事へのリンクはこちら とても感動した! そして、思わず笑ってしまった。 ワクワクしてココロが揺れると笑いたくなるみたいw 久し...

+ galopine +:2008-03-19 19:53

08.03.17 透過pngのトリック。

湖面を反射させて芸術的な写真を作るPhotoShopチュートリアル (phpspot開発日誌) 簡単にできて、かなり見栄えが良いですね。メモメモ。 よ...

日々、ウェブデザインとネットニュースとゲームとか。:2008-03-19 21:28

バックグラウンドと様々な画像、CSSで行う面白スクロールトリック

ホームページを作る人のネタ帳さんからのトラックバックなんですが、 これはなかなか...

ALL AROUND THE WORLD:2008-03-21 01:36

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html