Logo Animation

Developer
Alan Mok | Aki Isamu
Size
9,954 Kb
Views
36,432
  1. Logo Animation Previews
  2. Logo Animation HTML Codes
  3. Logo Animation CSS Codes
  4. Logo Animation JS Codes

How do I make an logo animation?

What is a logo animation? How do you make a logo animation? This script and codes were developed by Alan Mok | Aki Isamu on 28 July 2022, Thursday.

Logo Animation Previews
IQ Test

Logo Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Logo Animation</title> <meta name="viewport" content="width=device-width"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="body"> <div id="page"> <header id="header"> <div id="slogan"><span>Full run on the runway →</span></div> <div class="bg fxbg" id="logo_abg"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div id="logo" class="logo"> <div id="bg"> <div id="t00"></div> <div id="t20"></div> <div id="t40"></div> <div id="t60"></div> <div id="t80"></div> <span id="roadNumber"> <div id="n00">1</div> <div id="n20">2</div> <div id="n40">3</div> <div id="n60">4</div> <div id="n80">5</div> </span> <span id="japan"> <div id="j00">J</div> <div id="j20">a</div> <div id="j40">p</div> <div id="j60">a</div> <div id="j80">n</div> </span> </div> <div class="m"> <div></div><div></div><div></div><div></div><div></div> </div> </div> </header> <div class="container" id="pageInner"> <!-- <div id="page_length"> <div id="screen1" class="screen"> <h1 id="s1_name">mok20123</h1> <div id="s1_detail"> <ul> <li>HongKongese</li> <li>Otaku, Anime, Japan</li> <li>Photographer</li> <li>High school student</li> <li>Developer, Programmer</li> </ul> </div> </div> <div id="screen2" class="screen"> </div> </div> --> <div id="content_box"> <div id="c_logo_w"> <div id="c_logo" class="logo"> <div class="bg"> <div id="t00"></div><div id="t20"></div><div id="t40"></div><div id="t60"></div><div id="t80"></div> </div> <div class="m"> <div></div><div></div><div></div><div></div><div></div> </div> </div> </div> <div class="container"> <div id="infos" class="info"> <div class="title">mok20123</div> <div class="container"> <p>A high school student who has been saving money for university, also a web designer and developer. </p><p>Welcome to contact me with twitter for web projects. </p> </div> </div> <div id="contact_methods" class="info"> <div class="container"> <div class="title">Twitter</div> <a class="method" href="http://twitter.com/mok20123"> <div class="h1"><span>Ganeral sites</span></div> <div class="name">@mok20123 </div> <div class="h2">(design or/and develpment)</div> </a> <a class="method" href="http://twitter.com/mok20123_anime"> <div class="h1"><span>アニメサイト</span></div> <div class="name">@mok20123_anime</div> <div class="h2">（レイアウト設計と<!--及び/又は-->開発）</div> </a> </div> </div>
<!-- <div id="works" class="box"> <div class="title">My works and projects</div> <div class="container"> OITTA </div> </div>--> </div> </div> <!-- /content_box --> </div> <!-- /.container --> </div> <!-- /page --> <div id="control"><!-- <div id="overlay_top"></div> <div id="overlay_bottom"></div>--> <div id="nav"> <div id="about_me_btn" id="btn"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path fill="#FFFFFF" d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M14.5,18.6c-0.6,0.2-1.1,0.4-1.5,0.6c-0.4,0.1-0.8,0.2-1.3,0.2c-0.7,0-1.3-0.2-1.7-0.5c-0.4-0.4-0.6-0.8-0.6-1.4c0-0.2,0-0.4,0-0.7c0-0.2,0.1-0.5,0.1-0.8l0.8-2.7c0.1-0.3,0.1-0.5,0.2-0.7c0-0.2,0.1-0.4,0.1-0.6c0-0.3-0.1-0.6-0.2-0.7c-0.1-0.1-0.4-0.2-0.8-0.2c-0.2,0-0.4,0-0.6,0.1c-0.2,0.1-0.4,0.1-0.5,0.2l0.2-0.8c0.5-0.2,1-0.4,1.5-0.5c0.5-0.1,0.9-0.2,1.3-0.2c0.7,0,1.3,0.2,1.7,0.5c0.4,0.4,0.6,0.8,0.6,1.4c0,0.1,0,0.3,0,0.6c0,0.3-0.1,0.6-0.2,0.8l-0.8,2.7c-0.1,0.2-0.1,0.5-0.2,0.7c0,0.3-0.1,0.5-0.1,0.6c0,0.4,0.1,0.6,0.2,0.7c0.2,0.1,0.4,0.2,0.8,0.2c0.2,0,0.4,0,0.6-0.1c0.2-0.1,0.4-0.1,0.5-0.2L14.5,18.6z M14.4,7.5C14,7.9,13.6,8,13.1,8c-0.5,0-0.9-0.2-1.3-0.5c-0.4-0.3-0.5-0.7-0.5-1.2c0-0.5,0.2-0.9,0.5-1.2c0.4-0.3,0.8-0.5,1.3-0.5c0.5,0,0.9,0.2,1.3,0.5c0.4,0.3,0.5,0.7,0.5,1.2C14.9,6.8,14.7,7.2,14.4,7.5z"/> </svg> </div> <div id="facebook_btn"></div> <div id="twitter_btn"></div> <div id="github_btn"></div> <div id="codepen_btn"></div> </div> <!-- /nav --> </div> <!-- /control -->
</div> <script src='http://netdna.bootstrapcdn.com/font-awesome/4.0.1/css/font-awesome.min.css'></script>
<script src='js/bngyyx.js'></script> <script src="js/index.js"></script>
</body>
</html>

