<div class="animation-switch">
<label for="checkbox">Animation is <span class="status">on</span>
<span class='switch-wrapper'>
</span></label>
<input type="checkbox" id="checkbox" class="visuallyHidden"/>
</div>
<h1>Animation is <span class="status">on</span></h1>
<div class='moving-container animation-on'>
<div class="mover">This box animation is: <span class="status">on</span></div>
</div>
<h2>To dos</h3>
<ul>
<li><a href="https://github.com/nattarnoff/omrijs">Omri.js Project</a></li>
<li><input checked type="checkbox" /> Move from Jquery to Vanilla JS</li>
<li><input checked type="checkbox" /> Inject animation controls via JS</li>
<li><input type="checkbox" />Global pause of animation in case dev doesn't namespace</li>
<li><input type="checkbox" />Bookmarklet to use on any page where dev hasn't implemented</li>
<li>Need to cover
<ul>
<li><input type="checkbox" />JS</li>
<li><input checked type="checkbox" /> CSS</li>
<li><input type="checkbox" />WAAPI based animations</li></ul></li>
</ul>
@-webkit-keyframes mover
0%, 100%
left: 0px
50%
left: 800px
*
box-sizing: border-box
margin: 0
padding: 0
font:
family: Helvetica
weight: 100
.visuallyHidden
border: 0
clip: rect(0 0 0 0)
height: 1px
margin: -1px
overflow: hidden
padding: 0
position: absolute
width: 1px
h1, h2
margin:
top: 30px
left: 30px
ul
margin:
left: 30px
.animation-switch
background: rgba(0,0,0,.7)
padding: 16px
color: #fff
text-align: right
overflow: hidden
.switch-wrapper
background: #ccc
width: 30px
height: 17px
border-radius: 25% / 50%
display: inline-block
position: relative
overflow: hidden
transition: all 200ms ease
&:after
content: ' '
background: #fff
border: 1px solid #333
radius: 50%
width: 15px
height: 15px
position: absolute
left: 1px
transition: all 200ms ease-in-out
&.checked
background: #aaf
&:after
left: 12px
.mover
border:
radius: 8px
width: 100px
height: 100px
text-align: center
padding: 10px 10px
background: red
color: white
position: relative
transition: all 200ms ease-in-out
&:after
content: " "
background: rgba(0,0,0,.2)
height: 30px
width: 100px
position: absolute
left: 0
top: 100%
transform: rotateX(45deg)
box-shadow: 0 0 10px rgba(0,0,0,.3)
border-radius: 50%
.moving-container
max-width: 800px
width: 90%
margin: 20px auto
.mover
animation-name: mover
animation-duration: 7s
animation-iteration-count: infinite
animation-direction: alternate
animation-timing-function: linear
animation-fill-mode: forwards
animation-delay: 0s
animation-play-state: paused
// All animations need to be name spaced under the on animation-on class, would like to find a manner more global
.animation-on
.mover
animation-play-state: running
background: green
transition: all 200ms ease-in-out
// Written in jQuery right now due to speed of prototype. Want it to be vanilla JS.
//Should inject the button with styling options
//
var i = $('#checkbox');
i.on('change',function(){
if(i.prop('checked')){
$('.status').text('paused');
$('.switch-wrapper').addClass('checked');
$('.moving-container').removeClass('animation-on');
} else {
$('.status').text('on');
$('.switch-wrapper').removeClass('checked'); $('.moving-container').addClass('animation-on');
}
})
Also see: Tab Triggers