Control Films

Webデザイン３つの良いとこ : 3 Good Point!

1. アクションに対してスラっと動くスクロール
2. ホバーでvideoタグ発動
3. コンパクトにページ内遷移でまとめる

私はWebデザインのココを見た！

• Tweet
• 

スラっとしたスクロールが特徴のWebデザイン。スクロールを行うと下にスラっと移動して要素が消えてしまったり、ホバーでビデオ再生が行われるなど、面白い手法が用いられているWebデザイン事例です。

スクロールで要素が消える

サイト訪問してすぐに、スクロールが促され、スクロールすると下にスルっと遷移し、今まで観ていた要素は消えてしまう。という面白い演出が行われます。

ちょっとどうやってるんだろう。と思ったのですが、この３つをうまいことスクロールにフックさせる形でうまいことやっているのかな？

remove([expr]) – jQuery 日本語リファレンス

ページ内を自在にスクロール | よく使うjQuery

スクロールをトップから少しでもしたら位置を読み取って、上記の２つを発動。指定した箇所までスクロールさせながら、トップにある要素をremoveさせる。という方法でしょうか。

ちょっと完璧にどうやるかわからないので、ぜひ教えて頂きたいところです。。

このWebデザインでは、そのスクロールがとても俊敏で心地いい。ページ内遷移を多様するサイトならではの心がけですね。

ホバーでvideoタグ発動！

ホバーした際のアクションが面白い。ホバーしたら画像が切り替わるっていうのはよくありますが、ホバーしたら画像が動き出す。っていうのは珍しいですよね。これは動画を扱うサイトならではのUXデザイン。

これは以下のようにjavascriptで実装できるようです。

var vid = document.getElementsByTagName("video");
[].forEach.call(vid, function (item) {
 item.addEventListener('mouseover', hoverVideo, false);
 item.addEventListener('mouseout', hideVideo, false);
});

function hoverVideo(e)
{
 this.play();
}
function hideVideo(e)
{
 this.pause();
}

HTML5 Multiple Video Display – Hover Over to Play

Control Filmsで実装されている方法とは異なると思いますが、上記を用いれば意外と簡単に実装可能のようですね。

ページ内遷移でサイトをコンパクトにまとめる

このサイトでは、映像制作会社として、制作した映像をリストとして並べていますが、ほぼ全てページ内遷移でリンク移動します。

このおかげですごいサイトがコンパクトに収まっている気がします。そしてページ内リンクも、訪問時と同じくスラっとしたスクロールでの遷移ですので、気持ちが良いですねー。

簡単なコンテンツならば、わざわざページ移動する必要はない。というのはこれからもっと主流になってきそうです。今までもいくつかそんなサイトがありました。

スクロールで魅せる！文字数を多く感じさせないWebデザイン

マガジンスタイルを１ページに収める！ページ遷移が一切ない技が詰まりまくったWebデザイン

他にも多くありましたが、面倒な遷移は、ユーザー離脱率の増加に繋がる要因でもあります。それを軽減することは結果直接的に利益に繋がることは多いですよね。

出来るところはとことんやる。そんなWebデザインへの意気込みが聞こえてくるWebデザインでした。参考になりました！

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•