CSS3パネル開閉

このサイトのサンプルを自分で理解しやすいように成形した健忘ページ。

TransitionとTransformを使ったサンプル

パネル系骨格

パネル系の基本骨格は以下。とりあえずこれをうったあと、どのようにアニメーションさせるかを考える。

box-sizing:border-boxを指定することでpaddingとborderを含めた幅と高さを指定できる。

  • Placehold.it
    この画像は「Placehold.it」で生成されるダミー画像を使用しています。
    Placehold.it
<!--html-->
<ul class="details">
  <li>
  <img src="https://placehold.it/200x180/20b2aa/ffffff&text=image">
  <dl>
    <dt>Placehold.it</dt>
    <dd>この画像は「Placehold.it」で生成されるダミー画像を使用しています。</dd>
    <dd><a href="https://www.placehold.it/" target="_blank">Placehold.it</a></dd>
  </dl>
  </li>
</ul>

/*css*/
ul.details {
	list-style-type:none;
	}
ul.details li,ul.details dl {
	width:200px;
	height:180px;
	}
ul.details li {
	position:relative;
	}

ul.details dl {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 20px 25px;
	color: #fff;
	background: rgba(205,92,92,.9);
	}

下から出るパターン

上記骨格にいくつか追加していく。

dl要素をそのままtransformで下に100％ずらしておき、liにhoverされたら上へ重なるようにをtransform0％に指定、tansition-duration0.6秒で移動させる。opacityも指定しておいたほうが滑らかに見える。

下にずらしてある初期のdlが見えるのはまずいので、liにoverflow:hiddenを指定して見えなくする。

  • Placehold.it
    この画像は「Placehold.it」で生成されるダミー画像を使用しています。
    Placehold.it
/*css*/
ul.details1 {
	list-style-type:none;
	}
ul.details1 li,
ul.details1 dl {
	width:200px;
	height:180px;

	}
ul.details1 li {
	overflow:hidden;
	position:relative;
	}
ul.details1 dl {
	opacity:0;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 20px 25px;
	background: rgba(205,92,92,.9);
	transform:translateY(100%);
	-webkit-transform:translateY(100%);
	transition:transform 0.6s,opacity 0.6s;
	-webkit-transition:-webkit-transform 0.6s,opacity 0.6s;
	}
ul.details1 dl dd,
ul.details1 dl dt {
	color:#fff;
	}
ul.details1 li:hover dl {
	opacity:1;
	transform:translateY(0%);
	-webkit-translateY(0%);
	}

裏返るパターン

transform:rotateを使用して、imgとdlを同時に、transitionで0.6秒かけて180度回転させる。この際、立体的に見せるためにperspective:1000pxを指定して遠近法を適用する。

backface-visibility:hiddenを指定するとrotateで90度以上回転させた時の裏面を非表示にできる。

  • Placehold.it
    この画像は「Placehold.it」で生成されるダミー画像を使用しています。
    Placehold.it
/*css*/
ul.details2 {
	list-style-type:none;
	perspective: 1000px;
	-webkit-perspective: 1000px;
	}
ul.details2 li,ul.details2 dl {
	width:200px;
	height:180px;
	}
ul.details2 li {
	position:relative;
	}

ul.details2 dl {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 20px 25px;
	color: #fff;
	background: rgba(205,92,92,.9);
	transform:rotateX(-180deg);
	-webkit-transform:rotateX(-180deg);
	}
ul.details2 img,
ul.details2 dl {
	transition:transform 0.6s;
	-webkit-transition:-webkit-transform 0.6s;
	backface-visibility:hidden;
	-webkit-backface-visibility:hidden;
	}
ul.details2 li:hover img {
	transform:rotateX(180deg);
	-webkit-transform:rotateX(180deg);
	}
ul.details2 li:hover dl {
	transform:rotateX(0);
	-webkit-transform:rotateX(0);
	}

シャッターパターン

dl要素の背景はtransparentで透過させておき、beforeとafterで背景を半分ずつ左右から移動させて一つの背景を作る。

z-index:1でdl要素をbeforeやafterの上に移動させて、下から、img→before→after→dlの順番に重ねる。

初期状態のopacityは、img(1)→before(0)→after(0)→dl(0)だからimgしか見えてない。hoverさせることですべてopacityを１にする。

beforeとafterで高さは同じ、幅が半分の図形を作り、傾けて、初期は左右に移動させた状態にしておくが、overflow:hiddenでそれらをいじったり見えたりできないようにする。

  • Placehold.it
    この画像は「Placehold.it」で生成されるダミー画像を使用しています。
    Placehold.it
/*css*/
ul.details3 {
	list-style-type:none;
	}
ul.details3 li,ul.details3 dl {
	width:200px;
	height:180px;
	}
ul.details3 li {
	position:relative;
	overflow:hidden;
	}
ul.details3 dl {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	position: absolute;
	top: 0;
	margin: 0;
	padding: 20px 25px;
	color: #fff;
	background: rgba(205,92,92,.9);
	background-color:transparent;
	}
ul.details3 dl dt,
ul.details3 dl dd {
	opacity:0;
	transition:opacity 0.3s;
	position:relative;
	z-index:1;
	}
ul.details3 li:hover dl dt,
ul.details3 li:hover dl dd {
	opacity:1;
	transition-deley:0.3s;
	}
	
ul.details3 li dl:before,
ul.details3 li dl:after {
	content:"";
	display:block;
	position:absolute;
	top:0;left:0;
	width:100px;height:180px;
	background:#999;
	opacity:0;
	transition:opacity 0.6s,transform 0.6s;
	-webkit-transition:opacity 0.6s,-webkit-transform 0.6s;
	}
ul.details3 li:hover dl:before,
ul.details3 li:hover dl:after {
	opacity:0.9;
	transition-duration:0.3s;
	}
ul.details3 dl:before {
	transform:translateX(-175px) skew(-30deg);
	-webkit-transform:-webkit-translateX(-175px) skew(-30deg);
	}
ul.details3 dl:after {
	transform:translateX(275px) skew(-30deg);
	-webkit-transform:-webkit-translateX(275px) skew(-30deg);
	}
ul.details3 li:hover dl:before {
	transform:translateX(0) skew(0);
	-webkit-transform:-webkit-translateX(0) skew(0);
	}
ul.details3 li:hover dl:after {
	transform:translateX(100px) skew(0);
	-webkit-transform:-webkit-translateX(100px) skew(0);
	}

コメントor補足情報orご指摘あればをお願いします。

（件名or本文内でキーワード検索できます）



  • << 前のページ
  • 次のページ >>
ページトップへ