Blog

前から気になっていたwebサイトの表現を試してみた…

2017.08.09Cat:css3 プログラマー

日々webサイトを見ている中で、「この表現どうやっているんだろう」、「やってみたいな」というのを試してみました。

本来やろうと思っていたのは縦長ページだけど、1コンテンツずつ切り替るような、
光岡自動車
デンソー ブランドサイト
こういったサイトみたいなのです。

このような動きをするプラグインはfullpage.jsで出来る感じはするんですが、
プラグインを使わずにやってみたかったのですが、時間の関係で今回はjsは辞めてcssだけでやることになったのでちょっと妥協してしまった形になります。
fullPage.js

とりあえずDEMOサイトはこちらになります。

DEMO

demoはパパパッと作ったので見た目、ソースはキレイではありません。
そして中身は弊社サイトのコンテンツを流用しております。

あと細かい解説等はしておりませんのでご了承下さい。。。

デンソー ブランドサイト


先程も紹介しましたが、このサイトはスクロールした時の動きがスゴいですね!

見てみるとtransformのmatrixを使用しており、jsで操作しているようなので
cssだけではおそらく出来ないので今回は辞めました。

扉が開くようなアニメーションを設定してみました。
アニメーションをしたいがために、コンテンツの遷移をスクロールでできないものになってしまいました…

(サイトとしては使いにくいものになってしまいました…)

右にある◯で遷移するようになっております。

この切替はradioボタンを使用していて、右の◯をlabelにしてradioボタンをチェックさせ、
そのチェックに応じてsectionを切り替えて形になります。

cssだけ記述しておきます。

matrix3dを負けじと使ってみたもののなかなか難しいです…

デンソー ブランドサイト

Uber Design


このサイトのSP時のナビゲーションをやってます。

demoではjsを使っておりませんので、
このメニューもcssのみで、checkboxを使って開閉しています。
動きはtransitionです。

DEMO/html

DEMO/css

Uber Design | Get To Know Design At Uber

魔女の宅急便 | HUNGRYDAYS アオハルかよ。


説明文とかの文章がブワっと表示されるやつを真似してみました。
DEMOでは右の◯の3つめの「世界をもっと身近に」の箇所になります。

html

css

filterでblurをかけてそれを開いた時に無くす感じですね。

魔女の宅急便

株式会社八百彦本店


このサイト動きがスゴいですよね〜…
このサイトの中盤あたりのこだわりと歴史の部分の入れ替わる部分をやってみましたが、
今回cssのみなので、それっぽい感じになってしまいました。

右の◯4つめのサービスでやっています。
これはキーフレームのアニメーションを使っています。

cssが長いので割愛します笑

株式会社八百彦本店

終わりに

いくつかやってみましたが、
結局は、transition,transform等を使用するものなので、アイデア次第で無限にいろんな動きができますね。
jsと絡めればさらに幅広く設定出来る様になるかと思います。

次は、次こそは、スクロールの動きをやってみたいと思います。

Author Profile

Y.A
Y.A
アベと申します。 ディレクター兼デザイナー兼コーダーです。 まだまだ未熟者ですが、日々頑張っています。。。
» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