コーディング初心者です。
https://codepen.io/commte/pen/9cea425c37d39a2327fe28ee0c0b1d58
上記の用な交互にズームインとズームアウトを繰り返し表示するアニメーションのスライドを、
コンテンツの背景に指定する方法が知りたいです。
上記のサンプルだと スライド<div class="slider_css"> の上に
タイトル(ヘッダーの要素)やコンテンツを載せる方法がわかりません。
positionを使えば解決するのでしょうか??
実現できればjQueryなどでも構いません。
背景がズームせずスライドするjQueryの例は何件か見つけられたのですが、、
わかりずらくて、申し訳ありませんがよろしくお願いいたします。
<!-- 参考にしたサンプルのHTML --> <div class="slider_css"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div>
/* 参考にしたサンプルのCSS */ @mixin bp { @media only screen and (max-width: 768px) { @content; } } .slider_css { height: 550px; margin: 0 auto; position: relative; overflow: hidden; ul { margin: 0; padding: 0; list-style: none; li { background-size: cover; width: 100%; height: 550px; position: absolute; top: 0; left: 0; animation-iteration-count: infinite; animation-duration: 40s; @for $value from 1 through 5 { &:nth-child(#{$value}) { background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/381167/animal#{$value}.jpg"); @if $value % 2 == 0 { //偶数 animation-name: slider-zoomout; } @else { //奇数 animation-name: slider-zoomin; } @if $value != 1 { //最初以外は透過 opacity: 0; } animation-delay: #{($value*8-11)}s; //-3からスタートして、8づつ加算する } } img { width: 130%; } } } @include bp { height: 400px; ul { li { background-size: contain; background-repeat: no-repeat; } } } } // 5~8秒の間だけ透過解除 @keyframes slider-zoomin { 0% { opacity: 0; transform: scale(1.0); } 12.5% { opacity: 1; } 20% { opacity: 1; } 27.5% { opacity: 0; } 100% { opacity: 0; transform: scale(1.3); } } @keyframes slider-zoomout { 0% { opacity: 0; transform: scale(1.3); } 12.5% { opacity: 1; } 20% { opacity: 1; } 27.5% { opacity: 0; } 100% { opacity: 0; transform: scale(1.0); } }
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/04/05 02:56
2018/04/05 02:58
2018/04/05 03:08