コーディング初心者です。 https://codepen.io/commte/pen/9cea425c37d39a2327fe28ee0c0b1d58 上記の用な交互にズームインとズームアウトを繰り返し表示するアニメーションのスライドを、コンテンツの背景に指定する方法が知りたいです。上記のサンプルだとスライド

の上にタイトル（ヘッダーの要素）やコンテンツを載せる方法がわかりません。 positionを使えば解決するのでしょうか？？実現できればjQueryなどでも構いません。背景がズームせずスライドするjQueryの例は何件か見つけられたのですが、、わかりずらくて、申し訳ありませんがよろしくお願いいたします。 ![イメージ説明](a3dd6ff00b76908446b87b557d347c08.png) ```ここに言語を入力

``` ```ここに言語を入力 /* 参考にしたサンプルの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); } } ```

質問編集履歴