Full demo with mask

Full-demo-with-mask.markdown

Full demo with mask

A Pen by Jake Dahn on CodePen.

License.

index.html

<div class='container'>
  <img class='spin' id="spin" src="http://publichosting.s3.amazonaws.com/wheel-with-mask/wheel.png">

  <img class='mask' src="http://publichosting.s3.amazonaws.com/wheel-with-mask/mask.png" >

  <h1>everyday</h1>
</div>

script.js

now = 0;

setInterval(function(){
  now = now + 30

  $("img.spin").animate({
    transform: 'rotate('+now+'deg)',
  }, 1000, function(){
    //complete
  });
  
}, 3000)

style.css

body {
  background: #b877d1;
}

div.container {
  margin-left: 100px;
  margin-top: 50px;
}


h1 {
  color: #fff;
  font-family: ff-enzo-web;
  font-size: 42px; 
  top: 55px;
  left: 320px;
  position: relative;
  
}

img.mask {
  opacity: 0.75;
}

img {
  position: absolute;
  text-align: center;
  vertical-align:center;
}