Instantly share code, notes, and snippets.

Embed
What would you like to do?
coffeescript text carousel
# by: _ _
# __| |_ ___ _ __| |_ __ _ _ _ __ ___ _ __
# (_-< _/ -_) '_ \ ' \/ _` | ' \ _/ _/ _ \ ' \
# /__/\__\___| .__/_||_\__,_|_||_(_)__\___/_|_|_|
# |_| stephan@stephan.com
# Unobtrusive txtRotate
# http://codepen.io/stephancom/details/pgXypp/
# applies to all elements with data-rotate
# expects
# data-rotate: an array of strings
# data-period: duration
# optional
# data-wait: don't trigger immediately
# data-complete: selector for element(s) to be triggered on complete
$ ->
class TxtRotate
constructor: (@el) ->
@el = $(@el)
@toRotate = @el.data('rotate')
return unless @toRotate?
@period = @el.data('period')
@loopNum = 0
@txt = ''
@isDeleting = false
@el.on 'txtRotate:start', =>
console.log "=> starting rotate:", @toRotate
@tick()
@el.trigger('txtRotate:start') unless @el.data('wait')?
tick: ->
i = @loopNum % @toRotate.length
fullTxt = @toRotate[i]
if @isDeleting
@txt = fullTxt.substring(0, @txt.length - 1)
else
@txt = fullTxt.substring(0, @txt.length + 1)
@el.html('<span class="wrap">' + @txt + '</span>')
delta = 100
if @isDeleting
delta /= 2
if @txt == ''
@isDeleting = false
@loopNum++
delta = 500
else if @txt == fullTxt and @loopNum < 1
delta = @period
@isDeleting = true
if @loopNum == @toRotate.length - 1 and @txt == fullTxt
$(@el.data('complete')).trigger('txtRotate:start') unless @done
@done = true
setTimeout (=> @tick() ), delta unless @done
# INJECT CSS --> for mobilefirst
css = document.createElement('style')
css.type = 'text/css'
css.innerHTML = '.txt-rotate > .wrap { border-right: 0.08em solid #666 }'
document.body.appendChild css
console.log('==> setting up txtRotate')
$('[data-rotate]').each (i, el) -> new TxtRotate el
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment