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

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

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

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

HTML5

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

JavaScript

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

Q&A

1回答

6376閲覧

拡大しながらフェードインするスライドの方法について

infox

総合スコア11

CSS3

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

HTML5

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

JavaScript

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

0グッド

1クリップ

投稿2017/08/27 02:13

http://yurixxx8.hatenablog.com/entry/2017/02/05/022049
のサイトのコードをサンプルに作成したのですが、
以下がうまくいきません。どうすればいいでしょうか?

1.画像スライド時に画像が下にはみ出ます(画像サイズが1000×625)
どうすれば、はみ出ずにスムーズに流れるでしょうか。
2.最終スライドのあと、トップに戻るスライドがスムーズになりません。
2.1枚目の画像は拡大、2枚目の画像は縮小するように交互に拡大、縮小をスライドするにはどうすればいいでしょうか。

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> <style> * { margin: 0; padding: 0; } .slideshow { position: relative; width: 70%; padding-top: 70%; overflow: hidden; margin: 0 auto; } .slideshow .item { width: 100%; position: absolute; top: 0; display: none; } .in { -webkit-transform: scale(1); transform: scale(1); z-index: 2; } .out { -webkit-transform: scale(1.25); transform: scale(1.25); -webkit-transition: 4s; transition: 4s; z-index: 1; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> $(window).load(function(){ var slide = $('.slideshow'); var i = 0; // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン slide.find('.item').eq(i).fadeIn(2000).addClass('in'); // スライドの枚数を調べて変数に格納 var total = $('.slideshow .item').length -1; // 処理を繰り返す setInterval(function(){ if(i < total){ slide.find('.item').eq(i).addClass('out'); slide.find('.item').eq(i).removeClass('in'); j = i; i++; setTimeout(function(){ // 1000ミリ秒後に3500ミリ秒かけてフェードインする slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out'); },1000); // 4500ミリ秒かけてフェードアウトする slide.find('.item').eq(j).fadeOut(4500); } else if(i == total){ slide.find('.item').eq(i).addClass('out'); slide.find('.item').eq(i).removeClass('in'); j = i; i = 0; setTimeout(function(){ slide.find('.item').eq(i).fadeIn(3500).addClass('in').removeClass('out'); },1000); slide.find('.item').eq(j).fadeOut(4500); }; // この値を変更すると、処理の間隔を遅くしたり早くしたりできる },4500); }); </script> </head> <body> <h1 class="title"></h1> <div class="slideshow"> <img class="item" src="main3.jpg" alt=""> <img class="item" src="main2.jpg" alt=""> <img class="item" src="main1.jpg" alt=""> </div> </body> </html>

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

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

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

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

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

guest

回答1

0

1.画像スライド時に画像が下にはみ出ます(画像サイズが1000×625)

どうすれば、はみ出ずにスムーズに流れるでしょうか。

次のようにマスクすれば、はみ出さないように見えます。

HTML

1 <!-- div.slideshow の中にマスク --> 2 <div class="mask"></div>

CSS

1 .mask { 2 position: absolute; 3 width: 100%; /* 指定しないと0になる */ 4 height: 100%; /* 指定しないと0になる */ 5 top: 610px; /* はみ出してはいけない、上からの高さ */ 6 background-color: white; /* 背景と同じ色 */ 7 z-index: 3; /* 最も手前(最大値) */ 8 }

綺麗なやり方ではないのですが、次のように書きかえるとIEでもはみ出さなくなります。
(IEでのちらつき阻止はまだです。)

JavaScript

1 $(window).load(function(){

JavaScript

1function isBrowserIE() { 2 return navigator.userAgent.toLowerCase().indexOf('trident') >= 0; 3} 4 5$(window).load(function(){ 6 if (isBrowserIE()) { 7 var maskTop = $('.mask').css('top').replace(/px$/, '') - 34; 8 $('.mask').css('top', maskTop); 9 }

交互に行うFIXは調査中です。

2.最終スライドのあと、トップに戻るスライドがスムーズになりません。

これでかなりスムーズになったと思います。

2.1枚目の画像は拡大、2枚目の画像は縮小するように交互に拡大、縮小をスライドするにはどうすればいいでしょうか。

交互に拡大、縮小をスライドするようにしました。

これでいいでしょうか?
マシントラブルと勘違いによりはまってしまいました。すみません。

HTML

1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title></title> 8 <style> 9 * { 10 margin: 0; 11 padding: 0; 12 } 13 14 .slideshow { 15 position: relative; 16 width: 70%; 17 padding-top: 70%; 18 overflow: hidden; 19 margin: 0 auto; 20 } 21 22 .slideshow .item { 23 width: 100%; 24 position: absolute; 25 top: 0; 26 display: none; 27 z-index: 1; 28 } 29 30 .down { 31 -webkit-transform: scale(1); 32 transform: scale(1); 33 z-index: 2; 34 } 35 36 .up { 37 -webkit-transform: scale(1.25); 38 transform: scale(1.25); 39 z-index: 1; 40 } 41 42 .closeDown { 43 -webkit-transform: scale(1); 44 transform: scale(1); 45 -webkit-transition: 4s; 46 transition: 4s; 47 z-index: 1; 48 } 49 50 .closeUp { 51 -webkit-transform: scale(1.25); 52 transform: scale(1.25); 53 -webkit-transition: 4s; 54 transition: 4s; 55 z-index: 2; 56 } 57 58 .mask { 59 position: absolute; 60 width: 100%; /* 指定しないと0になる */ 61 height: 100%; /* 指定しないと0になる */ 62 top: 610px; /* はみ出してはいけない、上からの高さ */ 63 background-color: white; /* 背景と同じ色 */ 64 z-index: 3; /* 最も手前(最大値) */ 65 } 66 67 </style> 68 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 69 70 <script> 71function isBrowserIE() { 72 return navigator.userAgent.toLowerCase().indexOf('trident') >= 0; 73} 74 75 76$(window).load(function(){ 77 if (isBrowserIE()) { 78 var maskTop = $('.mask').css('top').replace(/px$/, '') - 34; 79 $('.mask').css('top', maskTop); 80 } 81 82 var slide = $('.slideshow'); 83 var itemIndex = 0, prevItemIndex; 84 var classes = ['up', 'down']; 85 var classesClosing = ['closeUp', 'closeDown']; 86 var upOrDown = 0; 87 88 // ページの読み込み時にスライドの1枚目を2000ミリ秒かけてフェードイン 89 slide.find('.item').eq(itemIndex).fadeIn(2000).addClass(classes[1 - upOrDown]); 90 91 // スライドの枚数を調べて、最後のインデックスを変数に格納 92 var lastItemIndex = $('.slideshow .item').length - 1; 93 94 // 処理を繰り返す 95 setInterval(function() { 96 setTimeout(function() { 97 // 1000ミリ秒後に3500ミリ秒かけてフェードインする 98 slide.find('.item').eq(itemIndex).fadeIn(3500).addClass(classes[1 - upOrDown]) 99 .removeClass(classesClosing[1 - upOrDown]).removeClass(classes[upOrDown]); 100 }, 1000); 101 102 prevItemIndex = itemIndex; 103 104 if (itemIndex < lastItemIndex) { 105 itemIndex++; 106 } 107 else { 108 itemIndex = 0; 109 } 110 111 // 反転 112 upOrDown = 1 - upOrDown; 113 114 // 4500ミリ秒かけてフェードアウトする 115 slide.find('.item').eq(prevItemIndex).fadeOut(4500).addClass(classesClosing[1 - upOrDown]) 116 .removeClass(classes[1 - upOrDown]).removeClass(classesClosing[upOrDown]); 117 118 // この値を変更すると、処理の間隔を遅くしたり早くしたりできる 119 }, 16000); 120}); 121 122 </script> 123</head> 124 125<body> 126 <h1 class="title"></h1> 127 <div class="slideshow"> 128 <img class="item" src="img1.jpg" alt=""> 129 <img class="item" src="img2.jpg" alt=""> 130 <img class="item" src="img3.jpg" alt=""> 131 <!-- div.slideshow の中にマスク --> 132 <div class="mask"></div> 133 </div> 134</body> 135</html>

投稿2017/08/27 05:26

編集2017/09/12 21:05
naomi3

総合スコア1105

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

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

infox

2017/08/27 06:12

すみません。うまくいきません。 <div class="mask"></div>はどこに書くのでしょうか? ちなみに、chromeを使ってます。
naomi3

2017/08/27 07:22

<div class="slideshow"> </div>の中です。
infox

2017/08/27 07:49

うまくいきました。ありがとうございます。1については、解決です。 2について、最後のスライドからトップのスライドへ移る際、ちらつきが発生するのですが、 原因は何でしょうか?
infox

2017/08/27 07:54

1.について、ie11でうまく動いてくれません。はみでます。
naomi3

2017/08/28 15:00

私の環境では、ちらつきがなくなりました。
infox

2017/09/03 10:13

ie11うごくようになりました。ありがとうございます。以下3点教えてください。 1.iphone safar,chrmeで見ると、画像が拡大するたびに、下がはみ出てしまいます。 2.画像の表示領域が、スマホだと画像がほぼすべて表示されるのに対し、  パソコンで見ると画像の一部が表示され、拡大、縮小されます。 3.一枚の画像の表示時間を10秒程度表示してからフェードアウトしたい。
naomi3

2017/09/03 11:08

1.IEであるかどうか調べて、IEの場合ならば「はみ出してはいけない、上からの高さ」を変えているので、 iphoneの場合, Safariの場合, Chromeの場合も同様にすればよいのでは? 2.全体の画素数が違うのでそうなるのでは?スマホと同じ動作のようにパソコンでの動作を変えたいのですか? 3.やってみています。しばらくお待ちください。
infox

2017/09/10 02:43

2.山の画像があった場合、パソコンでは、山が4割程度が枠の中に表示されるのですが、スマホでは、山の8割程度が枠の中に表示されます。スマホと同じように表示したいです。 3.もうしばらくかかるでしょうか?
naomi3

2017/09/12 21:42

2.画面の画素数の違いと思ったのですが、PCのブラウザで画面を小さくしても、正しい比率で表示されますね。「transform: scale」の実装が違うのでしょうか。 基準となるスマホの環境(画素数,OS,ブラウザ)を教えてください。 3.対応しました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

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

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

ただいまの回答率
85.51%

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

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

質問する

関連した質問