以下のサイト様を参考に、Slickを利用して
徐々に画像拡大→ふんわりとした画像の切り替えを行いたいのですが、切り替わる際にふんわりとした動きにできません。
http://www.cattlemute.com/2019/02/23/1357/
→【DEMO】 http://www.cattlemute.com/publish/slick-zoom-sample/
試してみたこと
フェード要素にしている#slick-main .slideobjectとフェード設定要素の#slick-main .slick-continue .slideobjectのopacityの値をそれぞれ変えてみたりしましたが、変化が見られませんでした。
最近js/jQと勉強し始め、Slickの知識も0に近いです。
どなたかご教示いただけませんでしょうか。どうぞよろしくお願いいたします。
html
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>slickテスト</title> 6<link rel="stylesheet" type="text/css" href="css/slick.css"> 7<link rel="stylesheet" type="text/css" href="css/slick-theme.css"> 8<link rel="stylesheet" type="text/css" href="css/reset.css"> 9<link rel="stylesheet" type="text/css" href="css/test.css"> 10<script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> 11<script src="js/slick.min.js" type="text/javascript"></script> 12<script src="js/test.js" type="text/javascript"></script> 13</head> 14<body> 15 <div id="slick-main" class="slick"> 16 <div class="slideobject"> 17 <figure class="image" style="background-image: url(images/img01.jpg);"></figure> 18 <p class="text">Slide01</p> 19 </div> 20 <div class="slideobject"> 21 <figure class="image" style="background-image: url(images/img02.jpg);"></figure> 22 <p class="text">Slide02</p> 23 </div> 24 <div class="slideobject"> 25 <figure class="image" style="background-image: url(images/main_visual.jpg);"></figure> 26 <p class="text">Slide03</p> 27 </div> 28 </div>/body> 29</html> 30
css
1/* 効果をかけるためのスタイル設定 */ 2#slick-main .slick-slide{ /* slickによってelement.styleで付けられるopacityを無効化 */ opacity: 1 !important; } 3#slick-main .slideobject{ /* フェード要素の初期設定 */ opacity: 0; transition: 0s; width: 100%; height: 1000px; } 4#slick-main .slick-active .slideobject{ /* slick-active(効果開始)の際のフェード設定 */ /* [重要]slick側の設定と同じdurationを取る */ opacity: 1; transition: ease 5.0s; } 5#slick-main .slick-continue .slideobject{ /* エフェクトの継続用に付与したslick-continueのフェード設定 *//* [重要]slick側の設定と同じdurationを取る */ opacity: 0; transition: ease 5.0s; } 6#slick-main .image{ /* 画像 ズーム要素の初期設定 */ transform: scale(1.0, 1.0); transition: 0s; } 7#slick-main .slick-active .image{ /* 画像 slick-active(効果開始) *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.2, 1.2); transition: ease 10.0s; } 8#slick-main .slick-continue .image{ /* 画像 slick-continue *//* ズームをかける要素には必ずフェードに対して大きめのtransition-durationを取る */ transform: scale(1.4, 1.4); transition: ease 10.0s; } 9#slick-main p.text{ /* テキスト 初期設定 */ opacity: 0; transition: 0s; } 10#slick-main .slick-active p.text{ /* テキスト slick-active(効果開始) この辺は自由にduration */ opacity: 1; transition: ease 1.0s; transition-delay: 1.0s; } 11#slick-main .slick-continue p.text{ /* テキスト slick-continue この辺は自由にduration */ opacity: 0; transition: ease 1.0s; } 12 13/* スライド周りの基本スタイル */ 14.slideobject{ margin-top: 100px; position: relative; z-index: 10; overflow: hidden; vertical-align: bottom; } 15.slideobject .image {background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; width: 100%; height: 100%; position: absolute; z-index: 10; top: 0; left: 0; right: 0; bottom: 0; } 16.slideobject p.text{ font-size: 20px; line-height: 1.5em; width: 10.0em; height: 3.0em; margin: auto; position: absolute; z-index: 20; top: 0; left: 0; right: 0; bottom: 0; color: #fff; font-weight: bold; text-align: center; overflow: hidden; font-family: sofia-pro, sans-serif; font-weight: 700; font-style: normal; }
javascript
1(function($){ 2 $(window).load(function(){ 3 var slickbase = $('#slick-main'); 4 var timeline = 5000; 5 6 // ズームさせるためのslick側の設定 7 slickbase.slick({ 8 fade: true, // fadeモードで動作させる 9 autoplay: true, // autoplayモードを有効化する 10 autoplaySpeed: timeline, // [重要]画像の切り替えのタイミングをautoplaySpeedで取っておく 11 speed: 0, // [重要]通常はスライド自体の速度をこのプロパティで設定するがゼロに設定する(タイミング制御はCSS側で設定するため) 12 pauseOnHover: false, // 徐々にズームをさせるために一時停止は意味を持たないため無効化 13 pauseOnFocus: false, // 上に同じ 14 swipe: false, // [重要]徐々にズームをかける都合上、組込側が想定している挙動にするため、スワイプは無効化 15 swipeToSlide: false, // 上に同じ 16 slidesToShow: 1, // スライド数は1 17 slidesToScroll: 1, // スライドのスクロール数は1 18 dots: true, // ページングくらいは出したいのでdotはtrueで 19 arrows: false, // ページャーも一応設定可能だが、今回は扱わない 20 infinite: true, // 永続させる 21 }).on('beforeChange', function(event, slick, currentSlide){ 22 var slidebase = $(this).parents(); 23 // slick-activeを抜けた際にエフェクトの継続をかけるために付与 24 slidebase.find('.slick-slide').removeClass('slick-continue'); 25 slidebase.find('.slick-active').addClass('slick-continue'); 26 }); 27 28 // 以下は初回表示の際にスライドをスタートさせるための設定 29 var firstslide = slickbase.find('.slick-slide:nth-child(1)'); 30 firstslide.removeClass('slick-active'); 31 window.setTimeout(function(){ 32 firstslide.addClass('slick-active'); 33 }, 1); 34 35 // slick-dotの設定 36 $('.slick-dots li button').on('click', function(e){ 37 if( ! $(this).parent().hasClass('slick-active') ){ 38 $('.slick-slide').removeClass('slick-active slick-continue'); 39 }else{ 40 // slick-activeになっている要素のページング押下を無効化 41 e.preventDefault(); 42 } 43 }); 44 }); 45})(jQuery);
回答1件
あなたの回答
tips
プレビュー