“Hypnotic” Logo Animation

hypnotic-logo-animation.markdown

“Hypnotic” Logo Animation

A more advanced responsive version of an animation I improvised for today’s class. Detailed breakdown on my blog

A Pen by Luigy-Lemon on CodePen.

License.

index.html

<div id="watch">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/pocketwatch-no-second-hand.png" alt="Pocketwatch on chain" class="watch">
  <a href="https://discord.io/argss"><img src="https://orig00.deviantart.net/0fbf/f/2017/286/0/7/creepy_discord_icon___logo_remix_by_treetoadart-dbqg8wi.png" alt="Pocketwatch second hand" class="seconds"> </a>
</div>
<h1>Coming Soon</h1>
<hr>
<h2>Arg Solving Station</h2>

script.js

window.addEventListener('resize', function() {
  /* fixes for Webkit not altering vw font sizes in response to viewport changes */
	var demento = document.querySelector('h1');
	var services = document.querySelector('h2');
	demento.style.fontSize="10vw";
  services.style.fontSize="3vw";
  
})

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import url(https://fonts.googleapis.com/css?family=Hammersmith+One);

@keyframes sway { 
	to { transform: rotate(30deg);   } 
}
@keyframes fade {
	to { opacity: 1; }
}
@keyframes widen {
	to { width: 40%; }
}
@keyframes secondcount {
	to { transform: rotate(355deg); }
}
* { box-sizing: border-box; } 
body { 
  margin: 0;
  background: #111;
  color: #fff;
  text-align: center; 
  font-family: 'Hammersmith One', sans-serif; 
} 
body > * { position: relative; } 
#watch { 
  width: 12vw; height: auto;
  margin: 0 auto;
  transform-origin: center top;
  transform: rotate(-30deg); 
  top: -10px; 
  animation: sway 3.0s infinite alternate ease-in-out;
} 
#watch img.watch { width: 100%; height: auto; }
img.seconds { 
  width: 40%; height:auto;
  bottom: 1.75%; left: 85%;
  transform-origin: center 52.4%;
  animation: secondcount 6s infinite
  linear; 
}
h1 { 
  font-size: 10vw;
  top: -35vw; text-shadow: 0 0 3px 4px rgba(0,0,0,0.3);
  opacity: 0;
  animation: fade 4s 2s forwards; 
}
h2 { 
  font-weight: 100;
  font-size: 3vw; 
  top: -20vw;
  letter-spacing: .2vw;
  opacity: 0;
  animation: fade 2s 7s forwards; 
}
hr { 
  border: none;
  width: 0%; color: #777;
  height: 1px;
  background-color: #777;
  top: -20vw;
  animation: widen 2s 5s forwards;
}