デザイン案検討中に思いつき、できるかなと思って試したら案外すんなりできたので、一応メモとして。
この記事に設定していますので、サンプルを確認したい場合はリロードをお願いします。
実現したいこと
冒頭で書いたように既にご覧いただけているわけですが、実現を目指したのは以下のような事柄です。
- 疑似要素を使い、CSSアニメーションでカーテンのように動かす
動作を見てもらえばわかりますが、少しはカーテンぽいかな、という出来映えです。
コード
以下がコードですが、まずはHTMLから。
<body>
<div id="wrap">
<!-- コンテンツなどサイトの中身 -->
</div>
</body>
当ページはbodyに直接やってしまっていますが、一応ラッパー要素を作る前提で進めます。
続いてCSS。
#wrap::before,#wrap::after{
position: fixed;
z-index: 1;
top: -15%;
display: block;
visibility: hidden;
width: 50%;
height: 130%;
content: '';
background-color: #85c6bf;
}
#wrap::before{
left: 0;
animation : curtain_l 3s;
-webkit-animation : curtain_l 3s;
}
#wrap::after{
right: 0;
animation : curtain_r 3s;
-webkit-animation : curtain_r 3s;
}
@keyframes curtain_l{
0%{visibility: visible;}
20%{transform: rotate(0deg) translateX(0%); background-color: #85c6bf;}
60%{transform: rotate(6deg) translateX(-50%);}
80%{opacity: 1;}
100%{transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_l{
0%{visibility: visible;}
20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #85c6bf;}
60%{-webkit-transform: rotate(6deg) translateX(-50%);}
80%{opacity: 1;}
100%{-webkit-transform: rotate(0deg) translateX(-100%); opacity:0; visibility: hidden;}
}
@keyframes curtain_r{
0%{ visibility: visible;}
20%{transform: rotate(0deg) translateX(0%); background-color: #85c6bf;}
60%{transform: rotate(-6deg) translateX(50%);}
80%{opacity: 1;}
100%{transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}
@-webkit-keyframes curtain_r{
0%{visibility: visible;}
20%{-webkit-transform: rotate(0deg) translateX(0%); background-color: #85c6bf;}
60%{-webkit-transform: rotate(-6deg) translateX(50%);}
80%{opacity: 1;}
100%{-webkit-transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}
仕組みは単純で、疑似要素を左右に動かしているだけです。
疑似要素の大きさは、色面の切れ目が見えない程度に大きければよいかなと適当に決めています。
環境や実際の動作確認時に要調整ということで。
なおアニメーションの指定は省略したり、逆に過剰な部分もあるかと思いますので、不具合がでるようなら適宜修正が必要かもしれません。
カーテンのような表現
カーテンぽい感じに見せるための処理として、以下のような点を意識しています。
- 動き、角度、色の明るさを段階的に変化させる
上記は一例であり、「何をもってカーテンに見えるのか？」という点を考えると、例えば以下のような手段や表現も考えられます。
- CSSグラデーションでシワや襞っぽい表現を追加する
- 移動(translateX)ではなく横幅の縮小(scaleX)を行う
- 画像を使う
- box-shadowで陰を付ける
もっとも、表現を盛り込みすぎれば表示の負荷が高まると思いますので、適度なところでやめておいた方がよいかもしれません。
Chromeの開発者ツールを開いているとちらつく
今回のサンプルですが、Chromeの開発者ツールを開いて見ていると、薄く白い縦方向のラインが右端に入って点滅します。
結局原因が確定できませんでしたが、スクロールバーの背景色が点滅するようにちらついて見えるようでした。
開発者ツールを閉じれば発現しないのですが、当初は気付かず色々と調べてしまいましたので、一応このちらつき対策的なものをメモっておきたいと思います。
- ::-webkit-scrollbarでbackground:transparent;を指定すればちらつかない
::-webkit-scrollbarに関しては以下をどうそ。
::-webkit-scrollbarは使ったことがないのでいまだに動作を理解していないのですが、今回のちらつきを消すという意味ではbackgroundではなく、widhtやheightをしているだけで改善しました。
ただし何を指定したとしても、例えば::-webkit-scrollbarにwidhtを指定すると、スクロールバーが全部消えます。
あまり現実的な手段とはいい難いのですが、この方法以外を見つけることができませんでした。
結び
デザイン検討時には面白そうかなと思いましたが、ページ推移の度に毎回こういう演出があると邪魔に感じるかもしれませんので、実用性は低く感じます。
1ページで完結する可能性が高い、広告のLP的な役割のページには使えるかもしれませんが。
もちろん、雰囲気作りとして重要であれば検討できますし、速度や色を調整すれば邪魔さが軽減できるかもしれません。
全体を覆うような表現のため、サイトの状態によっては表示の崩れや遅れが発生すると思います。
21人がこの記事を評価
役に立ったよという方は上の「記事を評価する」ボタンをクリックしてもらえると嬉しいです。
連投防止のためにCookie使用。SNSへの投稿など他サービスとの連動は一切ありません。
