Custom Text Ticker in Divi

Simply add the following code into a Code Module and set the “Advanced -> Visibility -> Horizontal Overflow” to “Hidden”.
There are a bunch of CSS style options that can be made. Feel free to ask be about it 😉

<div id="ticker"></div>
<div class="item">this is some text</div>
<style>
	#ticker{
		width:100%;
		white-space: nowrap;
	}
	.item{
		color:white;
		display: inline-block;
		padding-right: 20px;

	}
	@keyframes ticker {
		0% {
			-webkit-transform: translate3d(0, 0, 0);
			transform: translate3d(0, 0, 0);
			visibility: visible;
		}

		100% {
			-webkit-transform: translate3d(-100%, 0, 0);
			transform: translate3d(-100%, 0, 0);
		}
	}

</style>
<script>
	jQuery(function($){
		var copies = 10;
		var speed = "1s";
		var item = $(".item");
		for (var i = 0; i < 10; i++) {
			item.clone().appendTo("#ticker")
		};
		item.remove();
		$(".item").css({
			"-webkit-animation-name": "ticker",
			"animation-name": "ticker",
			"-webkit-animation-iteration-count": "infinite",
			"animation-iteration-count": "infinite",
			"-webkit-animation-timing-function": "linear",
			"animation-timing-function": "linear",
			"-webkit-animation-duration": speed,
			"animation-duration": speed
		})
	})
</script>