デザインは「楽しい！」を作るツール！cssでカーテンを開けよう

WEBデザインを本格的にするようになって4年くらい経ちますが、4年間、ずーーっと勉強の連続です。

学んでも学んでも、まだまだ学ぶことがある。
WEBデザイン自体、どんどん進化してるし、それに追いつかなきゃいけないからぼやぼやしてられない。

 

そして新しいことができるようになったら、めっちゃうれしいし楽しい！

早くお客様のサイトに実装してあげたくてうずうずします。

 

デザインは、「楽しい」も「かっこいい」も「スタイリッシュ」も「和」も「アンティーク」も「元気」も全部全部表現できる、とても素敵なツールです！

 

今回は、LPにカーテンを付けてみました。

こちら、以前作らせてもらったLPですが、これにカーテンを付けてみました。クリックして見てみてね♡

 

 

CSSでカーテンを付ける方法

まずLP全体を

<div id="wrapper">

 

で囲みます。

そしてCSSに以下の記述をします。

#wrapper::before,#wrapper::after{
  position: fixed;
  z-index: 1000;
  top: -15%;
  display: block;
  visibility: hidden;
  width: 50%;
  height: 130%;
  background-color: #fbeebb;
}
#wrapper::before{
  left: 0;
  animation : curtain_l 3s;
　-webkit-animation : curtain_l 3s;
}
#wrapper::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: #fbeebb
;}
  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: #fbeebb;}
  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: #fbeebb;}
  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: #fbeebb;}
  60%{-webkit-transform: rotate(-6deg) translateX(50%);}
  80%{opacity: 1;}
  100%{-webkit-transform: rotate(0deg) translateX(100%); opacity:0; visibility: hidden;}
}

 

もっと工夫したら、もっとカーテンの質感を出せると思う。
研究しときます！