forked from aamirafridi/jQuery.Marquee
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
192 lines (165 loc) · 10.1 KB
/
index.html
File metadata and controls
192 lines (165 loc) · 10.1 KB
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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
<!DOCTYPE html>
<html>
<head>
<title>jQuery marquee plugin with CSS3 Support</title>
<link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script src="//rawgithub.com/tobia/Pause/master/jquery.pause.js" type="text/javascript"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js" type="text/javascript"></script>
<script src="//rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js?v=4" type="text/javascript"></script>
<!--<script src="jquery.marquee.js?v=3" type="text/javascript"></script>-->
<style type="text/css">
body {
margin: 10px;
font-family: 'Lato', sans-serif;
}
small {
font-size: 14px;
}
h1 {
margin-bottom: 20px;
padding-bottom: 10px;
text-align: center;
}
h2 {
border-bottom: 1px dotted #ccc;
padding-bottom: 5px;
margin-bottom: 10px;
}
.marquee,
.marquee-with-options,
.marquee-vert-before,
.marquee-vert {
width: 300px;
overflow: hidden;
border:1px solid #ccc;
}
</style>
</head>
<body>
<div style="position:absolute; top: 10px; right: 10px;">
<a href="https://twitter.com/share" class="twitter-share-button" data-text="jQuery plugin to scroll the text like the old traditional marquee. " data-via="aamirafridi" data-size="large">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
<h1>jQuery Marquee with CSS3 Animations Support<br><small><a href="http://aamirafridi.com/jquery/jquery-marquee-plugin">back to blog post</a> | <a href="https://github.com/aamirafridi/jQuery.Marquee" target="github">plugin on github</a> | <a href="https://github.com/aamirafridi/jQuery.Marquee/archive/master.zip">download</a></small></h1>
<h2>Events</h2>
<ul>
<li><b>beforeStarting:</b> Event will be fired on the element before animation starts.</li>
<li><b>finished:</b> Event will be fired on the element after the animation finishes.</li>
<li><b>pause:</b> Fire this event on the element when you want to pause the animation, for example when you click/hover a link.</li>
<li><b>resume:</b> Fire this event on the element when you want to resume, the paused animation.</li>
</ul>
<h2>Options</h2>
<ol>
<li><code>allowCss3Support</code> If you wish the plugin should animate always using jQuery animate method even if browser supporst CSS3 animations. Default is <code>true</code></li>
<li><code>css3easing</code> Works when <code>allowCss3Support</code> is set to <code>true</code> - for full list <a href="http://www.w3.org/TR/2013/WD-css3-transitions-20131119/#transition-timing-function" target="_blank">click here</a>. Default is <code>'linear'</code></li>
<li><code>easing</code> Requires <a href="http://gsgd.co.uk/sandbox/jquery/easing/" target="_blank">jQuery easing plugin</a>. Default is <code>'linear'</code>.</li>
<li><code>delayBeforeStart</code> Time in milliseconds before the marquee starts animating. Default is 1000</li>
<li><code>direction</code> Direction towards which the marquee will animate <code>'left' / 'right' / 'up' / 'down'</code>. Default is <code>'left'</code>. Todo: need to change this to ltr/rtl etc</li>
<li><code>duplicated:</code> Should the marquee be duplicated to show an effect of continues flow. Use this only with the text is shorter than the container. Default is <code>false</code></li>
<li><code>duration</code> Speed in milliseconds in which you want your text to travel with width of your main container. Default is 5000. This option is the old <code>speed</code> option which still works but duration is the more word.</li>
<li><code>gap</code> Gap in pixels between the tickers. Will work only when the <code>duplicated</code> option is set to <code>true</code>. Default is <code>20</code> <i>Note: 20 means 20px so need to use <code>'20px'</code> as the value.</i></li>
<li><code>pauseOnHover:</code> on hover pause the marquee. If browser supports CSS3 and <code>allowCss3Support</code> is set to <code>true</code> than it will be done using CSS3. Otherwise this will be done using jQuery plugin https://github.com/tobia/Pause. Default is <code>false</code></li>
<li><code>pauseOnCycle</code> on cycle pause the marquee for <code>delayBeforeStart</code> milliseconds.</li>
</ol>
<h2>Demos</h2>
<div style="border:1px solid #ccc; padding: 10px; background: #eee;">
<h3><strong>NEW!!!</strong> Now with CSS3 Support</h3>
<p>Now the plugin with detect if browser supports CSS3 animations than it will animate the element using CSS3 which will perform much better than animating using jQuery.</p>
<p>The <code>pauseOnHover</code> also works using CSS3. The plugin just prepares the setup and required CSS3 animation CSS.</p>
<p>Due to some reasons if you want plugin to animate always using jQuery than you need to set <code>allowCss3Support</code> option to false. Also an extra option <code>css3easing</code> is added.</p>
<h4>Example of same element being animated using CSS3 and jQuery</h4>
<div style="float:left" class='marquee'>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<= CSS3 animated (if your browser supports CSS3 animation. You can check this element in inspector.)
<br style="clear:both">
<div style="float:left" class='marquee' data-allowCss3Support=false>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<= Animated using jQuery by having <code>allowCss3Support=false</code> as data attribute. Inspect the element and you will see <code>margin-left</code> option being changed using jQuery.
</div>
<h3>Default options</h3>
<div><strong>NOTE:</strong> Following 3 marquee has different length of text but the speed is same. Plugin will adjust the speed according to the length of your text. <i>(new feature)</i></div>
<div class='marquee'>Less text here</div>
<div class='marquee'>Longer text lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<div class='marquee'>Very very long text lorem ipsum dolor sit amet, lorem ipsum dolor sit amet lorem ipsum dolor sit amet consectetur adipiscing elit END.</div>
<h3>Options as data attributes</h3>
<pre>
<div data-speed="2000" data-direction="right" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
</pre>
<div data-speed="2000" data-direction="right" class='marquee'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<h3>Overwrite the default options with following</h3>
<pre>
$('.marquee-with-options').marquee({
speed: 5000,
gap: 50,
delayBeforeStart: 0,
direction: 'left',
duplicated: true,
pauseOnHover: true
});
</pre>
<div class='marquee-with-options'>Lorem ipsum dolor sit amet, consectetur adipiscing elit END.</div>
<a class='pause' href='#'>Pause the above animation</a> | <a class='resume' href='#'>Resume the paused animation</a> | <a class='toggle' href='#'>Pause on hover this link</a>
<br/><br/>
<h3>Direction vertical with default options</h3>
<pre>
$('.marquee-vert').marquee({
direction: 'up',
speed: 1500
});
</pre>
<h4>Before (no height provided to the element)</h4>
<div class='marquee-vert-before'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
<h4>After</h4>
<div class='marquee-vert'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
<h3>With direction 'down' (using data attributes)</h3>
<div class='marquee-vert' data-delayBeforeStart=2000 data-direction='down' data-duplicated='true'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
<h3>Direction vertical with duplicated option true (using data attributes) and height of 50px assigned using CSS</h3>
<small style="font-style: italic">Inspect the following marquee to see data attributes and style attribute</small><br><br>
<div class='marquee-vert' style='height:50px' data-gap=0 data-speed=3000 data-direction='up' data-duplicated='true'><b>Starts here</b> Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis, laudantium ratione. Wisi! Quidem tortor, quisquam earum! Pretium necessitatibus.</div>
<h3>With pauseOnHover and pauseOnCycle options</h3>
<div class='marquee-vert' data-direction='down' data-pauseOnHover='true' data-pauseOnCycle='true'>Nascetur suscipit distinctio optio commodi repudiandae aut exercitationem mauris. Blanditiis conubia hic dolorum! Vitae varius adipisci facilisis.</div>
<br><br>
<script>
$(function(){
var $mwo = $('.marquee-with-options');
$('.marquee').marquee();
$('.marquee-with-options').marquee({
//speed in milliseconds of the marquee
speed: 5000,
//gap in pixels between the tickers
gap: 50,
//gap in pixels between the tickers
delayBeforeStart: 0,
//'left' or 'right'
direction: 'left',
//true or false - should the marquee be duplicated to show an effect of continues flow
duplicated: true,
//on hover pause the marquee - using jQuery plugin https://github.com/tobia/Pause
pauseOnHover: true
});
//Direction upward
$('.marquee-vert').marquee({
direction: 'up',
speed: 1500
});
//pause and resume links
$('.pause').click(function(e){
e.preventDefault();
$mwo.trigger('pause');
});
$('.resume').click(function(e){
e.preventDefault();
$mwo.trigger('resume');
});
//toggle
$('.toggle').hover(function(e){
$mwo.trigger('pause');
},function(){
$mwo.trigger('resume');
})
.click(function(e){
e.preventDefault();
})
});
</script>
</body>
</html>