簡単なチュートリアル
これは、GSAP の TweenMax.js と CSS3 を使用して作成された、クールなボックスの爆発アニメーションの特殊効果です。この爆発アニメーションでは、ユーザーがページ上の跳ねるボックスをクリックすると、ボックスが爆発して煙になり、SVG ロゴが表示されます。全体の効果は非常に一貫性があり、リアルです。
デモダウンロードプラグインを見る
使い方
HTML構造
ボックス爆発エフェクトのHTML構造は次のように: div.- box は立方体ボックスで、div.explode は爆発の煙のエフェクトを作成するために使用されます。 svg.icon は、最後に表示される SVG ロゴです。
<div class="-content -index"> <div> <div class="bounce-wrap"> <div class="bounce"> <div class="-shadow"></div> <div class="-box-wrap js-box-wrap"> <div class="-box"> <div class="front wall"></div> <div class="back wall"></div> <div class="right wall"></div> <div class="left wall"></div> <div class="front-right wall"></div> <div class="front-left wall"></div> <div class="back-right wall"></div> <div class="back-left wall"></div> </div> </div> <div id="emitter"></div> <div class="explode"> <span class="cloud -one js-cloud-1"></span> <span class="cloud -two js-cloud-2"></span> <span class="cloud -three js-cloud-3"></span> </div> <svg class="icon js-icon-logo" viewBox="0 0 162.5 47"> <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo_technology"></use> </svg> </div> </div> </div></div>
CSS スタイル
CSS スタイルでは、主にボックスの立方体効果を作成し、CSS3 フレーム アニメーションを使用してボックスの弾性と影のアニメーション効果を作成します。
ボックスの弾性とシャドウ アニメーション効果。
@-webkit-keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-25px); transform: translateY(-25px); }}@keyframes bounce { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 100% { -webkit-transform: translateY(-25px); transform: translateY(-25px); }}@-webkit-keyframes shadow { 0% { background: rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 0px rgba(0, 0, 0, 0.6); } 100% { background: rgba(0, 0, 0, 0.15); -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }}@keyframes shadow { 0% { background: rgba(0, 0, 0, 0.5); -webkit-transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(0.75) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 0px rgba(0, 0, 0, 0.6); } 100% { background: rgba(0, 0, 0, 0.15); -webkit-transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); transform: scale(1) rotateX(75deg) rotateY(0deg) rotateZ(-45deg); box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); }}
ボックスの立体効果: IE ブラウザーは、transform-style:preserve-3d; 属性をサポートしていないため、IE ブラウザーではボックスの立体効果を見ることができません。
.bounce .-box { width: 32px; height: 32px; position: relative; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg); transform: rotateX(-14deg) rotateY(-45deg) rotateZ(0deg);}.bounce .-box .wall { width: 32px; height: 32px; position: absolute; -webkit-transition: all 1s ease-out; transition: all 1s ease-out; -webkit-backface-visibility: hidden; backface-visibility: hidden;}.bounce .-box .front { background: #f8f8fc; -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); transform: rotateX(0deg) rotateY(0deg) translateZ(16px) rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%; z-index: 1;}.bounce .-box .right { height: 32px; background: #f8f8fc; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateX(16px) rotateY(90deg) rotateX(90deg); transform: translateX(16px) rotateY(90deg) rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%; z-index: 1;}.bounce .-box .back { background: #f8f8fc; -webkit-transform: rotateY(180deg) translateZ(16px) rotateX(90deg); transform: rotateY(180deg) translateZ(16px) rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%;}.bounce .-box .left { background: #f8f8fc; -webkit-transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); transform: translateX(-16px) rotateY(-90deg) rotateX(90deg); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%; height: 50%;}.bounce .-box .front-left { background: #d1d5e9; height: 32px; -webkit-transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); transform: rotateX(0deg) rotateY(0deg) translateZ(16px) translateY(16px); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}.bounce .-box .front-right { background: #96a0ce; height: 32px; -webkit-transform: translateX(16px) rotateY(90deg) translateY(16px); transform: translateX(16px) rotateY(90deg) translateY(16px); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}.bounce .-box .back-left { background: #b0c2d6; height: 32px; -webkit-transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); transform: rotateX(0deg) translateX(-16px) rotateY(-90deg) translateY(16px); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}.bounce .-box .back-right { background: #8a9fb4; height: 32px; -webkit-transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); transform: rotateX(0deg) rotateY(180deg) translateZ(16px) translateY(16px); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100%;}
JavaScript
この機能はGSAPのTweenMax.jsに依存しているため、利用する際はTweenMax.jsの導入が必要です。
<script src="js/jquery.min.js"></script><script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script>
ボックス爆発アニメーション機能の主な JS コードは次のとおりです:
function init() { var emitter = document.getElementById("emitter"), container = document.createElement("div"), emitterSize = 100, dotQuantity = 50, dotSizeMax = 100, dotSizeMin = 10, speed = 1, gravity = 1; container.setAttribute("id", "emit-wrap"); //setup the container with the appropriate styles container.style.cssText = "position:absolute; left:0; top:0; overflow:visible; z-index:5000; pointer-events:none;"; document.body.appendChild(container); function createExplosion(container) { var tl = new TimelineLite({ onComplete: function() { $('#emit-wrap').remove(); } }), angle, length, dot, i, size; //create all the dots for (i = 0; i < dotQuantity; i++) { dot = document.createElement("div"); dot.className = "emitter-dot"; size = getRandom(dotSizeMin, dotSizeMax); container.appendChild(dot); angle = Math.random() * Math.PI * 2; length = Math.random() * (emitterSize / 2 - size / 2); TweenLite.set(dot, { x: Math.cos(angle) * length, y: Math.sin(angle) * length, width: size, height: size, xPercent: -50, yPercent: -50, force3D: true }); //this is where we do the animation... tl.to(dot, 1 + Math.random(), { opacity: 0, x: Math.cos(angle) * length * 24, y: Math.sin(angle) * length * 24 }, 0); } return tl; } function explode(element) { var explosion = createExplosion(container); // var bounds = element.getBoundingClientRect(); var offset = $(element).offset(); var width = $(element).width(); var height = $(element).height(); // TweenLite.set(container, { // x: bounds.left + bounds.width / 2, // y: bounds.top + bounds.height / 2 // }); TweenLite.set(container, { x: offset.left + width / 2, y: offset.top + height / 2 }); explosion.restart(); } function getRandom(min, max) { return min + Math.random() * (max - min); } emitter.onmousedown = emitter.ontouchstart = function() { explode(emitter); $(emitter).hide(); $('.-shadow').hide(); $('.js-box-wrap').hide(); setTimeout(function(){ $('.js-trigger-reset').css({ 'display': 'inline-block' }); }, 2000); var tl = new TimelineMax(); tl.add("logo") .add(logoReveal,"logo"); }} function logoReveal() { var logoReveal = new TimelineMax(); logoReveal.to('.js-icon-logo', 1, {autoAlpha: 1, ease: Power4.easeOut}); return logoReveal;} function reset() { $('.-shadow').attr('style', ''); $('.js-box-wrap').attr('style', ''); $('.js-icon-logo').attr('style', ''); $('#emitter').attr('style', ''); $('.js-trigger-reset').hide();} $(document).ready(function () { init(); $('.js-trigger-reset').click(function() { reset(); init(); });});
出典: http://www.htmleaf.com/css3/css3donghua/201603013165。 html