質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

0回答

1716閲覧

画像をふわっと切り替え

Susan

総合スコア4

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2019/10/13 02:58

画像をふわっとフェードアウト・フェードインさせたいです。
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;
}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

AMK

2019/10/25 08:13

コードはコードの挿入のボタンを使いましょう
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問