YJL

1   Let it slide!

I made this script because someone posted a gig on Craiglist. Start to them!

2   Source

var moving_target = 'mtext';
var moving_text = ['moving', 'text', 'here', '<span style="color:red">da da!</span>'];
var moving_index = null;
var moving_box_height = null;
var moving_show_time = 1000;
var moving_scroll_time = 500;

function move_text() {
  var $mtext = $('#' + moving_target);
  if (moving_index == null) {
    moving_box_height = $mtext.parent().height();
    // Initialize
    $mtext.empty();
    $mtext.css({
      display: 'inline-block',
      '*display': 'inline',
      lineHeight: 'normal',
      textAlign: 'center',
      verticalAlign: 'text-top',
      overflowY: 'hidden'
      });
    // reverse array, so we can create from top to bottom, from last text to first text
    moving_text.reverse();
    for (var idx in moving_text)
      $mtext.append($('<div>' + moving_text[idx] + '</div>'));
    // We need one more, so it could look like circular
    $mtext.append($('<div>' + moving_text[0] + '</div>'));
    $mtext.css('height', moving_box_height + 'px');
    $mtext.scrollTop((moving_text.length - 1 - moving_index) * moving_box_height);
    }
  if (moving_index >= moving_text.length - 1) {
    $mtext.scrollTop(moving_text.length * moving_box_height);
    moving_index = -1;
    }
  $mtext
    .delay(moving_show_time)
    .animate(
      {scrollTop: (moving_text.length - 1 - ++moving_index) * moving_box_height},
      moving_scroll_time, move_text
      )
    ;
  }
$(move_text);

var h_moving_target = 'h_mtext';
var h_moving_text = ['moving', 'text', 'here', '<span style="color:red">da da!</span>'];
var h_moving_index = null;
var h_moving_box_width = null;
var h_moving_show_time = 1000;
var h_moving_scroll_time = 500;

function h_move_text() {
    var $h_mtext = $('#' + h_moving_target);
    if (h_moving_index == null) {
        // Initialize
        $h_mtext.empty();
        $h_mtext.css({
            display: 'inline-block',
            '*display': 'inline',
            height: $h_mtext.parent().height(),
            lineHeight: 'normal',
            textAlign: 'center',
            verticalAlign: 'text-top',
            'overflow': 'hidden'
            });
        var $mwrap = $('<span/>', {
            css: {
                display: 'inline-block',
                '*display': 'inline'
                }
            })
            .appendTo($h_mtext);
        h_moving_box_width = 0;
        for (var idx in h_moving_text) {
            $t = $('<span>' + h_moving_text[idx] + '</span>').appendTo($mwrap);
            if ($t.width() > h_moving_box_width)
                h_moving_box_width = $t.width();
            }
        $mwrap.append($('<span>' + h_moving_text[0] + '</span>'));
        $mwrap.children().css({
            display: 'inline-block',
            '*display': 'inline',
            width: h_moving_box_width
            });
        $mwrap.width($mwrap.children().length * h_moving_box_width);
        $h_mtext.width(h_moving_box_width);
        h_moving_index = 0;
        $h_mtext.scrollLeft(h_moving_index * h_moving_box_width);
        }
    if (h_moving_index >= h_moving_text.length) {
        $h_mtext.scrollLeft(0);
        h_moving_index = 0;
        }
    $h_mtext
        .delay(h_moving_show_time)
        .animate(
            {scrollLeft: ++h_moving_index * h_moving_box_width},
            h_moving_scroll_time, h_move_text
            )
        ;
    }
$(h_move_text);