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

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

ただいまの
回答率

87.93%

画像をふわっと切り替え

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 871

score 4

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

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正の依頼

  • AMK

    2019/10/25 17:13

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

    キャンセル

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

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

  • ただいまの回答率 87.93%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る