[PR] 不動産担保ローン マウスのウィールで横スクロールする | 素人ときどき玄人
<< コレってなんて読むの? | main | レゴっぽいものづくし >>
スポンサーサイト

一定期間更新がないため広告を表示しています

カテゴリ:- | | - | - | -
マウスのウィールで横スクロールする
JUGEMテーマ:ウェブデザイナー



カイタッチ KAI TOUCH Project!
http://www.kai-group.com/jp/kaitouch/



この↑サイトを見た瞬間驚きました。



ウィールで、なんで横に動くの??このサイト。





ウィールって何?って方の為に解説しましょう!
マウスに右クリック用のボタンと左クリック用のボタンがありますよね?
その真ん中にくるくる回る物体が居ますね??(居ない人もいるかも。。。)
それをウィールと言います。(ホイールとも言います)

特に設定をいじらない限りそこを回すと上下にスクロールすると思います。
でも、上記サイト上では左右にスクロールします。
お試しください。


で、さらに驚くことがもう一点。
なんと、


フォントが縦書き。


画像部以外もですよ!!!

すごい。

ちゃんと左からスクロールされるし、イラストも可愛いし。。。脱帽。
みれば見るほど日本人ならではのサイト構成ですな。
さらにFlashではなくjavascriptで作成されていましたよ。


そんなことまでじゃばすくりぷとはできるのね!
(縦書きもjavascriptでした)
知らなかったよ。。。
君はどんどん成長していくね。


興奮ついでに同じように横スクロールしちゃうサイトを調べてみました。


ソニック・ザ・ヘッジホッグ4 エピソードI(SEGA)
http://sonic.sega.jp/SonicTheHedgehog4/
ロゴとヘッダーメニューが後からついてくる動きも可愛い

Dean Oakley
http://deanoakley.com/
英語のサイトです。ポップで可愛いデザインがまた目を引きます。

がばったー
http://govtter.openlabs.go.jp/hokkaido/
HootSuiteを思い起こすようなデザインです。
場所によっては縦スクロールになったりします。



解説ページもご紹介


レッド ワン red-one
横スクロールするスクリプト 〜横長デザインのために〜
カイタッチで使われているjavascriptの解説ページです。

コエカタマリン MX 2007
Horizontal Tiny Scrolling クロスブラウザ修正版

PHPSPOT開発日誌
JavaScriptでマウスホイールイベントを扱い、スクロールも停止する方法


Horizontal Tiny ScrollingというMarco Rosellaさんが作った
メソッドがベースになっているみたいですが、解読して修正して
更に良いもの(この場合はどのブラウザでも対応できる良いもの)
作り変えられた方もかなり素晴らしいです。

感謝とお礼の気持ちを込めて使わせていただきます



【番外編】

この↓サイトは(フル)フラッシュで作られていますがフッターの羊さんの
動きがあまりにも可愛いのでご紹介

BBH
http://www.bartleboglehegarty.com/
マウスの動きに合わせて頭が動くところも見逃しちゃダメですよ♪
カテゴリ:javascript | 02:18 | comments(2) | trackbacks(0) | -
スポンサーサイト
カテゴリ:- | 02:18 | - | - | -
コメント
まぁ、ご担当者様からコメント頂けるなんて光栄です♪
訪問ありがとうございます!

強烈なファーストインプレッションでしたよ。
「左上基準がWEBサイト」を見事に崩していると思いました!でも日本人でないとこの仕様にしようと思わないよねっ!!ってHPに向かって思わず話しかけてしまいましたわ。
怪しいヤツで、すみません(笑)

私もデジタルの世界にどっぷり浸っていますが、アナログ感大好きです。
なので同じく「あえて汗をかく方法」選んじゃいます。同類発見♪(笑)
Flashよりもjavascriptで実現するところもとても好感持ちましたよ!!
縦書きもjavascriptで実現できると知って、とっても勉強になりました。

リンク貼って頂けるんですか!?ありがとうございます!!
カイタッチできるよう部屋中物色してみます('◇')ゞ
| 素人ときどき玄人 | 2011/01/15 1:48 AM |
befineさん、はじめまして!
カイタッチ・プロジェクト!担当者のゆきです。

このたびは、弊社サイトをご紹介いただき、
ありがとうございます!
また、コメントさせていただくまでに
お時間をいただきまして大変申し訳ございませんでした。

わたくし、ゆきが「横レイアウト」について、
コメントさせていただきます。

今回、サイトを作成する上で「サイトに留まるかどうかの判断」という
せっかくのファーストインプレッションを逃したくないという思いのもと
「横レイアウト」を採用させていただきました。

それは人間の「道理に合わないものや統計にないものに出くわすと解決しようという行動をとる」という
特性を意識したものなんです。

「左上基準がWEBサイト」という見慣れた統計がくずれた構成に
一瞬とまどわれる方もいらっしゃるかもしれませんが、
befineさんに「日本人ならではのサイト」と評価していただいたように、
日本の国語の教科書と同じ展開ですから、馴染みはあるのではないかと思います!

それから、このプロジェクトと同じ「アナログ感」も大切にしています。
Flashのほうがきっと早かったのですが
HTMLでわざわざ縦組みにして、今思うと要所要所、
あえて汗をかく方法を選んでいるような気がします(笑)。

ではでは、もしご自宅に隠れている貝印をみつけた際には
わたくしどもに教えてくださいね♪
そのときはあらためてまたカイタッチさせていただきに参ります!

※弊社サイトからリンクを貼らせていただきますが、
不都合などありましたらご連絡下さい。
| カイタッチ・プロジェクト!担当者 | 2011/01/11 10:33 AM |
コメントする









この記事のトラックバックURL
http://befine.jugem.jp/trackback/106