画像をふわっとフェードアウト・フェードインさせたいです。
html&cssを2ヶ月間独学で勉強している最中です。
画像を下記のコードを利用しふわっと切り替えたいですが
このコードをプラグインすると画面いっぱいになります。
cssで実装すればいいということはわかりますが、余白&画像位置をどう設定すれば
思うような位置に収まるのかよくわかりません。
ご助言よろしくお願いします。
追記:ふわっと切り替えコードは下記のURLを参考にしました。
http://creatornote.nakweb.com/css3_fullscreen/
☆html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>MyPortPolio</title> <link rel="stylesheet" href="../common/css/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script> </head> <body> <audio controls> <source src="images/BGM.mp3" type="audio/mp3" class="bgm"> </audio> <div id="page"> <header id="pageHead"> <h1 id="siteTitle" class="pageTitle">Kim.soonhyang</h1> <p id="catchcopy">Web Engineerになるために学習中です。Challengはやってみたいをカタチにする!</p> </header> <!--画像切り替えはできるがふわっと感が残念 <img id="mypic" src="images/img_01_08.jpg" width="720" height="390"> <script> var pics_src = new Array("images/img_01_08.jpg","images/img_01_09.jpg","images/img_01_10.jpg"); var num = -1; slideshow_timer(); function slideshow_timer(){ if (num == 2){ num = 0; } else { num ++; } document.getElementById("mypic").src=pics_src[num]; setTimeout("slideshow_timer()",3000); } </script> <figcaption>自分でコーディングした画像が動いている♪ 感動体験!</figcaption> </section> ここまで--> <!--実現させたいふわっと感コード--> <link href="https://fonts.googleapis.com/css?family=Playfair+Display|Spectral" rel="stylesheet"> <ul class="cb-slideshow"> <li><span>images/img_01_08.jpg</span></li> <li><span>images/img_01_09.jpg</span></li> <li><span>images/img_01_10.jpg</span></li> </ul> <figcaption>自分でコーディングした画像が動いている♪ 感動体験!</figcaption> </section> <!--ここまで-->☆CSS
/ふわっとコード/
body {
margin: 0;
padding: 0;
}
ul li {
list-style:none;
}
.cb-slideshow,
.cb-slideshow:after {
position: fixed;
width: 100vw;
height: 100vh;
top: 0px;
left: 0px;
z-index: 0;
margin: 0;
}
.cb-slideshow li span {
width: 100vw;
height: 100vh;
position: absolute;
top: 0px;
left: 0px;
color: transparent;
background-size: cover;
background-position: 50% 50%;
background-repeat: no-repeat;
opacity: 0;
z-index: 0;
-webkit-backface-visibility: hidden;
-webkit-animation: imageAnimation 36s linear infinite 0s;
-moz-animation: imageAnimation 36s linear infinite 0s;
-o-animation: imageAnimation 36s linear infinite 0s;
-ms-animation: imageAnimation 36s linear infinite 0s;
animation: imageAnimation 36s linear infinite 0s;
}
.cb-slideshow li div {
z-index: 1000;
position: absolute;
left: 0%;
top: 30%;
width: 100%;
opacity: 0;
color: #fff;
-webkit-animation: titleAnimation 36s linear infinite 0s;
-moz-animation: titleAnimation 36s linear infinite 0s;
-o-animation: titleAnimation 36s linear infinite 0s;
-ms-animation: titleAnimation 36s linear infinite 0s;
animation: titleAnimation 36s linear infinite 0s;
}
.cb-slideshow li div h3 {
z-index: 50;
font-family: 'Playfair Display', serif;
font-size: 8vmin;
color: #fff;
font-weight: bold;
line-height: 1.2;
text-align: center;
}
.cb-slideshow li div h3 i {
display: block;
font-size: 3vmin;
}
.cb-slideshow li div h3 em {
color: #bb342e;
font-size: 10vmin;
font-weight: bold;
}
.cb-slideshow li:nth-child(1) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.jpeg);
}
.cb-slideshow li:nth-child(2) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide01.png);
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide03.jpeg);
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide04.jpeg);
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide05.jpeg);
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
background-image: url(http://creatornote.nakweb.com/wp-content/themes/giraffe/images/cssfullslide/slide06.jpeg);
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
.cb-slideshow li:nth-child(2) div {
-webkit-animation-delay: 6s;
-moz-animation-delay: 6s;
-o-animation-delay: 6s;
-ms-animation-delay: 6s;
animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) div {
-webkit-animation-delay: 12s;
-moz-animation-delay: 12s;
-o-animation-delay: 12s;
-ms-animation-delay: 12s;
animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) div {
-webkit-animation-delay: 18s;
-moz-animation-delay: 18s;
-o-animation-delay: 18s;
-ms-animation-delay: 18s;
animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) div {
-webkit-animation-delay: 24s;
-moz-animation-delay: 24s;
-o-animation-delay: 24s;
-ms-animation-delay: 24s;
animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) div {
-webkit-animation-delay: 30s;
-moz-animation-delay: 30s;
-o-animation-delay: 30s;
-ms-animation-delay: 30s;
animation-delay: 30s;
}
@keyframes imageAnimation {
0% { opacity: 0; animation-timing-function: ease-in; }
4% { opacity: 1; animation-timing-function: ease-out; }
17% { opacity: 1 }
25% { opacity: 0 }
100% { opacity: 0 }
}
@keyframes titleAnimation {
0% { opacity: 0 }
4% { opacity: 1 }
17% { opacity: 1 }
19% { opacity: 0 }
100% { opacity: 0 }
}
@media screen and (max-width: 1140px) {
.cb-slideshow li div h3 { font-size: 12vmin }
}
/* Show at least something when animations not supported */
.no-cssanimations .cb-slideshow li span{
opacity: 1;
}
あなたの回答
tips
プレビュー