Logo Animation - Script Codes CSS Codes

@import url("http://fonts.googleapis.com/css?family=Exo:400,300,200,500,700|Michroma|Poiret+One");
body { font-family: 'Exo', sans-serif; background: #191815;
}
.logo { position: relative; height: 100px; width: 100px;
}
#logo { position: fixed; margin: -50px; bottom: 50%; left: 50%;
}
#bg,
.bg { background-size: auto 100%; border: 0 solid #FFFFFF; margin: -50px -2500px; position: absolute; overflow: hidden; height: 100px; width: 5000px; left: 50%; top: 50%; -webkit-transform: rotate(-45deg); -webkit-transform-origin: 50% 50%; -moz-transform: rotate(-45deg); -moz-transform-origin: 50% 50%; -ms-transform: rotate(-45deg); -ms-transform-origin: 50% 50%; -o-transform: rotate(-45deg); -o-transform-origin: 50% 50%; transform: rotate(-45deg); transform-origin: 50% 50%;
}
#bg > div,
.bg > div { position: absolute; display: block; bottom: 0%; right: 0; left: 0;
}
#bg > div > div:nth-of-type(1),
.bg > div > div:nth-of-type(1) { background: #B23EFF;
}
#bg > div > div:nth-of-type(2),
.bg > div > div:nth-of-type(2) { background: #00FF99;
}
#bg > div > div:nth-of-type(3),
.bg > div > div:nth-of-type(3) { background: #00CCFF;
}
#bg > div > div:nth-of-type(4),
.bg > div > div:nth-of-type(4) { background: #FFAA22;
}
#bg > div > div:nth-of-type(5),
.bg > div > div:nth-of-type(5) { background: #FF4444;
}
#bg,
.bg { margin: -2500px -70.92199px; height: 5000px; width: 141.84397px; -webkit-transform: skew(-45deg); -moz-transform: skew(-45deg); -ms-transform: skew(-45deg); -o-transform: skew(-45deg); transform: skew(-45deg);
}
#bg.fxbg,
.bg.fxbg { position: fixed;
}
#bg > div,
.bg > div { position: absolute; display: block; height: 100%; bottom: 0%; right: 0; top: 0%;
}
#bg > div:nth-of-type(1),
.bg > div:nth-of-type(1) { background: #B23EFF; left: 00%;
}
#bg > div:nth-of-type(2),
.bg > div:nth-of-type(2) { background: #00FF99; left: 20%;
}
#bg > div:nth-of-type(3),
.bg > div:nth-of-type(3) { background: #00CCFF; left: 40%;
}
#bg > div:nth-of-type(4),
.bg > div:nth-of-type(4) { background: #FFAA22; left: 60%;
}
#bg > div:nth-of-type(5),
.bg > div:nth-of-type(5) { background: #FF4444; left: 80%;
}
#bg > #roadNumber,
.bg > #roadNumber { font-family: 'Michroma', sans-serif; margin-bottom: 50px; position: absolute; z-index: 20; bottom: 50%; width: 100%; text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); margin: 0 0 45px -5px;
}
#bg > #roadNumber > div,
.bg > #roadNumber > div { text-align: center; position: absolute; line-height: 1em; display: block; color: #FFFFFF; bottom: 10px; height: 1em; width: 20%; right: 0%;
}
#bg > #roadNumber > div:nth-of-type(1),
.bg > #roadNumber > div:nth-of-type(1) { left: 00%;
}
#bg > #roadNumber > div:nth-of-type(2),
.bg > #roadNumber > div:nth-of-type(2) { left: 20%;
}
#bg > #roadNumber > div:nth-of-type(3),
.bg > #roadNumber > div:nth-of-type(3) { left: 40%;
}
#bg > #roadNumber > div:nth-of-type(4),
.bg > #roadNumber > div:nth-of-type(4) { left: 60%;
}
#bg > #roadNumber > div:nth-of-type(5),
.bg > #roadNumber > div:nth-of-type(5) { left: 80%;
}
.logo .m > div { background: #FFFFFF; position: absolute; display: block;
}
.logo .m > div:nth-of-type(2) { -webkit-transform-origin: 50% 0%; -webkit-transform: rotate(45deg); -moz-transform-origin: 50% 0%; -moz-transform: rotate(45deg); -ms-transform-origin: 50% 0%; -ms-transform: rotate(45deg); -o-transform-origin: 50% 0%; -o-transform: rotate(45deg); transform-origin: 50% 0%; transform: rotate(45deg);
}
.logo .m { position: absolute; left: 50%; top: 50%;
}
.logo .m { margin: -17.5px -25px; height: 35px; width: 50px;
}
.logo .m > div:nth-of-type(1) { width: 5px; left: 0px; top: 10px; bottom: 0px;
}
.logo .m > div:nth-of-type(2) { width: 5px; left: 9px; top: 1.75px; height: 14px;
}
.logo .m > div:nth-of-type(3) { height: 5px; left: 10px; top: 0px; right: 5px;
}
.logo .m > div:nth-of-type(4) { width: 5px; left: 22.5px; top: 5px; bottom: 0px;
}
.logo .m > div:nth-of-type(5) { width: 5px; left: 45px; top: 0px; bottom: 0px;
}
#page #header #slogan { font-family: 'Poiret One', sans-serif; transform: rotate(-45deg); position: relative; line-height: 50px; margin: 5px 20px; text-align: left; color: #FFFFFF; font-size: 5em; text-align: center; margin: -95.71068px -2570.71068px; position: fixed; width: 5000px; left: 50%; top: 50%;
}
#page #header #slogan > span { /*
background: $txc;
color: $bgc;*/
}
#page > .container { /* #page_length { position: absolute; display: block; height: 100%; right: 0; left: 0; top: 0; display: none; } .screen { position: relative; display: block; height: 100%; width: 100%; } #screen1 { #s1_name { font-family: 'Exo', sans-serif; margin-bottom: 75px; text-align: center; position: absolute; display: block; color: #FFFFFF; bottom: 50%; right: 0; left: 0; } #s1_detail { font-family: 'Exo', sans-serif; position: absolute; text-align: center; margin: 75px auto; max-width: 360px; color: #FFFFFF; right: 10px; left: 10px; top: 50%; > ul { list-style: none; padding: 0; margin: 0; > li { background: #00aaff; border-radius: 5px; list-style: none; display: block; padding: 10px; margin: 5px; &:nth-of-type(1) { background: darken(#B23EFF, 0.0); } &:nth-of-type(2) { background: darken(#00FF99, 7.5); } &:nth-of-type(3) { background: darken(#00CCFF, 5.0); } &:nth-of-type(4) { background: darken(#FFAA22, 5.0); } &:nth-of-type(5) { background: darken(#FF4444, 5.0); } } } } }*/
}
#page > .container #content_box { box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.5); background: #e8e7e3; position: fixed; display: none; height: 100%; width: 100%; top: 100%; right: 0; left: 0; z-index: 99; overflow: auto;
}
#page > .container #content_box #c_logo_w { position: relative; border-radius: 50px; margin: 20px auto; overflow: hidden; display: hidden; height: 100px; width: 100px; margin: 100px auto 20px;
}
#page > .container #content_box #c_logo_w #c_logo { position: absolute; overflow: hidden; height: 100px; width: 100px; left: 0; top: 0;
}
#page > .container #content_box > .container { text-align: center; max-width: 640px; font-size: 1em; padding: 0 20px; display: block; margin: auto; margin: 20px auto 100px;
}
#page > .container #content_box > .container .info { /* text-align: left; */
}
#page > .container #content_box > .container .info > .container { margin: 0 100px;
}
#page > .container #content_box > .container .info > .container > .title { font-size: 1.5em;
}
#page > .container #content_box > .container .info#contact_methods { text-align: left;
}
#page > .container #content_box > .container .info#contact_methods > .container { border: 5px solid #3fa9f5;
}
#page > .container #content_box > .container .info#contact_methods > .container > .title { background: #3fa9f5; text-align: left; color: #FFFFFF;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method { border: 0 solid #3fa9f5; border-width: 0 5px 0 0; text-decoration: none; padding: 0 0 0 10px; position: relative; margin: 10px 0; color: #000000; display: block; /*
margin: ((1.4*1.2+0.625)*1em) 0 0.625em;*/
}
#page > .container #content_box > .container .info#contact_methods > .container > .method, #page > .container #content_box > .container .info#contact_methods > .container > .method * { -webkit-transition: 0.25s; -moz-transition: 0.25s; -ms-transition: 0.25s; -o-transition: 0.25s; transition: 0.25s;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method > .h1 { position: absolute; line-height: 1.4em; line-height: 0em; overflow: hidden; font-size: 1.2em; display: block; right: 0;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method > .h1 > span { display: inline-block; background: #3fa9f5; padding: 0 10px; color: #ffffff;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method > .h2 { display: inline-block; padding: 0 10px 0 0; line-height: 1.2em; font-size: 0.8em; color: #3fa9f5;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method > .name { padding: 0 10px 0 0; font-size: 1.6em;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method:hover { margin: 10px 0; color: #3fa9f5;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method:hover > .h1 { margin: 0;
}
#page > .container #content_box > .container .info#contact_methods > .container > .method:hover > .h1 > span { line-height: 1.4em; margin: 0;
}
#control #overlay_top,
#control #overlay_bottom { background: rgba(25, 24, 21, 0.5); position: fixed; right: 0; left: 0;
}
#control #overlay_top { margin-top: 50px; bottom: 0; top: 50%;
}
#control #overlay_bottom { margin-bottom: 50px; bottom: 50%; top: 0;
}
#control #nav { margin: -250px -50px; position: fixed; height: 500px; width: 100px; left: 50%; top: 50%; margin: 0 -50px; height: auto; bottom: 0; top: 0; width: auto; margin: 0; right: 0; left: 0;
}
#control #nav > div { position: absolute; margin: 0 -16px; display: block; width: 32px; left: 50%;
}
#control #nav > div > svg { display: block; width: 100%;
}
#control #nav > #about_me_btn { bottom: 20px;
}
@media (max-width: 640px) { #page #header #slogan { font-size: 2.5em; } #page #header #slogan > span { /*
background: $txc;
color: $bgc;*/ } #page #header #logo { border-radius: 50px; position: fixed; margin: -50px; width: 100px; bottom: 50%; left: 50%; overflow: hidden; }
}
@media (max-width: 560px) { #page > .container #content_box > .container .info > .container { margin: 0 30px; } #page > .container #content_box > .container .info#contact_methods > .container > .method > .h1 { text-align: right; position: relative; } #page > .container #content_box > .container .info#contact_methods > .container > .method > .h1 > span { line-height: 1.4em; margin: 0; }
}
@media (max-width: 360px) { #page > .container #content_box > .container .info > .container { margin: 0 0px; }
}

