前から気になっていたwebサイトの表現を試してみた…
日々webサイトを見ている中で、「この表現どうやっているんだろう」、「やってみたいな」というのを試してみました。
本来やろうと思っていたのは縦長ページだけど、1コンテンツずつ切り替るような、
光岡自動車
デンソー ブランドサイト
こういったサイトみたいなのです。
このような動きをするプラグインはfullpage.jsで出来る感じはするんですが、
プラグインを使わずにやってみたかったのですが、時間の関係で今回はjsは辞めてcssだけでやることになったのでちょっと妥協してしまった形になります。
fullPage.js
とりあえずDEMOサイトはこちらになります。
demoはパパパッと作ったので見た目、ソースはキレイではありません。
そして中身は弊社サイトのコンテンツを流用しております。
あと細かい解説等はしておりませんのでご了承下さい。。。
デンソー ブランドサイト
先程も紹介しましたが、このサイトはスクロールした時の動きがスゴいですね！
見てみるとtransformのmatrixを使用しており、jsで操作しているようなので
cssだけではおそらく出来ないので今回は辞めました。
扉が開くようなアニメーションを設定してみました。
アニメーションをしたいがために、コンテンツの遷移をスクロールでできないものになってしまいました…
(サイトとしては使いにくいものになってしまいました…)
右にある◯で遷移するようになっております。
この切替はradioボタンを使用していて、右の◯をlabelにしてradioボタンをチェックさせ、
そのチェックに応じてsectionを切り替えて形になります。
cssだけ記述しておきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 | .page { height: 100%; width: 100%; position: absolute; z-index: 10; top: 0; left: 0; opacity: 0; -webkit-transform:matrix3d(0,0,1.00,-0.0004,0.00,0.6,0.00,0,-1,0,0,0,0,0,0,1); -moz-transform:matrix3d(0,0,1.00,-0.0004,0.00,0.6,0.00,0,-1,0,0,0,0,0,0,1); -ms-transform:matrix3d(0,0,1.00,-0.0004,0.00,0.6,0.00,0,-1,0,0,0,0,0,0,1); -o-transform:matrix3d(0,0,1.00,-0.0004,0.00,0.6,0.00,0,-1,0,0,0,0,0,0,1); transform:matrix3d(0,0,1.00,-0.0004,0.00,0.6,0.00,0,-1,0,0,0,0,0,0,1); transform-origin: right top 0px; transition: opacity .5s linear .3s,transform .5s linear 0s; } #pageSelect1:checked ~ .page:nth-of-type(1), #pageSelect2:checked ~ .page:nth-of-type(2), #pageSelect3:checked ~ .page:nth-of-type(3), #pageSelect4:checked ~ .page:nth-of-type(4), #pageSelect5:checked ~ .page:nth-of-type(5){ opacity: 1; z-index: 20; -webkit-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); -moz-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); -ms-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); -o-transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); transform:matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1); } |
matrix3dを負けじと使ってみたもののなかなか難しいです…
Uber Design
このサイトのSP時のナビゲーションをやってます。
demoではjsを使っておりませんので、
このメニューもcssのみで、checkboxを使って開閉しています。
動きはtransitionです。
DEMO/html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <header id="header"> <input type="checkbox" id="gNaviTrigger" name="gNaviTrigger" class="gNaviTrigger"> <label for="gNaviTrigger" class="btnGnavi"><span></span></label> <nav class="gNavi"> <ul><li class="navi01"><a href="#">Home </a></li><li class="navi02"><a href="#">Message </a></li><li class="navi03"><a href="#">Service </a></li><li class="navi04"><a href="#">Aboutus </a></li><li class="navi05"><a href="#">Recruit </a></li><li class="navi06"><a href="#">Blog </a></li><li class="navi07"><a href="#">News </a></li></ul> </nav> <!--//header --></header> |
DEMO/css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 | #header { width: 100%; position: absolute; top: 0; left: 0; z-index: 1000; } .gNaviTrigger { display: none; } .btnGnavi { position: absolute; top: 0px; right: 0; width: 60px; height: 60px; cursor: pointer; background-color: #fff; } .btnGnavi span { position: absolute; right: 15px; top: 26px; } .btnGnavi span, .btnGnavi span:before, .btnGnavi span:after { display: block; width: 30px; height: 4px; background-color: #000; } .btnGnavi span:before, .btnGnavi span:after { content: ""; position: absolute; } .btnGnavi span:before { top: -10px; } .btnGnavi span:after { top: 10px; } .gNaviTrigger:checked ~ .btnGnavi span { background-color: rgba(255, 255, 255, 0); } .gNaviTrigger:checked ~ .btnGnavi span:before { top: 0; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); -webkit-transition: top 300ms,-webkit-transform 300ms 300ms; transition: top 300ms,transform 300ms 300ms; } .gNaviTrigger:checked ~ .btnGnavi span:after { top: 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); -webkit-transition: top 300ms,-webkit-transform 300ms 300ms; transition: top 300ms,transform 300ms 300ms; } .gNavi { width: 300px; position: absolute; top: 60px; right: -300px; -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; background-color: #fff; padding: 20px; } .gNavi a { color: #000; text-decoration: none; font-size: 24px; display: block; padding: 10px 0; opacity: 0; -webkit-transition: all .6s; -webkit-transform: translate(4px,-8px); -moz-transform: translate(4px,-8px); -ms-transform: translate(4px,-8px); -o-transform: translate(4px,-8px); transform: translate(4px,-8px); } .gNaviTrigger:checked ~ .gNavi { display: block; right: 0px; } .gNaviTrigger:checked ~ .gNavi a { opacity: 1; -webkit-transform: translate(0px,0px); -moz-transform: translate(0px,0px); -ms-transform: translate(0px,0px); -o-transform: translate(0px,0px); transform: translate(0px,0px); } .gNaviTrigger:checked ~ .gNavi li:nth-child(1) a { -webkit-transition-delay: 160ms,160ms; transition-delay: 160ms,160ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(2) a { -webkit-transition-delay: 240ms,240ms; transition-delay: 240ms,240ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(3) a { -webkit-transition-delay: 320ms,320ms; transition-delay: 320ms,320ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(4) a { -webkit-transition-delay: 400ms,400ms; transition-delay: 400ms,400ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(5) a { -webkit-transition-delay: 480ms,480ms; transition-delay: 480ms,480ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(6) a { -webkit-transition-delay: 560ms,560ms; transition-delay: 560ms,560ms; } .gNaviTrigger:checked ~ .gNavi li:nth-child(7) a { -webkit-transition-delay: 640ms,640ms; transition-delay: 640ms,640ms; } |
Uber Design | Get To Know Design At Uber
魔女の宅急便 | HUNGRYDAYS アオハルかよ。
説明文とかの文章がブワっと表示されるやつを真似してみました。
DEMOでは右の◯の３つめの「世界をもっと身近に」の箇所になります。
html
|
1 2 3 4 5 6 7 8 | <div class="content"> <h2>世界をもっと身近に</h2> <p>時代は規模の経済から価値の経済へ移行します。<br> これからは多数の中小企業が洗練された価値をブランディングし、次々と世界に進出していく時代です。<br> 私たちは、インターネットを軸にした技術とノウハウによって、<br>世界進出する中小企業のリスクを最小化し、成果を最大化する仕組みを追求しています。<br> 国境を意識せず手軽に世界に挑戦できる仕組み = 世界をもっと身近に感じられるシステムとスキームの構築<br>に邁進しています。</p> </div> |
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | .page--world .content h2, .page--world .content p { filter: blur(50px); -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; } #pageSelect3:checked ~ .page:nth-of-type(3).page--world .content h2{ filter: blur(0px); transition-delay: 800ms,800ms; } #pageSelect3:checked ~ .page:nth-of-type(3).page--world .content p { filter: blur(0px); transition-delay: 1100ms,1100ms; } |
filterでblurをかけてそれを開いた時に無くす感じですね。
株式会社八百彦本店
このサイト動きがスゴいですよね〜…
このサイトの中盤あたりのこだわりと歴史の部分の入れ替わる部分をやってみましたが、
今回cssのみなので、それっぽい感じになってしまいました。
右の◯4つめのサービスでやっています。
これはキーフレームのアニメーションを使っています。
cssが長いので割愛します笑
終わりに
いくつかやってみましたが、
結局は、transition,transform等を使用するものなので、アイデア次第で無限にいろんな動きができますね。
jsと絡めればさらに幅広く設定出来る様になるかと思います。
次は、次こそは、スクロールの動きをやってみたいと思います。
Author Profile
スターフィールド編集部
SHARE
