going crazy 1

by Laurie Skelly

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.2/d3.js"></script>

CSS

svg{
    display:block;
    margin: 30px auto;
}
text{
    fill:white;
    font-size:240px;
    font-family:arial;
}

JavaScript

var source = 'i am slowly going crazy  1   2   3   4   5   6     switch yzarc gniog ylwols ma i   6   5   4   3   2   1    hctiws'

var s = 500;
var svg = d3.select('body')
    .append('svg')
    .attr('height',s)
    .attr('width',s*10)

var g = svg.append('g')
    .attr('transform','translate('+s*3/2+','+s/2+')')

var txt = g.append('text')
    .attr('id','txt')
    .text(source)

var txt_width = parseInt( $('#txt').css('width'))

//function get_color(){
//     color=[255,255,255].forEach Math.floor(Math.random())    
//}

var and_back = function(){
    svg.transition()
    .delay(100)
    .style('background-color','magenta')
    txt.transition()
    .delay(200)
    .style('fill','yellow')
    txt.transition()
    .delay(400)
    .duration(5000)
    .ease('linear')
    .attr('transform','translate('+-(s)+',0)')
    .each('end',again)
}
var again = function(r){
    svg.transition()
    .delay(100)
    .style('background-color','black')
    txt.transition()
    .delay(200)
    .style('fill','white')
    txt.transition()
    .delay(400)
    .duration(5000)
    .ease('linear')    
    .attr('transform','translate('+-(txt_width+s)+',0)')
    .each('end',and_back)
}

again()