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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

Q&A

解決済

1回答

493閲覧

画像がじわじわと切り替わるスライダーを作りたい

naaS

総合スコア6

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

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

CSS

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

0グッド

2クリップ

投稿2024/06/02 01:27

実現したいこと

ズームアップで、5秒で次の画像に切り替わる。その際、前の画像の残像が残るようにじわじわと次の画像に切り替わるsliderにする。リンク内容https://www.ginga999.co.jp/このサイトのslideは、画像が後退していますが、画像がじわじわと切り替わるイメージ。

発生している問題・分からないこと

sliderそのものは出来たが、画像の切り替えが早い。ボタンを切り替えるように変わってしまう。

該当のソースコード

html

1<body> 2<div class="top_fixed"> 3 <div class="headtop" id="headtop"> 4 <div class="head_logo"> 5 <a href="index.html"><img src="img/city-search_06.png" alt="logo"></a> 6 </div> 7 <div class="head_right"> 8 <div class="headtext">text</div> 9 <div class="headtext2">text</div> 10 </div> 11 </div> 12</div> 13 <div class="header"> 14 <div class="slide"> 15 <ul> 16 <li> 17 <a href="bus_toppage.html" alt="slide_img"><img src="img/2357486_kankouao_1400.png" alt="Slide 1" /><div class="text-overlay">text</div></a> 18 </li> 19 <li> 20 <a href="bus_toppage.html" alt="slide_img"><img src="img/1679585_1400.png" alt="Slide 2" /><div class="text-overlay">text2</div></a> 21 </li> 22 <li> 23 <a href="bus_toppage.html" alt="slide_img"><img src="img/1339937_1400_600.jpg" alt="Slide 3" /><div class="text-overlay">text3</div></a> 24 </li> 25 <li> 26 <a href="index.html" alt="slide_img"><img src="img/625842_1400.jpg" alt="Slide 4" /></a> 27 </li> 28 <li> 29 <a href="index.html" alt="slide_img"><img src="img/3025924_1400.jpg" alt="Slide 5" /></a> 30 </li> 31 </ul> 32 </div> 33 </div> 34 35 <div class="contents"> 36 <div class="kijibox"> 37 <div class="kiji_link"> 38 <span><a href="#">text</a><br/></span> 39 text<br/> 40 text<br/> 41 text<br/> 42 </div> 43 44 </div> 45 46 <div class="kita_side_nav"> 47 <div class="link"> 48 <span><a href="#">text</a></span> 49 </div> 50 </div> 51 </div> 52 53 54</body> 55</html>

css