Logo Animation - Script Codes JS Codes

// change the timeline to change animation
var logobgDelay = 1000;
var logobgExtraDelayPreColor = 200;
var logobgDuration = 2000;
var timeline = [{ start: 0, end: 1000, delta: (delta.po(5)), func: function (delta) { var ele = document.getElementById("logo").getElementsByClassName("m")[0]; ele.style.opacity = delta; }
}, { start: 0 +logobgDelay +logobgExtraDelayPreColor*0, end: logobgDuration +logobgDelay +logobgExtraDelayPreColor*0, delta: makeEaseOut(delta.po(10)), func: function (delta) { document.getElementById("n00").style.left = document.getElementById("t00").style.left = 100*(1 - (delta*(1-.2*0)) )+"%"; }
}, { start: 0 +logobgDelay +logobgExtraDelayPreColor*1, end: logobgDuration +logobgDelay +logobgExtraDelayPreColor*1, delta: makeEaseOut(delta.po(10)), func: function (delta) { document.getElementById("n20").style.left = document.getElementById("t20").style.left = 100*(1 - (delta*(1-.2*1)) )+"%"; }
}, { start: 0 +logobgDelay +logobgExtraDelayPreColor*2, end: logobgDuration +logobgDelay +logobgExtraDelayPreColor*2, delta: makeEaseOut(delta.po(10)), func: function (delta) { document.getElementById("n40").style.left = document.getElementById("t40").style.left = 100*(1 - (delta*(1-.2*2)) )+"%"; }
}, { start: 0 +logobgDelay +logobgExtraDelayPreColor*3, end: logobgDuration +logobgDelay +logobgExtraDelayPreColor*3, delta: makeEaseOut(delta.po(10)), func: function (delta) { document.getElementById("n60").style.left = document.getElementById("t60").style.left = 100*(1 - (delta*(1-.2*3)) )+"%"; }
}, { start: 0 +logobgDelay +logobgExtraDelayPreColor*4, end: logobgDuration +logobgDelay +logobgExtraDelayPreColor*4, delta: makeEaseOut(delta.po(10)), func: function (delta) { document.getElementById("n80").style.left = document.getElementById("t80").style.left = 100*(1 - (delta*(1-.2*4)) )+"%"; }
}, { start: 1500 +logobgDelay +logobgExtraDelayPreColor*4, end: 3500+ logobgDuration +logobgDelay +logobgExtraDelayPreColor*4, delta: makeEaseOut(delta.po(5)), func: function (delta) { document.getElementById("slogan").style.transform = "rotate(-45deg) translateX("+ (-16*(1-delta)) +"%)"; document.getElementById("slogan").style.opacity = delta; document.getElementsByClassName("bg")[0].style.opacity = delta*0.5; }
}];
preRunTimeline(timeline);
runTimeline(timeline, (5000+ logobgDuration +logobgDelay +logobgExtraDelayPreColor*4), 60, 1);
// change the timeline to change animation
var content_box = document.getElementById("content_box");
var about_me = [{ start: 0, end: 1000, delta: makeEaseInOut(delta.po(5)), func: function (delta) {/* var f_t = 50, lgf_t = 10, tlf_t = 25;*/ content_box.style.top = (1-delta)*100 +"%";/* document.getElementById("logo_abg").style.top = document.getElementById("logo").style.top = (f_t+(delta)*(lgf_t-f_t))+"%"; document.getElementById("slogan").style.top = (f_t+(delta)*(tlf_t-f_t))+"%";*/ }
}/*, { start: 500, end: 1500, delta: makeEaseInOut(delta.po(5)), func: function (delta) { var c_logo_w = document.getElementById("c_logo_w"), c_logo = document.getElementById("c_logo"); c_logo_w.style.marginTop = (20+(1-delta)*(-150))+"px"; c_logo_w.style.marginBottom = (20+(1-delta)*(150))+"px"; }
}*/];
document.getElementById("about_me_btn").addEventListener("click", function() { content_box.style.display = "block"; //ele.style.opacity = 0; preRunTimeline(about_me); //reverseTimeline(about_me, 5000); runTimeline(about_me, 2500);
});
Logo Animation - Script Codes
Logo Animation - Script Codes
Home Page Home
Developer Alan Mok | Aki Isamu
Username mok20123
Uploaded July 28, 2022
Rating 3.5
Size 9,954 Kb
Views 36,432
Do you need developer help for Logo 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!

Alan Mok | Aki Isamu (mok20123) Script Codes
Name
Mok20123 Logo Animation
ContextMenu.js
Useless - HK Cyberport location
No Game No Life Logo Animation
ParseURLParams js
ImageGallery.js, a map img gallery adapter
Div Gallery
Search interface
Timeline, description
Swipe as the home screen.
Create amazing web 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!