https://www.goshu.co.jp/brands/
上記のURLのオープニングアニメーションを実装したくripples.jsを使用し実装を試みたのですが、上記URLのように文字部分に揺らぎをつけることができません。
どのように実装すればいいのかご教示いただけますと幸いです。
<!DOCTYPE html> <html> <head> <title>jQuery WebGL Ripples</title> <link rel="stylesheet" href="reset.css"> <style> .loading { background-color: #F4F0E9; /* 背景色指定 */ height: 100%; width: 100%; position: fixed; /* 位置指定の基準点にする */ } .loading_txt { width: 100%;; height: 100%; background: url("http://placehold.it/350x150") center center no-repeat; position: absolute; /* 位置指定 */ top: 0; /* 位置指定 */ bottom: 0; /* 位置指定 */ left: 0; /* 位置指定 */ right: 0; /* 位置指定 */ margin: auto; /* 中央寄せ */ } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script> <script src="js/jquery.ripples.js"></script> <script> $(document).ready(function() { try { $('.ripples').ripples({ resolution: 128, dropRadius: 20, //px perturbance: 0.04, interactive: false }); } catch (e) { $('.error').show().text(e); } $('.js-ripples-disable').on('click', function() { $('.ripples').ripples('destroy'); $(this).hide(); }); $('.js-ripples-play').on('click', function() { $('.ripples').ripples('play'); }); $('.js-ripples-pause').on('click', function() { $('.ripples').ripples('pause'); }); // Automatic drops setInterval(function() { var $el = $('.ripples'); var x = Math.random() * $el.outerWidth(); var y = Math.random() * $el.outerHeight(); var dropRadius = 40; var strength = 0.44 + Math.random() * 0.84; $el.ripples('drop', x, y, dropRadius, strength); }, 1400); $('body').hide(); $('body').fadeIn(1000); $('a').click(function(){ var url = $(this).attr('href'); var target = $(this).attr('target'); var snsshare = $(this).hasClass('snsshare'); if( target == '_blank' || snsshare) { window.open(url, '_blank'); }else if (!$(this).hasClass("close")) { $('body').fadeOut(500); setTimeout(function(){ location.href = url; }, 500); } return false; }); }); </script> </head> <body> <div class="loading"> <div class="loading_txt ripples"></div> </div> </body> </html>
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。