Skip to content

Instantly share code, notes, and snippets.

@aez

aez/index.html

Created June 24, 2015 23:14
Show Gist options
  • Save aez/0e7bcee23bcd18188b25 to your computer and use it in GitHub Desktop.
Save aez/0e7bcee23bcd18188b25 to your computer and use it in GitHub Desktop.
Download ZIP
zGPLXY
Raw
index.html
body
.bg
.tear
Raw
script.js
$ ->
move = ->
$('.tear').css(transform: "translateX(#{Math.random() * 100}vw)")
interval = setInterval move, 1000
$('body').on 'click', (e) ->
clearInterval interval
$('.tear').css(transform: "translateX(#{e.clientX - 100}px)")
Raw
scripts
<script src="//cdnjs.cloudflare.com/ajax/libs/zepto/1.1.4/zepto.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/3.5.0/lodash.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/velocity/1.2.2/velocity.js"></script>
Raw
style.css
.bg {
position: absolute;
background-color: white;
width: 100%;
height: 100%;
}
.tear {
position: absolute;
background-color: black;
height: 100vh;
width: 200px;
transform: translateX(0);
transition: transform 0.72s ease;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment