アニメーションの練習として、
下記にアップされているスライダーアニメーションのソースコードをコピぺし自身のレンタルサーバーにアップしたところ、
矢印をクリックするとアニメーションが動作するのですが、本来は自動再生されるはずなのにされません。
■コピペ元の参考アニメーション
https://codepen.io/bcarvalho/pen/gWPvJB
cdnで読み込まれていた、jQueryとTweenMaxは読み込みました。
その他編集した箇所はなく、元のコードをコピペしただけなのですが…
逆に、動作しないソースコードをCODEPEN等のオンラインエディタにコピペすると何故か正常に動作します。
オンラインエディタでは動くのに、ブラウザでは動かない原因はなんなのでしょうか。
プラグインのバージョンは、サンプルと同じにしています。
どなたか原因がわかる方がいましたら教えてください。
HTML
1//自ら追記した部分 2<!doctype html> 3<html> 4<head> 5<meta charset="utf-8"> 6<title>test</title> 7<link rel="stylesheet" href="style.css" type="text/css" media="all" /> 8<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 9<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.1/TweenMax.min.js"></script> 10<script type="text/javascript" src="main.js"></script> 11</head> 12 13<body> 14 <main class="main-content"> 15 ~サンプルをコピペ~ 16</main> 17</body> 18</html> 19
javascript
1//main.js 2var slideshowDuration = 4000; 3var slideshow=$('.slideshow'); 4 5function slideshowSwitch(slideshow,index,auto){ 6 if(slideshow.data('wait')) return; 7 8 var slides = slideshow.find('.slide'); 9 var pages = slideshow.find('.pagination'); 10 var activeSlide = slides.filter('.is-active'); 11 var activeSlideImage = activeSlide.find('.image-container'); 12 var newSlide = slides.eq(index); 13 var newSlideImage = newSlide.find('.image-container'); 14 var newSlideContent = newSlide.find('.slide-content'); 15 var newSlideElements=newSlide.find('.caption > *'); 16 if(newSlide.is(activeSlide))return; 17 18 newSlide.addClass('is-new'); 19 var timeout=slideshow.data('timeout'); 20 clearTimeout(timeout); 21 slideshow.data('wait',true); 22 var transition=slideshow.attr('data-transition'); 23 if(transition=='fade'){ 24 newSlide.css({ 25 display:'block', 26 zIndex:2 27 }); 28 newSlideImage.css({ 29 opacity:0 30 }); 31 32 TweenMax.to(newSlideImage,1,{ 33 34 alpha:1, 35 onComplete:function(){ 36 37 newSlide.addClass('is-active').removeClass('is-new'); 38 activeSlide.removeClass('is-active'); 39 newSlide.css({display:'',zIndex:''}); 40 newSlideImage.css({opacity:''}); 41 slideshow.find('.pagination').trigger('check'); 42 slideshow.data('wait',false); 43 if(auto){ 44 timeout=setTimeout(function(){ 45 slideshowNext(slideshow,false,true); 46 },4000); 47 slideshow.data('timeout',timeout);}}}); 48 } else { 49 if(newSlide.index()>activeSlide.index()){ 50 var newSlideRight=''; 51 var newSlideLeft=0; 52 var newSlideImageRight='auto'; 53 var newSlideImageLeft=-slideshow.width()/8; 54 var newSlideImageToRight=''; 55 var newSlideImageToLeft=0; 56 var newSlideContentLeft=0; 57 var newSlideContentRight='auto'; 58 var activeSlideImageLeft=slideshow.width()/4; 59 } else { 60 var newSlideRight=''; 61 var newSlideLeft=0; 62 var newSlideImageRight='auto'; 63 var newSlideImageLeft=-slideshow.width()/8; 64 var newSlideImageToRight=''; 65 var newSlideImageToLeft=0; 66 var newSlideContentLeft=0; 67 var newSlideContentRight='auto'; 68 var activeSlideImageLeft=slideshow.width()/4; 69 } 70 71 newSlide.css({ 72 display:'block', 73 width:0, 74 right:newSlideRight, 75 left:newSlideLeft 76 ,zIndex:2 77 }); 78 79 newSlideImage.css({ 80 width:slideshow.width(), 81 right:newSlideImageRight, 82 left:newSlideImageLeft 83 }); 84 85 newSlideContent.css({ 86 width:slideshow.width(), 87 left:newSlideContentLeft, 88 right:newSlideContentRight 89 }); 90 91 activeSlideImage.css({ 92 left:0 93 }); 94 95 TweenMax.set(newSlideElements,{y:20,force3D:true}); 96 TweenMax.to(activeSlideImage,1,{ 97 left:activeSlideImageLeft, 98 ease:Power3.easeInOut 99 }); 100 101 TweenMax.to(newSlide,1,{ 102 width:slideshow.width(), 103 ease:Power3.easeInOut 104 }); 105 106 TweenMax.to(newSlideImage,1,{ 107 right:newSlideImageToRight, 108 left:newSlideImageToLeft, 109 ease:Power3.easeInOut 110 }); 111 112 TweenMax.staggerFromTo(newSlideElements,0.8,{alpha:0,y:60},{alpha:1,y:0,ease:Power3.easeOut,force3D:true,delay:0.6},0.1,function(){ 113 newSlide.addClass('is-active').removeClass('is-new'); 114 activeSlide.removeClass('is-active'); 115 newSlide.css({ 116 display:'', 117 width:'', 118 left:'', 119 zIndex:'' 120 }); 121 122 newSlideImage.css({ 123 width:'', 124 right:'', 125 left:'' 126 }); 127 128 newSlideContent.css({ 129 width:'', 130 left:'' 131 }); 132 133 newSlideElements.css({ 134 opacity:'', 135 transform:'' 136 }); 137 138 activeSlideImage.css({ 139 left:'' 140 }); 141 142 slideshow.find('.pagination').trigger('check'); 143 slideshow.data('wait',false); 144 if(auto){ 145 timeout=setTimeout(function(){ 146 slideshowNext(slideshow,false,true); 147 },4000); 148 slideshow.data('timeout',timeout); 149 } 150 }); 151 } 152} 153 154function slideshowNext(slideshow,previous,auto){ 155 var slides=slideshow.find('.slide'); 156 var activeSlide=slides.filter('.is-active'); 157 var newSlide=null; 158 if(previous){ 159 newSlide=activeSlide.prev('.slide'); 160 if(newSlide.length === 0) { 161 newSlide=slides.last(); 162 } 163 } else { 164 newSlide=activeSlide.next('.slide'); 165 if(newSlide.length==0) 166 newSlide=slides.filter('.slide').first(); 167 } 168 169 slideshowSwitch(slideshow,newSlide.index(),auto); 170} 171 172function homeSlideshowParallax(){ 173 var scrollTop=$(window).scrollTop(); 174 if(scrollTop>windowHeight) return; 175 var inner=slideshow.find('.slideshow-inner'); 176 var newHeight=windowHeight-(scrollTop/2); 177 var newTop=scrollTop*0.8; 178 179 inner.css({ 180 transform:'translateY('+newTop+'px)',height:newHeight 181 }); 182} 183 184$(document).ready(function() { 185 $('.slide').addClass('is-loaded'); 186 187 $('.slideshow .arrows .arrow').on('click',function(){ 188 slideshowNext($(this).closest('.slideshow'),$(this).hasClass('prev')); 189}); 190 191 $('.slideshow .pagination .item').on('click',function(){ 192 slideshowSwitch($(this).closest('.slideshow'),$(this).index()); 193}); 194 195 $('.slideshow .pagination').on('check',function(){ 196 var slideshow=$(this).closest('.slideshow'); 197 var pages=$(this).find('.item'); 198 var index=slideshow.find('.slides .is-active').index(); 199 pages.removeClass('is-active'); 200 pages.eq(index).addClass('is-active'); 201}); 202 203var timeout=setTimeout(function(){ 204 slideshowNext(slideshow,false,true); 205},4000); 206 207slideshow.data('timeout',timeout); 208}); 209 210if($('.main-content .slideshow').length > 1) { 211 $(window).on('scroll',homeSlideshowParallax); 212}