Unboxed Technology Footer Animation

Developer
John Heiner
Size
8,397 Kb
Views
12,144
  1. Unboxed Technology Footer Animation Previews
  2. Unboxed Technology Footer Animation HTML Codes
  3. Unboxed Technology Footer Animation CSS Codes
  4. Unboxed Technology Footer Animation JS Codes

How do I make an unboxed technology footer animation?

What is a unboxed technology footer animation? How do you make a unboxed technology footer animation? This script and codes were developed by John Heiner on 24 October 2022, Monday.

Unboxed Technology Footer Animation Previews
IQ Test

Unboxed Technology Footer Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Unboxed Technology Footer Animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <svg height="0" width="0" style="display: block; pointer-events: none;">	<g id="logo_technology">	<path d="M14.1,27.6L25,31.9l10.7-4.2c0,0,0.1-0.1,0.1-0.1c0.7-1.2,1.1-2.5,1.1-4.1c0.1-1.5-0.2-4.1-0.9-7.7L33.3,0	l-6.1,1.1l2.9,16.6c0.4,2.4,0.6,4.1,0.6,5.1c0,1.1-0.4,2-1.1,2.9c-0.7,0.9-2,1.4-3.7,1.7c-0.6,0.1-1.1,0.2-1.6,0.2	c-1,0-1.8-0.2-2.6-0.6c-1.1-0.6-1.9-1.4-2.4-2.6c-0.3-0.7-0.7-2.4-1.1-5L15.4,3.2L9.4,4.2l2.8,16C12.8,23.5,13.4,26,14.1,27.6z"/>	<path d="M20.1,24.1c0.4,1,1.1,1.8,2,2.3c0.6,0.3,1.4,0.5,2.2,0.5c0.5,0,1,0,1.5-0.1c1.6-0.3,2.7-0.8,3.3-1.5	c0.6-0.7,1-1.5,0.9-2.4c0-0.9-0.2-2.4-0.5-4.5L25,22.9l-6.5-6.5l0.5,2.9C19.4,21.8,19.8,23.4,20.1,24.1z"/>	<path d="M49.6,22.2l-10.9,4.3l7.1-7.1v-0.7L37,17c0.5,3,0.7,5.1,0.6,6.5c-0.1,1.4-0.4,2.7-0.9,3.8L25,31.9	l-11.8-4.6c-0.6-1.7-1.2-4-1.7-6.9L11,17.5l-6.1,1.3v0.7l6.5,7.1l-11-4.3L0,22.9l11.9,5.9l0,0L22.2,33L12,29.6l0.5,9.3L25,45.8	l12.5-6.9l0.6-10l11.9-6L49.6,22.2z M25.3,34.2L25,43.1l-0.3-9.3l10.8-3.5L25.3,34.2z"/>	<path d="M74.5,19.1c-2.2,0-4,0.9-5.6,2.7v-9.6h-5.1v26.7h4.7v-2.8c0.8,1.1,1.7,1.9,2.8,2.4c1.1,0.6,2.2,0.8,3.3,0.8	c2.2,0,4.1-0.9,5.7-2.7c1.6-1.8,2.4-4.3,2.4-7.6c0-3.2-0.8-5.6-2.3-7.3C78.8,20,76.8,19.1,74.5,19.1z M76.2,33.8	c-0.8,1-1.8,1.4-2.9,1.4c-1.5,0-2.6-0.7-3.5-2c-0.6-1-0.9-2.4-0.9-4.4c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3.1-1.4	c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C77.4,31.4,77,32.9,76.2,33.8z"/>	<path d="M59.4,21.3c-0.5-0.6-1.2-1.1-2.1-1.6c-0.9-0.4-2-0.6-3.1-0.6c-2.6,0-4.7,1.1-6.4,3.3v-2.8h-1.1l-3.6,3.6	v15.7h5.1v-8.7c0-2.2,0.1-3.6,0.4-4.4c0.3-0.8,0.7-1.4,1.4-1.9c0.7-0.5,1.5-0.7,2.4-0.7c0.7,0,1.3,0.2,1.8,0.5	c0.5,0.3,0.8,0.8,1.1,1.4c0.2,0.6,0.3,2,0.3,4v9.9h5.1v-12c0-1.5-0.1-2.6-0.3-3.4C60.2,22.7,59.9,21.9,59.4,21.3z"/>	<path d="M132.6,19.1c-2.6,0-4.7,0.9-6.3,2.7c-1.7,1.8-2.5,4.3-2.5,7.5c0,2.7,0.6,4.9,1.9,6.7	c1.6,2.2,4.1,3.3,7.5,3.3c2.1,0,3.9-0.5,5.3-1.5c1.4-1,2.4-2.4,3.1-4.3l-5.1-0.9c-0.3,1-0.7,1.7-1.2,2.1c-0.5,0.4-1.2,0.7-2,0.7	c-1.2,0-2.2-0.4-2.9-1.3c-0.8-0.8-1.2-2-1.2-3.5h12.8c0.1-3.9-0.7-6.8-2.4-8.7C137.8,20.1,135.5,19.1,132.6,19.1z M129.1,27.6	c0-1.4,0.3-2.5,1.1-3.3c0.7-0.8,1.6-1.2,2.8-1.2c1,0,1.9,0.4,2.7,1.2c0.7,0.8,1.1,1.9,1.1,3.4H129.1z"/>	<path d="M157.4,12.2v9.6c-1.6-1.8-3.4-2.7-5.6-2.7c-2.4,0-4.3,0.9-5.8,2.6c-1.5,1.7-2.3,4.2-2.3,7.5	c0,3.2,0.8,5.7,2.4,7.5c1.6,1.8,3.5,2.7,5.7,2.7c1.1,0,2.2-0.3,3.2-0.8c1.1-0.5,2-1.4,2.8-2.5v2.8h4.7V12.2H157.4z M156.2,33.8	c-0.8,1-1.8,1.5-3,1.5c-1.5,0-2.6-0.7-3.5-2c-0.6-0.9-0.9-2.4-0.9-4.5c0-1.9,0.4-3.4,1.2-4.3c0.8-1,1.8-1.4,3-1.4	c1.2,0,2.3,0.5,3.1,1.5c0.8,1,1.2,2.6,1.2,4.8C157.4,31.3,157,32.8,156.2,33.8z"/>	<path d="M101.5,22c-1.9-1.9-4.3-2.8-7.2-2.8c-1.9,0-3.6,0.4-5.1,1.3c-1.5,0.8-2.7,2-3.6,3.6	c-0.8,1.6-1.3,3.2-1.3,4.9c0,2.2,0.4,4.1,1.3,5.6c0.8,1.5,2.1,2.7,3.7,3.5c1.6,0.8,3.3,1.2,5.1,1.2c2.9,0,5.2-1,7.1-2.9	c1.9-1.9,2.8-4.3,2.8-7.3C104.3,26.3,103.3,23.9,101.5,22z M97.7,33.6c-0.9,1-2,1.5-3.4,1.5c-1.3,0-2.5-0.5-3.4-1.5	c-0.9-1-1.4-2.5-1.4-4.4c0-1.9,0.5-3.4,1.4-4.4c0.9-1,2-1.5,3.4-1.5c1.3,0,2.5,0.5,3.4,1.5c0.9,1,1.4,2.5,1.4,4.4	C99,31.1,98.6,32.6,97.7,33.6z"/>	<polygon points="113.6,26 108.2,20.2 104.3,20.2 104.3,23.1 110.3,29.5 104.3,35.8 104.3,39.1 107.8,39.1 113.6,33	119.3,39.1 122.9,39.1 122.9,35.8 116.9,29.5 122.9,23.3 122.9,20.2 119.1,20.2	"/>	<path d="M107.4,46.9v-4.5h-1.7v-0.6h4.2v0.6h-1.7v4.5H107.4z"/>	<path d="M111.1,46.9v-5.2h3.8v0.6h-3.1v1.6h2.9v0.6h-2.9v1.8h3.2v0.6H111.1z"/>	<path d="M120.3,45.1l0.7,0.2c-0.1,0.6-0.4,1-0.8,1.3c-0.4,0.3-0.8,0.4-1.4,0.4c-0.6,0-1-0.1-1.4-0.3	c-0.4-0.2-0.6-0.6-0.8-1c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.7,0.9-0.9c0.4-0.2,0.8-0.3,1.3-0.3	c0.5,0,1,0.1,1.3,0.4c0.4,0.3,0.6,0.6,0.8,1.1l-0.7,0.2c-0.1-0.4-0.3-0.6-0.5-0.8c-0.2-0.2-0.5-0.3-0.9-0.3c-0.4,0-0.7,0.1-1,0.3	c-0.3,0.2-0.5,0.4-0.6,0.8c-0.1,0.3-0.2,0.7-0.2,1c0,0.4,0.1,0.8,0.2,1.1c0.1,0.3,0.3,0.6,0.6,0.7c0.3,0.2,0.6,0.2,0.9,0.2	c0.4,0,0.7-0.1,1-0.3C120.1,45.8,120.3,45.5,120.3,45.1z"/>	<path d="M122.5,46.9v-5.2h0.7v2.1h2.7v-2.1h0.7v5.2h-0.7v-2.4h-2.7v2.4H122.5z"/>	<path d="M128.4,46.9v-5.2h0.7l2.8,4v-4h0.7v5.2h-0.7l-2.8-4.1v4.1H128.4z"/>	<path d="M134,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1	c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4	c-0.4-0.2-0.7-0.6-0.9-1C134.1,45.3,134,44.8,134,44.4z M134.8,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5	c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3	c-0.5,0-0.9,0.2-1.3,0.5C134.9,43.1,134.8,43.6,134.8,44.4z"/>	<path d="M140.5,46.9v-5.2h0.7v4.5h2.6v0.6H140.5z"/>	<path d="M145,44.4c0-0.9,0.2-1.5,0.7-2c0.5-0.5,1.1-0.7,1.8-0.7c0.5,0,0.9,0.1,1.3,0.3c0.4,0.2,0.7,0.5,0.9,1	c0.2,0.4,0.3,0.9,0.3,1.4c0,0.5-0.1,1-0.3,1.4c-0.2,0.4-0.5,0.7-0.9,0.9c-0.4,0.2-0.8,0.3-1.3,0.3c-0.5,0-0.9-0.1-1.3-0.4	c-0.4-0.2-0.7-0.6-0.9-1C145.1,45.3,145,44.8,145,44.4z M145.7,44.4c0,0.6,0.2,1.1,0.5,1.5c0.3,0.4,0.8,0.5,1.3,0.5	c0.5,0,1-0.2,1.3-0.5c0.3-0.4,0.5-0.9,0.5-1.5c0-0.4-0.1-0.8-0.2-1.1c-0.1-0.3-0.4-0.6-0.6-0.7c-0.3-0.2-0.6-0.3-0.9-0.3	c-0.5,0-0.9,0.2-1.3,0.5C145.9,43.1,145.7,43.6,145.7,44.4z"/>	<path d="M154,44.9v-0.6l2.2,0v1.9c-0.3,0.3-0.7,0.5-1.1,0.6c-0.4,0.1-0.7,0.2-1.1,0.2c-0.5,0-1-0.1-1.4-0.3	c-0.4-0.2-0.7-0.5-1-0.9c-0.2-0.4-0.3-0.9-0.3-1.4c0-0.5,0.1-1,0.3-1.4c0.2-0.4,0.5-0.8,0.9-1c0.4-0.2,0.9-0.3,1.4-0.3	c0.4,0,0.7,0.1,1,0.2c0.3,0.1,0.5,0.3,0.7,0.5c0.2,0.2,0.3,0.5,0.4,0.8l-0.6,0.2c-0.1-0.3-0.2-0.5-0.3-0.6	c-0.1-0.2-0.3-0.3-0.5-0.4c-0.2-0.1-0.5-0.1-0.7-0.1c-0.3,0-0.6,0-0.8,0.1c-0.2,0.1-0.4,0.2-0.6,0.4c-0.1,0.2-0.3,0.3-0.3,0.5	c-0.1,0.3-0.2,0.7-0.2,1c0,0.5,0.1,0.8,0.2,1.2c0.2,0.3,0.4,0.5,0.7,0.7c0.3,0.2,0.6,0.2,1,0.2c0.3,0,0.6-0.1,0.9-0.2	c0.3-0.1,0.5-0.2,0.7-0.4v-1H154z"/>	<path d="M159.3,46.9v-2.2l-2-3h0.8l1,1.6c0.2,0.3,0.4,0.6,0.5,0.9c0.2-0.3,0.3-0.6,0.6-0.9l1-1.5h0.8l-2.1,3v2.2	H159.3z"/>	</g>
</svg>
<main>	<div class="label">	<h1>Unboxed Technology Footer Animation</h1>	<small>Click the Bouncing box</small>	<a href="#" class="button js-trigger-reset">	<span>Reset</span>	</a>	</div>	<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>
</main> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Unboxed Technology Footer Animation - Script Codes CSS Codes

