CodingMania

CodingMania

2016/7/21

ウィンドウサイズいっぱいに画像表示しズームしながらフェードアウト。画像・テキストを切り替えます

画面いっぱいにひろげていますが、幅・高さを指定することもできるのでスライドショーとしても使えます。

参考にしたページ
【jQuery】クロスフェードで切り替わるシンプルな画像スライドショー。
【jQuery】拡大・縮小のアニメーションをする例

背景写真の画像は、横1200px、縦800px。画像比率は1.5です。文字は画像で画面中央に配置するようにしています。
【リサイズに対応：改訂2016.08.05。画像位置修正：改訂20170711。】
・フェードアウトバージョン
・指定した回数でストップバージョン（JSの46行目で回数を指定できます。今は2）
・全画面表示ではなく高さを指定したバージョン
・全画面表示ではなくウィンドウの高さからパーセント指定したバージョン
・全画面表示ではなく横幅で合わせるバージョン【高さ取得：改訂20180112】

デモページへopen_in_new

JSを読み込みます

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>

[main.js]JavaScript

(function($) {

function setimage(){
(function($) {

function setimage(){
// 設定
var height =$(window).height(); // 高さ
var width =$(window).width(); // 幅
var win_ratio = width / height;

$(".Opening").css({"height":height});
$(".Opening ul li").css({"height":height});

if (win_ratio > 1.5){　//画像の比率が大きかったら
  $(".Opening ul li img.Opening__img").css({"width":"100%","height":"auto","margin-left":0});
  var winwidth = $(".Opening").width();
  var imgheight = winwidth*0.66;
  var winheight = $(".Opening").height();
  var imgtopmargin = (imgheight-winheight)/2;
  $(".Opening ul li img.Opening__img").css({"margin-top":-imgtopmargin});
}else if (win_ratio < 1.5){　//画像の比率が小さかったら
  var imgwidth = ((height/800))*1200;
  var winwidth = $(".Opening").width();
  var imgmargin = (winwidth-imgwidth)/2;
  $(".Opening ul li img.Opening__img").css({"width":imgwidth,"height":height,"margin-left":imgmargin,"margin-top":0});
}
}

  //slide
$(function(){
setimage();
var interval = 4000; // 切り替わりの間隔（ミリ秒）
var fade_speed = 2000; // フェード処理の早さ（ミリ秒）
$(".Opening ul li").hide().css({"position":"absolute","top":0,"left":0});
$(".Opening ul li:first").addClass("active").show();
$(".Opening ul li:first img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
setInterval(function(){
var $active = $(".Opening ul li.active");
var $activeafter = $(".Opening ul li.active:after");
var $next = $active.next("li").length?$active.next("li"):$(".Opening ul li:first");
//$active.fadeOut(fade_speed,function(){$active.removeClass("active");});
$active.fadeOut(fade_speed);
$active.removeClass("active");
$next.fadeIn(fade_speed).addClass("active");
$(".Opening ul li.active img.Opening__img").animate({paddingRight:0.1},{
  duration:5000,
  step:function(now,fx){$(this).css({transform:'scale(' + (1 + now) +')'});},
  complete:function(){$(".Opening ul li img.Opening__img").css("paddingRight",0);}
})
},interval);
});
//resi
var timer = false;
$(window).resize(function() {
    if (timer !== false) {
        clearTimeout(timer);
    }
    timer = setTimeout(function() {
        console.log('resized');
        setimage();
    }, 200);
});

})(jQuery);

HTMl

<div class="Opening">
<ul>
<li><span><img class="Opening__img" src="img/1_drtftgyuhij.jpg" alt=""></span><img class="Opening__text" src="img/tite_01.png" alt=""></li>
<li><span><img class="Opening__img" src="img/2_HIRO95_yuubaenokage.jpg" alt=""></span><img class="Opening__text" src="img/tite_02.png" alt=""></li>
<li><span><img class="Opening__img" src="img/3_adsfagsrethdter.jpg" alt=""></span><img class="Opening__text" src="img/tite_03.png" alt=""></li>
</ul>
<!-- /.Opening --></div>

CSS

/* Opening
-----------------------------------------*/
.Opening {
position:relative;
background-color: #FFF;
}
.Opening ul li{
  position: relative;
  overflow: hidden;
  width: 100%;
  text-align: center;
}
.Opening ul li img.Opening__text{
  position: absolute;
  top:50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform:translate(-50%, -50%);
  z-index: 9;
}
.Opening ul li span {
}
.Opening ul li span img.Opening__img{
  max-width: inherit;
  width: 100%;
  height: auto;
}

© CodingMania.net