1.top_fixed { 2 width: 100%; 3 position: relative; 4 top: 0px; 5 background-color: #fff;/* 背景色を追加して潜り込みを防ぐ */ 6 z-index: 9; 7} 8.headtop { 9 width: 100%; 10 display: flex; 11 position: fixed; 12 z-index: 11; 13 background-color: rgb(4 70 104); 14 padding: 10px 2%; 15 transition: height 0.3s ease, font-size 0.3s ease; 16 height: auto; 17 18} 19 20.head_logo{ 21 width:50%; 22 transition: height 0.3s ease; 23} 24 25.head_logo img{ 26 max-width:35%; 27 transition: height 0.3s ease; 28 } 29 30.head_right{ 31 width:40%; 32 margin: 5px 0 0 0; 33} 34 35.headtext, .headtext2 { 36 color: #fff; 37 overflow: hidden; 38 transition: font-size 0.3s ease; 39} 40.headtext { 41 font-size: 22px; 42 font-weight: 400; 43 margin-top: 3%; 44} 45.headtext2 { 46 font-size: 16px; 47 margin: -5px 0 0 0; 48} 49.header{ 50 width:100%; 51 overflow: hidden; 52 padding: 0; 53 margin: 0; 54} 55.contents{ 56 width:100%; 57 overflow: hidden; 58 display: flex; 59 margin: 0px 0px 0px 0px; 60 padding: 0px 0px; 61} 62.main { 63 z-index: 2; 64 } 65 66.kijibox{ 67 width:50%; 68 margin: 10px 10px 10px 10px; 69} 70 71.kita_side_nav{ 72 width:50%; 73 margin: 10px 10px 10px 10px; 74 border-left: 1px dotted; 75} 76 77.kiji_link span { 78 font-weight: bold; 79} 80.kiji_link a { 81 text-decoration: none; 82 color: black; 83} 84 85.link span { 86 font-weight: bold; 87} 88.link a{ 89 text-decoration: none; 90 color: black; 91} 92 93 94 95 * { 96 margin: 0; 97 padding: 0; 98 box-sizing: border-box; 99} 100.slide { 101 display: flex; 102 overflow: hidden; 103 width: 100%; 104} 105 106.slide ul { 107 list-style-type: none; 108 margin: 0; 109 padding: 0; 110 width: 100%; 111} 112 113.slide li { 114 position: relative; 115 margin-right: 0px; 116 float: left; 117 display: block; 118 transform: scale(1); 119} 120 121.slide li .active { 122 opacity: 1; 123 transform: scale(1.05); 124 height: auto; 125} 126 127.slide img { 128 display: block; 129 width: 100%; 130 height: 0px; 131 opacity: 0; 132 transition: opacity 1s ease-in-out, transform 6s ease-out; 133 object-fit: contain; 134} 135 136.text-overlay { 137 position: absolute; 138 bottom: 40%; 139 left: 50%; 140 transform: translate(-50%, -50%); 141 color: white; 142 font-size: 24px; 143 text-align: center; 144 max-width: 90%; 145 white-space: nowrap; 146 letter-spacing: 0.4em; 147 line-height: 2.3em; 148 font-family: serif; 149 font-weight: bold; 150} 151 152@media screen and (max-width:800px){ 153 .text-overlay { 154 font-size: 20px; 155 } 156} 157@media screen and (max-width:700px){ 158 .text-overlay { 159 font-size: 18px; 160 } 161} 162@media screen and (max-width:600px){ 163 .text-overlay { 164 font-size: 14px; 165 } 166} 167@media screen and (max-width:450px){ 168 .text-overlay { 169 font-size: 12px; 170 } 171 172} 173@media screen and (max-width:400px){ 174.text-overlay { 175 font-size: 9px; 176} 177} 178@media screen and (max-width:300px){ 179.text-overlay { 180 font-size: 7px; 181} 182} 183

js

1 let dsp1; 2 let dsp2; 3 4 window.addEventListener('load', function () { 5 viewSlide('.slide img'); 6 console.log("viewSlide function called"); 7 initSlide(); 8 }); 9 10 function viewSlide(className, slideNo = -1) { 11 let imgArray = document.querySelectorAll(className); 12 if (slideNo >= 0) { 13 imgArray[slideNo].classList.remove('active'); 14 } 15 slideNo++; 16 if (slideNo >= imgArray.length) { 17 slideNo = 0; 18 } 19 imgArray[slideNo].classList.add('active'); 20 setTimeout(function () { viewSlide(className, slideNo); }, 5000); 21 } 22 23 function initSlide() { 24 let elems = document.getElementsByTagName("p"); 25 for (let i = 0; i < elems.length; i++) { 26 elems[i].className = "before"; 27 } 28 dsp1 = false; 29 dsp2 = false; 30 }

試したこと・調べたこと

  • teratailやGoogle等で検索した
  • ソースコードを自分なりに変更した
  • 知人に聞いた
  • その他
上記の詳細・結果

cssのtransition: opacity 1s ease-in-out, transform 6s ease-out;の設定を変えても変化なし。

補足

特になし

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

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

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

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

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

kei344

2024/06/02 13:40

まだ質問が「受付中」になっていますが、「ベストアンサー」を選び「解決済」にされてはいかがでしょうか。
naaS

2024/06/02 14:34

コメントありがとうございます。⚪︎⚪︎を試したところ問題が解決しました! ベストアンサーに選びたいので同じ内容を回答欄に投稿いただけますでしょうか?
kei344

2024/06/02 14:45

hatena19 さんの回答にベストアンサーをつけましょう。
guest

回答1

0

ベストアンサー

「前の画像の残像が残るようにじわじわと次の画像に切り替わ」らない原因は下記です。

imgのheightを 0 と auto で切り替えてますが、これはアニメーションが効きません。表示時は 0→auto で瞬時に切り替わります。opacity は0→1はアニメーションで表示されますのでフェイドインします。非表示時は、auto→0と瞬時に切り替わりますでの、アニメーションする間がないです。

対策として、下記のような手法をとります。

imgのheightはautoにしておいて、親のli要素を position: absolute;で固定配置して、各li要素を重ねます。

position: absolute;にすると他要素からは高さ0と扱われますので、親のul要素に高さを設定します。画像のアスペクト比に合わせるのなら、CSSのaspect-ratioを使うといいでしょう。

オーバーレイテキストもアニメーションで表示/非表示させる必要がありますので、
transitionはimg要素ではなく共通の親のa要素に設定します。

JSのviewSlideの対象も'.slide img'ではなく'.slide li'にして、li要素にactiveクラスを付与するようにします。

li要素を重ねているので、最後のli要素以外はリンクが無効になりますので、activeのli要素をz-indexで前面に移動させます。

コード例

CSSの .slide 以降のコードを下記のように修正します。

css

1.slide { 2 overflow: hidden; 3 width: 100%; 4} 5.slide ul { 6 list-style-type: none; 7 margin: 0; 8 padding: 0; 9 aspect-ratio: 2 / 1; /* 画像のアスペクト比に合わせる */ 10} 11.slide li { 12 position: absolute; 13 margin-right: 0; 14} 15.slide li.active { 16 z-index: 3; 17} 18.slide li a { 19 opacity: 0; 20 transform: scale(1); 21 transition: opacity 1s ease-in-out; 22} 23.slide li.active a { 24 opacity: 1; 25} 26.slide li img { 27 display: block; 28 width: 100%; 29 object-fit: cover; 30 transform: scale(1); 31 transition: transform 6s ease-out; 32} 33.slide li.active a img { 34 transform: scale(1.05); 35}

js

1 window.addEventListener('load', function () { 2 viewSlide('.slide li'); 3 console.log("viewSlide function called"); 4 initSlide(); 5 });

CodePenサンプル

投稿2024/06/02 07:15

編集2024/06/02 10:55
hatena19

総合スコア33920

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

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

naaS

2024/06/02 08:36

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
naaS

2024/06/02 08:41

画像のじわじわとの切り替えはスムーズにいきました。しかし、動作を試したところ、画像リンクが効かなくなりました。どちらかの一方の機能だけなのでしょうか?
hatena19

2024/06/02 10:50 編集

リンクのことを考慮してませんでした。 li要素を重ねているので一番上のリンクのみ有効でその背面のリンクは無効になりますね。 z-indexで表示中のli要素を前面に移動させればいいでしょう。 回答とサンプルを修正しておきます。
naaS

2024/06/02 12:45

hatena19様のコメントを参考に.text-overlayにz-index: 3;を追記したところ、各ページへのリンクが可能になりました。ありがとうございました。
naaS

2024/06/02 12:49

回答ありがとうございます。 試したところ問題が解決しました! ベストアンサーに選ばせていただきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.42%

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

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

質問する

関連した質問