Q&A
回答内容が10000文字を超えて、エラーリカバーできなかったので、ここに書きました。
メニューの指定幅以下制限、初期のみの背景画像表示(後にフェードアウト)はできました。
これでいいですか？
３つの画像がスライドインするトップページを作りたい。
どのようにすれば実現できるでしょうか？
ちなみに下記のようなサイトです。
回答4件
0
ベストアンサー
画像の幅が左から、400px, 450px, 350pxの場合です。#containerの位置・サイズ、画像のpadding, border, marginを考慮していません。画像のスライドインに伴って、画像を隠しているカーテンが開く実装方法です。
修正
画像の幅が同じで、画像の幅 x 3 がブラウザの画面幅より大きい画像を用意して下さい。そうでないと、隙間ができます。
修正
コードを少しすっきりさせました。
修正
iPhoneを持っていないので、iPhoneチェックサイトでチェックしました。
PCでもブラウザ幅を変えると2段になりますよ。
修正
ブラウザの画面幅が1000ピクセル未満の場合、1段目がスライドインして1.5秒後に2段目がスライドインします。
修正
画像にテキストをのせ、画像を伸縮するにはこうです。
修正
IE, Firefox, Chromeで動きます。Safariは画像・文字の上下設定がうまくいきませんね。
修正
IE, Firefox, Chrome, Safariで動きます。
Safariでは画像のサイズ取得のタイミングが違っていました。
修正
文字を上下左右中央に来るようにしました。
修正
すみません。z-indexではなかったですね。
メニューがちゃんと出るようにしました。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>3 Images Slide In</title> 6<style> 7body { 8 position : relative; 9 overflow : hidden; /* スクロールバーを表示させない */ 10} 11 12#container { 13 position : relative; 14 top : 0px; 15 left : 0px; 16 margin-top : -8px; /* 上に余白を作らない */ 17 margin-left : -8px; /* 左に余白を作らない */ 18} 19 20.imgWrapper /* 1枚の画像およびテキストをのせたdivコンテナ */ { 21 position : absolute; 22 z-index : 0; 23} 24 25.curtain { 26 position : absolute; 27 z-index : 1; /* 画像より手前 */ 28 background-color : white; 29} 30 31.img { 32 position : absolute; 33 z-index : 0; 34} 35 36.textOverImg /* 画像にのせるテキスト */ { 37 position : absolute; 38 width : 180px; 39 height : 30px; 40 color : white; 41 font-size : x-large; 42 text-align : center; 43 vertical-align : middle; 44} 45 46#menu { 47 position : relative; 48 overflow : hidden; 49 margin-left : -4px; 50 margin-right : -4px; 51} 52 53.menuItem { 54 position : relative; 55 float : left; 56 text-align : center; 57} 58 59#menuItem1, #menuItem3 { 60 border-left : solid 1px; 61 border-right : solid 1px; 62} 63</style> 64<script src="jquery-2.1.4.js"></script> 65<script> 66$(function() { 67 // スライドインする時間差 68 var delayBetweenSlideIn = 1500; // milliseconds 69 // アニメーションの時間 70 var durationOfAnimation = 800; // milliseconds 71 // スライドインする画像のオブジェクト全て(左から) 72 var allImgs = [ $('#img1'), $('#img2'), $('#img3') ]; 73 // 画像のもとのサイズ(幅、高さ、縦横比)全て(左から) 74 var allImgSizes = []; 75 // 画像にのせるテキストのdivコンテナ全て(左から) 76 var allTexts = [ $('#text1'), $('#text2'), $('#text3') ]; 77 // 画像にのせるテキストのサイズ(幅、高さ)全て(左から) 78 var allTextSizes = []; 79 // 画像のもとの高さの最大値 80 var maxHeightOfImg = 0; 81 // 画像を隠すカーテンのオブジェクト全て(左から) 82 var allCurtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ]; 83 // ブラウザの画面幅がこの値より狭くなると2段モード 84 var discontinuousWidth = 1000; // px 85 // 2段にするか否か 86 var modeIn2Rows; 87 // 画像の実際の幅 88 var widthOfImg; 89 // 大きい方の画像の実際の幅 90 var widthOfLargerImg; 91 // 大きい方の画像の実際の高さ 92 var heightOfLargerImg; 93 // アニメーションが開始されたか否か 94 var startedAnimation = false; 95 // 画像とメニューの隙間 96 var gapBetweenImgAndMenu = 10; // px 97 // 1メニュー項目の幅 98 var widthOfMenuItem; 99 // メニューのボーダー 100 var borderOfMenu = 1; // px 101 102 103 // Safariの場合、ここでは早すぎて、画像のサイズを取得できない 104 initializeAndStartAnimation(); 105 106 // 画像の読み込みが完了後に動作。 107 $(window).on('load', function() { 108 // IEの場合、ここでは、アニメーションが正しく動作しない 109 initializeAndStartAnimation(); 110 }); 111 112 113 function placeObjects(posX, posXOfLargerImg, withCurtains) { 114 var maxHeightOfImg = 0; 115 116 for (var index = 0; index < allImgs.length; index++) { 117 if (! modeIn2Rows || index !== 0) { 118 // 1段モード または 2段モード2番目以降の画像(下段) 119 // 1段モードのとき、縦位置は 0 に戻す 120 var posY = (modeIn2Rows ? heightOfLargerImg : 0); 121 var heightOfImg = allImgSizes[index].ratio * widthOfImg; 122 123 maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg); 124 125 moveTo(allImgs[index].parent(), posX, posY); 126 127 resizeTo(allImgs[index], widthOfImg, heightOfImg); 128 129 // コンテナからの相対座標 130 moveTo(allTexts[index], 131 (widthOfImg - allTextSizes[index].width) / 2, 132 (heightOfImg - allTextSizes[index].height) / 2); 133 134 posX += widthOfImg; 135 136 if (withCurtains) { 137 moveTo(allCurtains[index], posX, posY); 138 resizeTo(allCurtains[index], widthOfImg, maxHeightOfImg); 139 } 140 } 141 else { 142 // 2段モード かつ 最初の画像(上段) 143 moveTo(allImgs[index].parent(), posXOfLargerImg); 144 145 // 幅を画面いっぱいにする(縦横比はそのまま) 146 resizeTo(allImgs[index], widthOfLargerImg, heightOfLargerImg); 147 148 // コンテナからの相対座標 149 moveTo(allTexts[index], 150 (widthOfLargerImg - allTextSizes[index].width) / 2, 151 (heightOfLargerImg - allTextSizes[index].height) / 2); 152 // posX += 0; 153 // カーテンなし 154 } 155 } 156 157 moveTo($('#menu'), undefined, 158 (modeIn2Rows ? heightOfLargerImg : 0) + maxHeightOfImg + gapBetweenImgAndMenu); 159 resizeTo($('.menuItem'), widthOfMenuItem) 160 } 161 162 163 function initializeAndStartAnimation() { 164 if (startedAnimation || ! calculateSizes()) { 165 return; 166 } 167 // アニメーションが開始されていず、サイズを計算できたときに続行 168 169 // ブラウザの画面幅があらかじめわからないので、CSSではなく、 170 // JavaScriptで、画像、カーテン、テキスト、メニューの初期位置・サイズを設定する。 171 // 最左の画像の位置は、ブラウザの画面より画像幅1つ分左 172 placeObjects(0 - widthOfImg, 0 - widthOfLargerImg, true); 173 174 // 画像およびカーテンのアニメーション設定 175 (function(posX) { 176 for (var index = 0; index < allImgs.length; index++) { 177 if (! modeIn2Rows) { 178 // 1段モード 179 slideImgIn(allImgs[index].parent(), posX); 180 181 posX += widthOfImg; 182 183 openCurtain(allCurtains[index], posX); 184 } 185 else { 186 // 2段モード 187 if (index === 0) { 188 // 最初の画像 189 // 上段 190 slideImgIn(allImgs[index].parent(), posX); 191 // posX += 0; 192 // カーテンなし 193 } 194 else { 195 // 2番目以降の画像 196 // 下段 197 // setTimeoutのコールバック関数に変化する値を 198 // 正しくわたすため、forループの実行毎に異なるスコープを作る 199 (function(thisImg, thisCurtain, thisPosX) { 200 setTimeout(function() { 201 // 指定ミリ秒遅れて動作 202 slideImgIn(thisImg.parent(), thisPosX); 203 204 thisPosX += widthOfImg; 205 206 openCurtain(thisCurtain, thisPosX); 207 }, 208 delayBetweenSlideIn); 209 }) 210 (allImgs[index], allCurtains[index], posX); 211 212 posX += widthOfImg; 213 } 214 } 215 } 216 })(0); // 最左の画像の位置は、ブラウザの画面と同じ 217 218 startedAnimation = true; 219 } 220 221 222 /** ブラウザの画面幅に応じてサイズを(再)計算する 223 * @return true:正しく計算できた／false:正しく計算できなかった 224 */ 225 function calculateSizes() { 226 var calculated = true; 227 228 // 画像のもとのサイズを取得 229 if (allImgSizes.length < allImgs.length) { 230 // まだ取得できていないときのみ、取得する 231 $.each(allImgs, function(index, currentImg) { 232 var width = currentImg.width(); 233 var height = currentImg.height(); 234 235 if (width == 0 || height == 0) { 236 // Safariで画像がまだロードされていない場合 237 calculated = false; 238 return; 239 } 240 241 var ratio = height / width; // 画像の縦横比 242 allImgSizes[index] = { 'width' : width, 'height' : height, 'ratio' : ratio }; 243 }); 244 245 if (! calculated) { 246 return false; 247 } 248 } 249 250 // テキストのサイズを取得 251 if (allTextSizes.length < allTexts.length) { 252 // まだ取得できていないときのみ、取得する 253 $.each(allTexts, function(index, currentText) { 254 var width = currentText.width(); 255 var height = currentText.height(); 256 allTextSizes[index] = { 'width' : width, 'height' : height }; 257 }); 258 } 259 260 var widthOfWindow = $(window).width(); 261 modeIn2Rows = (widthOfWindow < discontinuousWidth); 262 widthOfImg = widthOfWindow / (modeIn2Rows ? allImgs.length - 1 : allImgs.length); 263 widthOfLargerImg = widthOfWindow; 264 heightOfLargerImg = allImgSizes[0].ratio * widthOfLargerImg; 265 var marginOfMenu = ($('#menu').css('margin-left').replace(/px$/, '') - 0) + 266 ($('#menu').css('margin-right').replace(/px$/, '') - 0); 267 widthOfMenuItem = - 4 + 268 (widthOfWindow - borderOfMenu * (allImgs.length + 1) + marginOfMenu) / allImgs.length; 269 270 return true; 271 } 272 273 274 // 画像、カーテン、テキスト、メニューの位置を変更する 275 // 画像の場合はそのコンテナ 276 function moveTo(obj, targetPosX, targetPosY) { 277 if (typeof targetPosX !== 'undefined') { 278 // targetPosX が指定されているときのみ変更する 279 obj.css('left', targetPosX); 280 } 281 282 if (typeof targetPosY !== 'undefined') { 283 // targetPosY が指定されているときのみ変更する 284 obj.css('top', targetPosY); 285 } 286 } 287 288 // 画像、カーテン、メニュー項目のサイズを変更する 289 function resizeTo(obj, targetWidth, targetHeight) { 290 if (typeof targetWidth !== 'undefined') { 291 // targetWidth が指定されているときのみ変更する 292 obj.css('width', targetWidth) 293 } 294 295 if (typeof targetHeight !== 'undefined') { 296 // targetHeight が指定されているときのみ変更する 297 obj.css('height', targetHeight); 298 } 299 } 300 301 // 画像をのせたコンテナをアニメーションでスライドインする 302 function slideImgIn(imgWrapper, targetPosX) { 303 imgWrapper.animate({ 304 'left' : targetPosX 305 }, durationOfAnimation); 306 } 307 308 // カーテンをアニメーションで開ける 309 function openCurtain(curtain, targetPosX) { 310 curtain.animate({ 311 'left' : targetPosX, 312 'width' : 0 313 // 最終的に幅が 0 になる。 314 }, durationOfAnimation); 315 } 316 317 318 // ブラウザの画面幅が変わったときに動作する。 319 $(window).on('resize', function() { 320 calculateSizes(); 321 322 // ブラウザの画面幅に合わせて、画像の位置・サイズを再設定する。 323 // カーテンはない 324 // 最左の画像の位置は、ブラウザの画面と同じ 325 placeObjects(0, 0, false); 326 }); 327}); 328</script> 329</head> 330<body> 331 <div id="container"> 332 <div id="imgWrapper1" class="imgWrapper"> 333 <img src="img/second/02.jpg" id="img1" class="img"> 334 <div class="textOverImg" id="text1">1枚目</div> 335 </div> 336 337 <div id="curtain1" class="curtain"></div> 338 339 <div id="imgWrapper2" class="imgWrapper"> 340 <img src="img/second/03.jpg" id="img2" class="img"> 341 <div class="textOverImg" id="text2">2枚目 = my tune</div> 342 </div> 343 344 <div id="curtain2" class="curtain"></div> 345 346 <div id="imgWrapper3" class="imgWrapper"> 347 <img src="img/second/04.jpg" id="img3" class="img"> 348 <div class="textOverImg" id="text3">3枚目 - 777<br>2行目</div> 349 </div> 350 351 <div id="curtain3" class="curtain"></div> 352 </div> 353 <div id="menu"> 354 <div class="menuItem" id="menuItem1">メニュー1</div> 355 <div class="menuItem" id="menuItem2">メニュー2</div> 356 <div class="menuItem" id="menuItem3">メニュー3</div> 357 </div> 358</body> 359</html>
投稿2017/01/06 17:28
編集2017/02/19 06:32総合スコア1105
0
１．横にスライドするものを作る
２．３つに増やす
このようにすれば実現できます。
投稿2016/12/26 03:23
総合スコア110
0
修正
背景画像を画面いっぱい(縦横比はそのまま)に、メニューのバグを直しました。
修正
バグを修正しました。
これでどうですか？
修正
jQueryのバージョンによるものでした。3.1.1に対応しました。
HTML
1<!DOCTYPE html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>3 Images Slide In</title> 6<style> 7body { 8 position: relative; 9 overflow: hidden; /* スクロールバーを表示させない */ 10} 11#container { 12 position: relative; 13 margin-top: -8px; /* 上に余白を作らない */ 14 margin-left: -8px; /* 左に余白を作らない */ 15} 16#backgroundImg { 17 position: absolute; 18} 19.imgWrapper /* 1枚の画像とテキストをのせたコンテナ */ { 20 position: absolute; 21 z-index: 0; 22} 23.curtain { 24 position: absolute; 25 z-index: 1; /* 画像より手前 */ 26 background-color: white; 27} 28.img { 29 position: absolute; 30 z-index: 0; 31 display: none; /* 初期状態は非表示 */ 32} 33.textOverImg /* 画像にのせるテキスト */ { 34 position: absolute; 35 width: 180px; 36 height: 30px; 37 color: white; 38 font-size: x-large; 39 text-align: center; 40 vertical-align: middle; 41 display: none; /* 初期状態は非表示 */ 42} 43#menu { 44 position: relative; 45 overflow: hidden; 46 margin-left: -4px; 47 margin-right: -4px; 48 display: none; /* 初期状態は非表示 */ 49} 50.menuItem { 51 position: relative; 52 float: left; 53 text-align: center; 54} 55.menuItem { 56 border-left: solid 1px; 57} 58#menu :last-child { 59 border-right: solid 1px; 60} 61</style> 62<script src="jquery-3.1.1.min.js"></script> 63<script> 64$(function() { 65 // 背景画像のフェードアウト開始までの時間 66 var delayBeforeFadingOutBackground = 2000; // ミリ秒 67 // 背景画像のフェードアウト中の時間 68 var durationOfFadingOutBackground = 800; // ミリ秒 69 // 2段モードの時、スライドインする時間差 70 var delayBetweenSlides = 1500; // ミリ秒 71 // スライドイン中の時間 72 var durationOfSlide = 800; // ミリ秒 73 74 // 背景画像 75 var backgroundImg = $('#backgroundImg'); 76 // 背景画像の縦横比 77 var backgroundImgRatio = null; // 未設定 78 79 // 画面幅がこの値より狭くなると2段モード 80 var discontinuousWidth = 1000; // px 81 // 画面幅 82 var widthOfWindow; 83 // 2段モードか否か 84 var modeIn2Rows; 85 86 // スライドインする画像(左から) 87 var imgs = [ $('#img1'), $('#img2'), $('#img3') ]; 88 // 画像の縦横比(左から) 89 var imgRatios = []; // 未設定 90 91 // 画像の実際の幅 92 var widthOfImg; 93 // 大きい方の画像の実際の幅、高さ 94 var widthOfLargerImg, heightOfLargerImg; 95 96 // 画像にのせるテキストのコンテナ(左から) 97 var texts = [ $('#text1'), $('#text2'), $('#text3') ]; 98 // 画像にのせるテキストのサイズ(幅、高さ)(左から) 99 var textSizes = []; // 未設定 100 101 // 画像を隠すカーテン(左から) 102 var curtains = [ $('#curtain1'), $('#curtain2'), $('#curtain3') ]; 103 104 // メニュー 105 var menu = $('#menu'); 106 // 画像とメニューの隙間 107 var gapBetweenImgsAndMenu = 10; // px 108 // メニューの最大幅 109 var maxWidthOfMenu = 600; // px 110 // メニューのボーダー 111 var borderOfMenu = 1; // px 112 // メニューの幅 113 var widthOfMenu; 114 // 1メニュー項目の幅 115 var widthOfMenuItem; 116 117 // 初期処理が正しくできたか否か 118 var initialized = false; 119 120 121 // IEでは、ここでアニメーションが正しく動作する 122 initialize(); 123 124 // 画像の読み込みが完了後に動作 125 // Safariでは、ここで正しく画像の縦横比を取得できる 126 $(window).on('load', initialize); 127 128 /** 129 * オブジェクト(画像、カーテン、テキスト、メニュー)の位置・サイズを設定する 130 * @param posX 最左の画像の横位置 131 * @param posXOfLargerImg 大きい方の画像の横位置 132 * @param withCurtains カーテンを設定 true:する／false:しない 133 */ 134 function placeObjects(posX, posXOfLargerImg, withCurtains) { 135 var maxHeightOfImg = 0; 136 137 for (var index = 0; index < imgs.length; index++) { 138 if (! modeIn2Rows || index) { 139 // 1段モード または 2段モード2番目以降の画像(下段) 140 // 1段モードの時、縦位置は 0 に戻す 141 var posY = (modeIn2Rows ? heightOfLargerImg : 0); 142 var heightOfImg = imgRatios[index] * widthOfImg; 143 maxHeightOfImg = Math.max(maxHeightOfImg, heightOfImg); 144 145 // 画像、テキストをのせたコンテナを移動 146 moveTo(imgs[index].parent(), posX, posY); 147 resizeTo(imgs[index], widthOfImg, heightOfImg); 148 149 // コンテナからの相対座標で 150 moveTo(texts[index], 151 (widthOfImg - textSizes[index].width) / 2, 152 (heightOfImg - textSizes[index].height) / 2); 153 154 posX += widthOfImg; 155 156 if (withCurtains) { 157 moveTo(curtains[index], posX, posY); 158 resizeTo(curtains[index], widthOfImg, maxHeightOfImg); 159 } 160 } 161 else { 162 // 2段モード、最初の画像(上段) 163 moveTo(imgs[index].parent(), posXOfLargerImg); 164 // 幅を画面いっぱいにする(縦横比はそのまま) 165 resizeTo(imgs[index], widthOfLargerImg, heightOfLargerImg); 166 167 moveTo(texts[index], 168 (widthOfLargerImg - textSizes[index].width) / 2, 169 (heightOfLargerImg - textSizes[index].height) / 2); 170 // posX += 0; 171 // カーテンなし 172 } 173 } 174 175 moveTo(menu, (widthOfWindow - widthOfMenu) / 2, 176 (modeIn2Rows ? heightOfLargerImg : 0) + maxHeightOfImg + gapBetweenImgsAndMenu); 177 178 resizeTo($('.menuItem'), widthOfMenuItem) 179 } 180 181 function initialize() { 182 if (initialized || ! calcSizes()) { 183 return; 184 } 185 // 初期処理が正しくできておらず、サイズを計算できた時に続行 186 187 resizeTo(backgroundImg, widthOfWindow, backgroundImgRatio * widthOfWindow); 188 189 setTimeout(function() { 190 backgroundImg.fadeOut(durationOfFadingOutBackground, afterFadingOutBackground); 191 }, 192 delayBeforeFadingOutBackground); 193 194 initialized = true; 195 } 196 197 // 背景画像フェードアウト終了後に動作 198 function afterFadingOutBackground() { 199 // 最左の画像の横位置は、画面より画像幅1つ分左 200 placeObjects(- widthOfImg, - widthOfLargerImg, true); 201 202 // 初期状態で非表示だったオブジェクトを表示 203 $('.img').show(); 204 $('.textOverImg').show(); 205 menu.show(); 206 207 // 画像およびカーテンのアニメーション設定 208 // 最左の画像の横位置は画面と同じ 209 var posX = 0; 210 for (var index = 0; index < imgs.length; index++) { 211 if (! modeIn2Rows) { 212 // 1段モード 213 slideImgIn(imgs[index].parent(), posX); 214 posX += widthOfImg; 215 openCurtain(curtains[index], posX); 216 } 217 else if (! index) { 218 // 2段モード、最初の画像(上段) 219 slideImgIn(imgs[index].parent(), posX); 220 // posX += 0; 221 // カーテンなし 222 } 223 else { 224 // 2段モード、2番目以降の画像(下段) 225 slideWithDelay(imgs[index], curtains[index], posX); 226 posX += widthOfImg; 227 } 228 } 229 } 230 231 function slideWithDelay(img, curtain, posX) { 232 setTimeout(function() { 233 slideImgIn(img.parent(), posX); 234 posX += widthOfImg; 235 openCurtain(curtain, posX); 236 }, 237 delayBetweenSlides); 238 } 239 240 /** 画面幅に応じて縦横比を(再)計算する 241 * @return 正しく計算 true:できた／false:できなかった 242 */ 243 function calcSizes() { 244 var calced = true; 245 246 if (backgroundImgRatio === null) { 247 // まだ取得できていない時のみ取得 248 var width = backgroundImg.width(); 249 var height = backgroundImg.height(); 250 if (! width || ! height) { 251 // Safariで画像がまだロードされていない時 252 return false; 253 } 254 backgroundImgRatio = height / width; 255 } 256 257 // 画像のサイズを取得 258 if (imgRatios.length < imgs.length) { 259 // まだ取得できていない時のみ取得 260 $.each(imgs, function(index, current) { 261 var width = current.width(); 262 var height = current.height(); 263 if (! width || ! height) { 264 calced = false; 265 return; 266 } 267 imgRatios[index] = height / width; 268 }); 269 if (! calced) { 270 return false; 271 } 272 } 273 274 // テキストのサイズを取得 275 if (textSizes.length < texts.length) { 276 // まだ取得できていない時のみ取得 277 $.each(texts, function(index, current) { 278 textSizes[index] = { 279 'width' : current.width(), 280 'height': current.height() 281 }; 282 }); 283 } 284 285 widthOfWindow = $(window).width(); 286 modeIn2Rows = (widthOfWindow < discontinuousWidth); 287 288 widthOfImg = widthOfWindow / (modeIn2Rows ? imgs.length - 1 : imgs.length); 289 290 widthOfLargerImg = widthOfWindow; 291 heightOfLargerImg = imgRatios[0] * widthOfLargerImg; 292 293 var marginOfMenu = (menu.css('margin-left').replace(/px$/, '') - 0) + 294 (menu.css('margin-right').replace(/px$/, '') - 0); 295 var menuItems = $('.menuItem').length; 296 widthOfMenu = Math.min(maxWidthOfMenu, 297 widthOfWindow - borderOfMenu * (menuItems + 1) + marginOfMenu) 298 widthOfMenuItem = widthOfMenu / menuItems - 4; 299 300 return true; 301 } 302 303 // 画像、カーテン、テキスト、メニューの位置を変更 304 function moveTo(obj, posX, posY) { 305 if (posX !== void 0) { 306 // posX が指定されている時のみ変更 307 obj.css('left', posX); 308 } 309 if (posY !== void 0) { 310 // posY が指定されている時のみ変更 311 obj.css('top', posY); 312 } 313 } 314 315 // 画像、カーテン、メニュー項目のサイズを変更 316 function resizeTo(obj, width, height) { 317 if (width !== void 0) { 318 // width が指定されている時のみ変更 319 obj.css('width', width) 320 } 321 if (height !== void 0) { 322 // height が指定されている時のみ変更 323 obj.css('height', height); 324 } 325 } 326 327 // 画像をのせたコンテナをアニメーションでスライドインする 328 function slideImgIn(imgWrapper, targetPosX) { 329 imgWrapper.animate({ 330 'left': targetPosX 331 }, durationOfSlide); 332 } 333 334 // カーテンをアニメーションで開ける 335 function openCurtain(curtain, targetPosX) { 336 curtain.animate({ 337 'left': targetPosX, 338 'width': 0 // 最終的に幅が 0 になる 339 }, durationOfSlide); 340 } 341 342 // 画面幅が変わった時に動作する 343 $(window).on('resize', function() { 344 calcSizes(); 345 // 画面幅に合わせて、画像の位置・サイズを再設定する 346 // 最左の画像の横位置は、画面と同じ。カーテンはない 347 placeObjects(0, 0, false); 348 }); 349}); 350</script> 351</head> 352<body> 353 <div id="container"> 354 <img src="img/Background-Image.jpg" id="backgroundImg"> 355 356 <div class="imgWrapper" id="imgWrapper1"> 357 <img src="img/second/02.jpg" class="img" id="img1"> 358 <div class="textOverImg" id="text1">1枚目</div> 359 </div> 360 <div class="curtain" id="curtain1"></div> 361 362 <div class="imgWrapper" id="imgWrapper2"> 363 <img src="img/second/03.jpg" class="img" id="img2"> 364 <div class="textOverImg" id="text2">2枚目 = my tune</div> 365 </div> 366 <div class="curtain" id="curtain2"></div> 367 368 <div class="imgWrapper" id="imgWrapper3"> 369 <img src="img/second/04.jpg" class="img" id="img3"> 370 <div class="textOverImg" id="text3">3枚目 - 777<br>2行目</div> 371 </div> 372 <div class="curtain" id="curtain3"></div> 373 </div> 374 <div id="menu"> 375 <div class="menuItem" id="menuItem1">メニュー1</div> 376 <div class="menuItem" id="menuItem2">メニュー2</div> 377 <div class="menuItem" id="menuItem3">メニュー3</div> 378 <div class="menuItem" id="menuItem4">メニュー4</div> 379 </div> 380</body> 381</html>
投稿2017/02/19 06:39
編集2017/02/26 03:36総合スコア1105
何度もご回答いただきありありがとうございます。
さっそく実行しました。理想どおりの動きですばらしいです。
あと、すみません、初期のみの背景画像表示も画面サイズにあわせて伸縮できないでしょうか。
伸縮できますが、画面サイズと全く同じでいいんですか？
はい
menuItemが４つになった場合、中央に４つ並ばないのですがどうすればいいでしょうか。
（大きい画面の場合は中央よりやや右寄り、小さい画面だと、４項目目がカラム落ちになります）
すみません。
全く動かないので、再度ソースを確認していただけないでしょうか。
すみません。壁紙が表示されたままで先に進みません。
再度ソースを確認していただけないでしょうか。
私の環境では、IE, Chrome, Firefox, Safariでちゃんと動きます。
ブラウザでファンクションキー[F12]を押して「コンソール」→エラーは出ていませんか？
動かないので、コードを確認してみました。
以前のコードと比べると、175行目あたりが、変わっているのですが、
従来のコードに、このコードを置き換えると、
背景画像が左端に表示されたままで、止まってしまいます。
ご確認頂けないでしょうか。
''' function inititialize() {
if (initialized || ! calcSizes()) {
return;
}
// 初期処理が正しくできておらず、サイズを計算できた時に続行
resizeTo(backgroundImg, widthOfWindow, backgroundImgRatio * widthOfWindow);
setTimeout(function() {
backgroundImg.fadeOut(durationOfFadingOutBackground, afterFadingOutBackground);
},
delayBeforeFadingOutBackground);
initialized = true;
}
全体的に細かいところが変わっていたりするので、全体を置き換えてください。
全体を置き換えてもうまく動かないのですが、
どうすれば、動かない原因がわかるか教えて頂けないでしょうか。
ファンクションキー[F12]を押して「コンソール」のどこをみたらわかるのでしょうか？
Chromeで[F12]を押して、[Sources]を見てください。赤い波線が出ていませんか？
以下エラーが出ているようです。
ファイル名はzzz.html,
jqueryは jquery-3.1.1.min.jsをしております。
これでわかりますでしょうか。
Uncaught TypeError: $(...).size is not a function
at calcSize(zzz.html:295)
at initialize(zzz.html:182)
at HTMLDocument.<anonymous>(aaa.html:122)>
at j (jquery-3.1.1.min.js:2)
at k (jquery-3.1.1.min.js:2)
ありがとうございます。動くようになりました。
あと、背景画像が中央でなく左上に配置されてしまうのですが、
原因を教えてください。
<div id="container">の中に<img src="背景画像のパス" id="backgroundImg">を入れていますか？
html5xさんの方で修正を加えたHTML(zzz.html?)を質問に書いてください。
0
<img src="hoge.jpg">
img{
animation-name:hogeani;
animation-duration:1s;
}
@keyframe hogeani{
0%{position:absolute;left:-100vw;}
100%{position:relative;left:0;}
}
みたいなのを量産すれば良いかと
（※animationの辺りはうろ覚え）
（言ってることはWanOOOOOOさんと同じです）
投稿2016/12/26 10:02
編集2016/12/28 08:50
総合スコア71
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/01/08 08:31
2017/01/08 15:24
2017/01/09 08:27
2017/02/03 15:09
2017/02/04 06:07
2017/02/05 02:08
2017/02/05 02:30
2017/02/05 04:34
2017/02/05 10:04
2017/02/08 23:23
2017/02/12 03:21
2017/02/12 11:59
2017/02/12 13:20
2017/02/15 14:33
2017/02/18 02:09
2017/02/18 03:05
2017/02/18 03:08