実現したいこと
Lottieデータの再生についてですが、通常のアニメーション再生ではなくスクロール量に応じて再生される方法がLottieのJSで実現出来ない様なので、例えば他のJSライブラリを併用する形などで可能になればと思います。
どなたかアドバイスいただける方おりましたらよろしくお願いいたします。m(_ _)m
前提
- lottieは https://github.com/airbnb/lottie-web からダウンロードしています。
- Lottieアニメーションの制作はAfterEffects+Bodymovinで制作、書き出しています。
- 下記サンプルのソースコードlottieanim.jsにアニメーションのデータを入れています。
該当のソースコード
HTML
1<html xmlns="http://www.w3.org/1999/xhtml"> 2<meta charset="UTF-8"> 3<head> 4 <style> 5 body{ 6 background-color:#fff; 7 margin: 0px; 8 height: 100%; 9 overflow: hidden; 10 } 11 #lottie{ 12 z-index:90001; 13 background-color:#fff; 14 width:100%; 15 height:100%; 16 display:block; 17 overflow: hidden; 18 transform: translate3d(0,0,0); 19 text-align: center; 20 -webkit-transition: all 1s; 21 -moz-transition: all 1s; 22 -ms-transition: all 1s; 23 -o-transition: all 1s; 24 transition: all 1s; 25 opacity: 1; 26 } 27 #site-cover{ 28 z-index:90000; 29 position:fixed; 30 width:100%; 31 height:100%; 32 left:0; 33 right:0; 34 background:#fff; 35 opacity: 1; 36} 37 .fade { 38 animation: fadeOut 1s; 39 } 40 41 @keyframes fadeOut { 42 from { 43 opacity:1; 44 } 45 to { 46 opacity:0; 47 } 48} 49 50 </style> 51 <script type="text/javascript" src="page_files/jquery.js"></script> 52 <script type="text/javascript" async="" src="lottieanim.js" class="fade"></script> 53</head> 54<body> 55 <div id="site-cover" style="opacity: 1"> 56<div id="lottie"></div> 57 </div> 58 <script type="text/javascript"> 59$('site-cover').fadeOut(2000, function() { 60 61 console.log('フェードアウトされました！'); 62 63}); 64 </script> 65<script type="text/javascript"> 66 var canLoad = true 67 68 function page_ajax_get(){ 69 var page = jQuery('.paged').last().attr('data-paged') || 2; 70 var cat = null; 71 var ajaxurl = 'https://tcd-wp.net/tcd028/wp-admin/admin-ajax.php'; 72 73 canLoad = false 74 75 jQuery.ajax({ 76 type: 'POST', 77 url: ajaxurl, 78 data: {"action": "load-filter", cat: cat, paged:page }, 79 success: function(response) { 80 if(response.length > 100){ 81 var id = page - 1; 82 id.toString(); 83 jQuery("#infiniscroll").html(jQuery("#infiniscroll").html() + response); 84 } else { 85 jQuery("#pagerlink").html("最終ページ") 86 jQuery("#pagerbutton").attr("disabled", "disabled") 87 } 88 89 setTimeout(function(){ canLoad = true }, 200) 90 } 91 }) 92 } 93 94 jQuery(window).ready(function(){ 95 jQuery("#site-cover").delay(2000); 96 jQuery("#site-cover").fadeOut('slow'); 97 98 } 99 100 </script> 101</body> 102</html>
0 コメント