Marquee Directionは方向を変えることができるjQueryマーキーエフェクト。

1. speed　1 = 1px /秒
2. direction　vertical か horizontal

1. forward
2. backward
3. pause
4. revalidate

html markup

<div class="marquee marquee-vertical" data-speed="100" data-direction="vertical">
    <div class="marquee-wrapper">
        <div class="marquee-content">
            Some long text...
        </div>
    </div>
</div>

<div class="marquee marquee-horizontal " data-speed="50" data-direction="horizontal">       
    <div class="marquee-wrapper">
        <div class="marquee-content">
           Some long text here...
        </div>            
    </div>
</div>

css

.marquee-vertical {
    height: 200px;
    overflow: auto;
}

.marquee-content {
    margin: 0;
    padding: 30px;
}

.marquee {
    overflow: auto;
   	padding: 0;
    margin: 15px 0;
}

.marquee-horizontal {
	white-space: nowrap;
}

.marquee-horizontal .marquee-content,
.marquee-horizontal .marquee-wrapper {
    display: inline-block;
}

js

$(".marquee").marquee(); //initialization  

$(".marquee").marquee({
  speed: 100,  
  direction: horizontal
}); //initialization with custom speed and direction

$(".marquee").trigger("forward"); // triggers forward event  

$(".marquee").eq(0).trigger("forward", {speed: 50}); // Custom speed  

$(".marquee").trigger("revalidate"); //E.g. if on window.resize text doesn't overflow you might want to disable marquee 

• Tag
• Animations
• jQuery
• Ticker