Skip to content

Instantly share code, notes, and snippets.

@kartick14

kartick14/index.html

Last active December 18, 2018 11:17
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save kartick14/f0de567587dbb13599b5481b4368ad9d to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save kartick14/f0de567587dbb13599b5481b4368ad9d to your computer and use it in GitHub Desktop.
Download ZIP
Jquery marque/horizontal test slider
Raw
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>jQuery Conveyor Ticker Example</title>
<!-- <link href="https://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> -->
<!-- <link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css" rel="stylesheet" type="text/css"> -->
<link href="jquery.jConveyorTicker.min.css" rel="stylesheet">
<style>
.container { margin: 150px auto; max-width: 640px; }
.wrap{
width: 100%;
white-space: nowrap;
overflow: hidden;
font-size: 0;
background: #fff;
border-radius: 3px;
box-shadow: inset 0 0 7px rgba(69, 78, 140,0.5);
}
.jctkr-label{
height: 35px;
padding: 0 17px;
line-height: 42px;
background: rgba(69, 78, 140,0.7);
font-style: italic;
font-size: 19px;
color: #fff;
text-shadow: 0 1px 2px rgba(69, 78, 140,1);
cursor: default;
}
.jctkr-label:hover{
background: rgba(69, 78, 140,0.9);
}
[class*="js-conveyor-"] ul{
display: inline-block;
opacity: 0.5;
}
[class*="js-conveyor-"] ul li{
padding: 0 15px;
line-height: 35px;
font-size: 16px;
}
</style>
</head>
<body><div id="jquery-script-menu">
<div class="jquery-script-center">
<div class="jquery-script-clear"></div>
</div>
</div>
<div class="container">
<h1>jQuery Conveyor Ticker Example</h1>
<div class="wrap">
<div class="jctkr-label">
<strong>Hover Me</strong>
</div>
<div class="js-conveyor-example">
<ul>
<li>
<span>Horizontal Ticker Animation In jQuery</span>
</li>
<li>
<a href="#">
<span>I am a <b>hyperlink</b></span>
</a>
</li>
<li>
<span>Conveyor Ticker</span>
</li>
<li>
<span>A Simple jQuery plugin</span>
</li>
</ul>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="jquery.jConveyorTicker.min.js"></script>
<script>
$(function() {
$('.js-conveyor-example').jConveyorTicker({reverse_elm: true});
});
</script>
</body>
</html>
Raw
jquery.jConveyorTicker.min.css
/*!
* jQuery Conveyor Ticker (jConveyorTicker)
* Description: jQuery plugin to create simple horizontal conveyor belt animated tickers.
*
* Copyright (c) 2017 Luis Luz - UXD Lda
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* https://github.com/lluz/jquery-conveyor-ticker
*
* Version: 1.0.2
*
*/.jctkr-wrapper,.jctkr-wrapper *{box-sizing:border-box}.jctkr-wrapper{display:inline-block;position:relative;width:100%;height:35px;vertical-align:top;overflow:hidden}.jctkr-wrapper ul{position:absolute;left:0;top:0;height:100%;margin:0;padding:0;list-style:none;white-space:nowrap;font-size:0;opacity:0;-webkit-transition:opacity 1s;transition:opacity 1s}.jctkr-wrapper.jctkr-initialized ul{opacity:1}.jctkr-wrapper ul li{display:inline-block;font-family:sans-serif;font-size:16px}.jctkr-label{display:inline-block}
Raw
jquery.jConveyorTicker.min.js
/*! jQuery Conveyor Ticker (jConveyorTicker) v1.0.2 - Licensed under the MIT license - Copyright (c) 2017 Luis Luz - UXD Lda <dev@uxd.pt> / Project home: https://github.com/lluz/jquery-conveyor-ticker */
/*!function(a,b,c,d){a.fn.jConveyorTicker=function(b){if(void 0===this||0===this.length)return console.log("jquery.jConveyorTicker() INITIALIZATION ERROR: You need to select one or more elements. See documentation form more information."),!1;var c={anim_duration:200,reverse_elm:!1,force_loop:!1},d=c.anim_duration,e=c.reverse_elm,f=c.force_loop;b&&(void 0!==b.anim_duration&&(d=b.anim_duration),void 0!==b.reverse_elm&&(e=b.reverse_elm),void 0!==b.force_loop&&(f=b.force_loop),a.extend(c,b)),this.each(function(){var b=a(this),c=b.children("ul");c.css({margin:"0",padding:"0","list-style":"none"}).children("li").css({display:"inline-block"});var g=c.width(),h=c.parent().width(),i=h/2-20;c.removeAttr("style").children("li").removeAttr("style"),b.addClass("jctkr-wrapper");var j=function(){var f=c.clone().children("li");c.append(f);var g=0;c.children().each(function(){g+=a(this).outerWidth()}),c.width(g);var h=function(a){var b,e=c.width(),f=c.position().left,g="-",i="normal";if(void 0!==a&&"reverse"===a){if(b=e/2,f>0)return c.css("left","-"+b+"px"),void h("reverse");g="+",i="reverse"}else if(b=e/2*-1,f<b){var j=-1*(b-f);return c.css("left",j+"px"),void h(i)}c.animate({left:g+"=10px"},d,"linear",function(){h(i)})};b.hover(function(){c.stop()},function(){c.stop(),h("normal")}),e&&b.prev(".jctkr-label").hover(function(){c.stop(),h("reverse")},function(){c.stop(),h("normal")}).click(function(){return!1}),h("normal")};if(g>=i)j();else if(f){var k,l=0,m=function(){var a=c.clone().children("li");if(c.append(a),k=c.width(),l=c.parent().width(),!(k<l))return j(),!1;m()};for(m();k<l;){if(k>=i){j();break}m()}}b.addClass("jctkr-initialized")})}}(jQuery,window,document);
/*===============================================================================*/
/*!
* jQuery Conveyor Ticker (jConveyorTicker)
* Description: jQuery plugin to create simple horizontal conveyor belt animated tickers.
*
* Copyright (c) 2017 Luis Luz - UXD Lda
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Project home:
* https://github.com/lluz/jquery-conveyor-ticker
*
* Version: 1.0.2
*
*/
(function($, window, document, undefined) {
$.fn.jConveyorTicker = function(options) {
if ( this === undefined || this.length === 0 ) {
console.log('jquery.jConveyorTicker() INITIALIZATION ERROR: You need to select one or more elements. See documentation form more information.');
return false;
}
var settings = {
anim_duration: 200,
reverse_elm: false,
force_loop: false
};
var cycle_duration = settings.anim_duration;
var reverse_commute = settings.reverse_elm;
var initialization_forced = settings.force_loop;
if (options) {
if ( options.anim_duration !== undefined ) {
cycle_duration = options.anim_duration;
}
if ( options.reverse_elm !== undefined ) {
reverse_commute = options.reverse_elm;
}
if ( options.force_loop !== undefined ) {
initialization_forced = options.force_loop;
}
$.extend(settings, options);
}
this.each(function(){
var $wrap = $(this);
var $list = $wrap.children('ul');
$list
.css({
'margin': '0',
'padding': '0',
'list-style': 'none'
})
.children('li')
.css({
'display': 'inline-block'
});
var $listRawWidth = $list.width();
var $parentWidth = $list.parent().width();
var $parent1stThreshold = ($parentWidth / 2) - 20;
$list
.removeAttr('style')
.children('li')
.removeAttr('style');
$wrap.addClass('jctkr-wrapper');
var conveyorInit = function(){
var $listItems1stClone = $list.clone().children('li');
$list.append($listItems1stClone);
var listTotalWidth = 0;
$list.children().each(function(){
listTotalWidth += $(this).outerWidth();
});
$list.width(listTotalWidth);
var conveyorAnimate = function(action){
var tw = $list.width();
var tp = $list.position().left;
var operator = '-';
var direction = 'normal';
var tcal;
if (action !== undefined && action === 'reverse'){
tcal = (tw / 2);
if (tp > 0){
$list.css('left', '-' + tcal + 'px');
conveyorAnimate('reverse');
return;
}
operator = '+';
direction = 'reverse';
}
else {
tcal = -1 * (tw / 2);
if (tp < tcal){
var toffs = -1 * (tcal - tp);
$list.css('left', toffs + 'px');
conveyorAnimate(direction);
return;
}
}
$list.animate({
left: operator + '=10px'
}, cycle_duration, 'linear', function(){
conveyorAnimate(direction);
});
};
$wrap
.hover(function(){
$list.stop();
}, function(){
$list.stop();
conveyorAnimate('normal');
});
if ( reverse_commute ){
$wrap.prev('.jctkr-label')
.hover(function(){
$list.stop();
conveyorAnimate('reverse');
}, function(){
$list.stop();
conveyorAnimate('normal');
}).click(function(){
return false;
});
}
conveyorAnimate('normal');
};
if ( $listRawWidth >= $parent1stThreshold ){
conveyorInit();
}
else if ( initialization_forced ){
var $itemsWidth, $containerWidth = 0;
var itemsReplicate = function(){
var $listItems1stClone = $list.clone().children('li');
$list.append($listItems1stClone);
$itemsWidth = $list.width();
$containerWidth = $list.parent().width();
if ( $itemsWidth < $containerWidth ){
itemsReplicate();
}
else {
conveyorInit();
return false;
}
};
itemsReplicate();
while ( $itemsWidth < $containerWidth ) {
if ( $itemsWidth >= $parent1stThreshold ) {
conveyorInit();
break;
}
itemsReplicate();
}
}
$wrap.addClass('jctkr-initialized');
});
};
})(jQuery, window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment