Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
$ ->
log = (x) ->
console.log x
navs = $('#navs').children()
divs = $('#divs').children()
panels = $('.panel')
crntPage = 0
navs.each (index) ->
$(@).click ->
log "click"
diff = index - crntPage
deg = if diff > 0 then 180 else -180
$(divs[index]).css 'transform', 'rotateZ(0deg)'
setTimeout ->
for i in [crntPage...index]
$(divs[i]).css 'transform', "rotateZ(#{deg}deg)"
crntPage = index
, 100
position = 0
touched = false
getPosition = (event) ->
event.originalEvent.pageX
onTouchStart = (event) ->
position = getPosition event
touched = true
onTouchMove = (event) ->
if !touched then return
move = position - getPosition event
log position - getPosition event
if move < -300 or 300 < move
deg = if move < 0 then -180 else 180
$(@).css
'transform' : "rotateZ(#{deg}deg)"
'transition' : "all ease-out 0.5s"
$(@).css 'transition' : "all ease-out 1.0s"
onTouchEnd = (event) ->
touched = false
divs.each (index) ->
$(@).on 'touchstart mousedown', onTouchStart
$(@).on 'touchmove mousemove', onTouchMove
$(@).on 'touchend mouseup', onTouchEnd
log "end"
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment