https://www.kpu.go.id/js/ticker.js

1var speed = 5000;
2canTick = true;
3
4$(document).ready(function() {
5	$('.ticker-container ul div').each(function(i) {
6		if ($(window).width() >= 500) {
7			$(this).find('li').width($(window).width() - parseInt($(this).css('left')));
8		}
9		if (i == 0) {
10			$(this).addClass('ticker-active');
11		} else {
12			$(this).addClass('not-active');
13		}
14		if ($(this).find('li').height() > 30) {
15			$(this).find('li').css({
16				'height': '40px',
17				'width': '200%',
18				'text-align': 'left',
19				'padding-left': '5px'
20			});
21			$(this).find('li').css('width', $(this).find('li span').width());
22		}
23	});
24	startTicker();
25	animateTickerElementHorz();
26});
27
28$(window).resize(function() {
29	$('.ticker-container ul div').each(function(i) {
30		if ($(this).find('li').height() > 30) {
31			$(this).css({
32				'height': '40px',
33				'width': '200%',
34				'text-align': 'left',
35				'padding-left': '5px'
36			});
37			$(this).find('li').css('width', $(this).find('li span').width());
38		}
39	});
40});
41
42function startTicker() {
43	setInterval(function() {
44		if (canTick) {
45			$('.ticker-container ul div.ticker-active')
46				.removeClass('ticker-active')
47				.addClass('remove');
48			if ($('.ticker-container ul div.remove').next().length) {
49				$('.ticker-container ul div.remove')
50					.next()
51					.addClass('next');
52			} else {
53				$('.ticker-container ul div')
54					.first()
55					.addClass('next');
56			}
57			$('.ticker-container ul div.next')
58				.removeClass('not-active next')
59				.addClass('ticker-active');
60			setTimeout(function() {
61				$('.ticker-container ul div.remove')
62					.css('transition', '0s ease-in-out')
63					.removeClass('remove')
64					.addClass('not-active finished');
65				if ($(window).width() < 500) {
66					if ($('.ticker-container ul div.finished li').width() < $(window).width()) {
67						$('.ticker-container ul div.finished').removeClass('finished');
68					}
69				} else {
70					if ($('.ticker-container ul div.finished li').width() < ($(window).width() - (parseInt($('.ticker-container ul div.ticker-active').css('left')) + 15))) {
71						$('.ticker-container ul div.finished').removeClass('finished');
72					}
73				}
74				setTimeout(function() {
75					$('.ticker-container ul div')
76						.css('transition', '0.25s ease-in-out');
77				}, 500);
78				animateTickerElementHorz();
79			}, 1000);
80		}
81	}, speed);
82}
83
84function animateTickerElementHorz() {
85	if ($(window).width() < 500) {
86		if ($('.ticker-container ul div.ticker-active li').width() > $(window).width()) {
87			setTimeout(function() {
88				$('.ticker-container ul div.ticker-active li').animate({
89					'margin-left': '-' + (($('.ticker-container ul div.ticker-active li').width() - $(window).width()) + 15)
90				}, speed - (speed / 5), 'swing', function() {
91					setTimeout(function() {
92						$('.ticker-container ul div.finished').removeClass('finished').find('li').css('margin-left', 0);
93					}, ((speed / 5) / 2)); 
94				});
95			}, ((speed / 5) / 2));
96		}
97	} else {
98		if ($('.ticker-container ul div.ticker-active li').width() > ($(window).width() - parseInt($('.ticker-container ul div.ticker-active').css('left')))) {
99			setTimeout(function() {
100				$('.ticker-container ul div.ticker-active li').animate({
101					'margin-left': Math.abs($('.ticker-container ul div.ticker-active li').width() - ($(window).width() - parseInt($('.ticker-container ul div.ticker-active').css('left'))) + 15) * -1
102				}, speed - (speed / 5), 'swing', function() {
103					setTimeout(function() {
104						$('.ticker-container ul div.finished').removeClass('finished').find('li').css('margin-left', 0);
105					}, ((speed / 5) / 2)); 
106				});
107			}, ((speed / 5) / 2));
108		}
109	}
110}
111
112$('.ticker-container').on('mouseover', function() {
113	canTick = false;
114});
115
116$('.ticker-container').on('mouseout', function() {
117	canTick = true;
118});