javascript-marquee/index.html at master · robertbossaert/javascript-marquee · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<!DOCTYPE HTML>
<html>

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" type="text/css" href="style.css">
  <script src="marquee.js"></script>
  <title>Vanilla JS Marquee</title>
</head>

<body>
  <div class="container">
    <header>
      <h1>Vanilla Javascript Marquee</h1>
      <span class="tagline">by Robert Bossaert</span>
    </header>

    <!-- De Lorean Ipsum -->
    <h3>Default</h3>
    <div id="marqueeOne" class="example" style="width:200px">
      You have this thing hooked up to the car? Ahh. Ahh. What's a rerun? Good.
    </div>

    <h3>Different direction</h3>
    <div id="marqueeTwo" class="example" style="width:400px">
      Have a good trip Einstein, watch your head. I'm too loud. I can't believe it. I'm never gonna get a chance to
      play in front of anybody.
    </div>

    <h3>Different speed</h3>
    <div id="marqueeThree" class="example" style="width:800px">
      Listen, Doc. No no no, Doc, I just got here, okay, Jennifer's here, we're gonna take the new truck for a spin.
      Evening, Doctor Brown, what's with the wire? Weight has nothing to do with it. That's right, he's gonna be mayor.
    </div>

    <h3>Different colors and opacity</h3>
    <div id="marqueeFour" class="example" style="width:200px">
      Nobody calls me chicken! He's in the old west, but he's alive!
    </div>


    <h2>Options</h2>
    <pre>new Marquee(<span class="string">'element'</span>, { direction: <span class="string">'rtl'</span>, speed: <span class="number">1</span> });</pre>
  </div>

  <script>
    new Marquee('marqueeOne');

    new Marquee('marqueeTwo', {
      direction: 'rtl',
    });

    new Marquee('marqueeThree', {
      speed: 1,

    });
    new Marquee('marqueeFour', {
      bgcolor: 'tomato',
      textcolor: 'powder',
      opacity: .7,
    });
  </script>
</body>

</html>