@-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); }
}
body { font-size: 1.6rem; font-family: "Open Sans", sans-serif; color: #fff; background-color: #36373c; -webkit-font-smoothing: antialiased; margin: 0; padding: 0; overflow: hidden;
}
.label { width: 100%; position: absolute; text-align: center;
}
.label small { display: block; margin-bottom: 1em;
}
h1 { color: #fff; margin: 1em 0 0; /* margin-bottom: 1em; */ font-size: 2.2rem; font-weight: 100;
}
main { height: 100vh; /* padding: 10px; */ text-align: center;
}
main .-content { position: relative; height: 100vh;
}
main .-content > div { height: 100%; overflow: hidden; overflow-y: auto;
}
main .-content.-index { display: table; width: 100%;
}
main .-content.-index > div { display: table-cell; vertical-align: middle;
}
.button { cursor: pointer; text-align: center; border: 0; text-decoration: none; position: relative; display: none; z-index: 10; padding: 1rem 3rem; line-height: 1rem;
}
.button span { font-size: 1rem; vertical-align: middle; text-transform: uppercase; font-weight: 800; color: #ffffff; display: block;
}
.button:hover:before { opacity: 1; -webkit-transform: scale(1); transform: scale(1);
}
.button:hover:after { opacity: 0; -webkit-transform: scale(0.85); transform: scale(0.85);
}
.button:before, .button:after { display: block; content: ' '; z-index: -1; border-radius: 999px; pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; -webkit-transition: all 280ms; transition: all 280ms; -webkit-animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1); animation-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
}
.button:after { background-color: #f8981c;
}
.button:before { opacity: 0; -webkit-transform: scale(1.15); transform: scale(1.15); background-color: #6f7dbc;
}
#emitter { width: 50px; height: 60px; display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%) translateY(-12px); transform: translateX(-50%) translateY(-12px); cursor: pointer;
}
.emitter-dot { background-color: #fff; border-radius: 999px; position: absolute;
}
.bounce-wrap { display: block; height: 90px;
}
.bounce-wrap .icon { width: 232px; height: 66px; position: absolute; fill: #ffffff; left: 47%; -webkit-transform: translateX(-50%) translateY(-32px); transform: translateX(-50%) translateY(-32px); opacity: 0; visibility: hidden;
}
.bounce { position: relative; margin: 4rem 0;
}
.bounce .-box,
.bounce .-box-wrap,
.bounce .-shadow { left: 0; margin: auto; position: absolute; right: 0; top: 0;
}
.bounce .-shadow { bottom: -90px; height: 32px; width: 32px; 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); -webkit-animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; animation: shadow 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.bounce .-box-wrap { -webkit-transform: translateY(0); transform: translateY(0); -webkit-animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate; animation: bounce 250ms cubic-bezier(0.165, 0.84, 0.44, 1) infinite alternate;
}
.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%;
}

Unboxed Technology Footer Animation - Script Codes JS Codes

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; //random angle	//figure out the maximum distance from the center, factoring in the size of the dot (it must never go outside the circle), and then pick a random spot along that length where we'll plot the point.	length = Math.random() * (emitterSize / 2 - size / 2);	//place the dot at a random spot within the emitter, and set its size.	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,	//if you'd rather not do physics, you could just animate out directly by using the following 2 lines instead of the physics2D:	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();	});
});
Unboxed Technology Footer Animation - Script Codes
Unboxed Technology Footer Animation - Script Codes
Home Page Home
Developer John Heiner
Username johnheiner
Uploaded October 24, 2022
Rating 4.5
Size 8,397 Kb
Views 12,144
Do you need developer help for Unboxed Technology Footer Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Heiner (johnheiner) Script Codes
Name
SVG line hover
Loading Animation
Floating Labels
Some Button Styles
Passport Flip Open with GSAP
Logo Animation
Canvas Mask Page Intro Animation
Image Hover
Rounded Triangle
Breathing Halftone
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!