jQuery

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

May 5, 2017
marquee-direction

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

Options

  1. speed 1 = 1px /秒
  2. direction verticalhorizontal

Events

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

Example

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