CrownGuides

Categories

Guides > Javascript > Scrolling text

Scrolling text

Today we are going to make make a bar where we will scroll trough ”latest guides” like the one on this sites index page. We will be using HTML, CSS, Javascript and Jquery.

This is just one of the way we can do this. There is many ways to do this but this is the way we are going to make this. Feel free to drop a coment below if you liked this and it helped you.

Here is a image of the end result

Scrolling text

The design will be made without any images so it is easy to modify it to look like you want if you don’t like this dark design

 

1. Required includes

Lets start with the javascript includes we need and that is Jquery and JqueryUI

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

In this guide we get these includes remote. But you could download them and include them local if you want.

 

2. The HTML part

Next we need to make som html. This is very basic so I don’t think we need to explane this to much

<div class="contentbg">
<div class="contentbgtext">Latest guides: <span class="contentbgtextsub" id="effect"> </span></div>
</div>

We have 2 divs and 1 span. The first div is the just a wrapper around our title text and scrolling text. Inside the <span> element we will do the dynamic changes.

 

3. Make things pretty with CSS

Next we will make our CSS to make it look quite nice. We will use gradient so we don't need to load images.

<style>
.contentbg { 
	background: #45484d;
	background: -moz-linear-gradient(top, #45484d 0%, #000000 100%);
	background: -webkit-linear-gradient(top, #45484d 0%,#000000 100%);
	background: linear-gradient(to bottom, #45484d 0%,#000000 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#45484d', endColorstr='#000000',GradientType=0 );
	
	width:100%;
	min-height:40px;
}

.contentbgtext {
	color: #fff;
	font-weight: bold;
	padding-top:9px;
	padding-left:20px;
	padding-bottom: 9px;
}

.contentbgtext a {
	color: #fff;
	font-weight: normal;
	text-decoration: none;
}

.contentbgtext a:hover {
	color: rgb(201,201,201);
	font-weight: normal;
}

.contentbgtextsub {
	font-weight: normal;
}
</style>

Here we make the background nice black gradient and make sure the bar fills the entire page. We make the text white and remove the link underline and use a nice hover color

 

4. Make a html or php and fill it with a valid json list

["<a href=\"#first\">First<\/a>","<a href=\"#second\">Second<\/a>","<a href=\"#Third\">Third<\/a>"]

Here we have 3 objects that the will be shown by the scroller. You could make this static or use php/mysql to generate it from a database.

 

5. Now it’s time for Javascript

We need a few functions to make this happened, we will call them latestrun(), init() callback(). The init function does a ajax request to get the json list, latestrun shows the fade effect and the callback function changes the text. Don't forget to change URL_TO_FILE to a real location

<script>
// We use .ready function to not load any of this until the browser is finished loading
$(document).ready(function () {

// We need 2 variables i is just to know what list object we want to show and data contains the array with the text
var i = 0;
var data = new Array();

// We make the scroller start scrolling
init();

// This function does the fadeOUT with jquery
function latestrun() {
	$( "#effect" ).effect( "fade", "", 1000, callback );
}

// We fetch the objects to scroll trough with ajax and store them in our array variable
function init() {
	$.ajax({
	    url: 'URL_TO_FILE',
	    dataType: 'json',
	    success: function (outputfromserver) {
				data = outputfromserver;
				i=0;
				latestrun();		
	    }
	});
}

// when change the content of our span and check if we need to reload the list, if not we just keep go trough the list every 5 seconds 
function callback() {
			document.getElementById('effect').innerHTML=data[i];
			i++;
      	setTimeout(function() {
      		if (i >= data.length) {
						init();
					} else {
						latestrun();
					}
      	}, 5000 );
    };
});                                                  
</script>

Thats all for today. Hope this helps someone.

Thanks for reading.

Comments