simplyScroll v2

a flexible jQuery content scroller with touch support

Custom content example

Jump to: [HTML] [Javascript] [CSS] [Comments]

The Prodigy

The Prodigy is an English electronic music group formed by ...

Aphex Twin

Limerick, Ireland Richard David James (born 18 August 1971), aka ...

Roots Manuva

Rodney Smith (born 1972), better known by his stage name ...

Beastie Boys

Beastie Boys is an American hip hop group from New ...

Beck

Los Angeles, California, U.S. Beck Hansen (born Bek David Campbell, ...

This example shows how existing custom markup can easily be used with simplyScroll. Thanks to Gighit for allowing me to use their images/markup!

HTML

Excerpt of HTML code used in this example (adapted from gighit.com)

<div id="scroller">
  <div class="section">
    <div class="hp-highlight" 
style="background:url(path/to/image.jpg) no-repeat 0 0">
      <div class="feature-headline">
        <h1><a href="http://gighit.com/artists/the-prodigy/" 
title="The Prodigy">The Prodigy</a></h1>
        <p>The Prodigy is an English electronic music group formed 
by ...</p>
      </div>
    </div>
  </div>
  <div class="section">
    ...
  </div>
  ...
</div>            

Javascript

<script type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js">
</script>
<script type="text/javascript" src="jquery.simplyscroll.js"></script>
<link rel="stylesheet" href="jquery.simplyscroll.css" media="all" 
type="text/css">

<script type="text/javascript">
(function($) {
	$(function() { //on DOM ready
		$("#scroller").simplyScroll({
			customClass: 'custom',
			direction: 'backwards',
			pauseOnHover: false,
			frameRate: 20,
			speed: 2
		});
	});
})(jQuery);
</script>

CSS

Modified styles from gighit.com (some changes to make it work within this site)

.custom { /* Applied to container DIV */
	width: 576px;
	height: 210px;
	background-color: #FFF;
	margin-bottom: 1em;
}

.custom .simply-scroll-clip { /* Applied to clip DIV */
	width: 576px;
	height: 210px;
}

/* Existing styles */
#scroller .section {
	float:left;
	width: 480px;
	height: 210px;
}

#scroller .hp-highlight {
	height:210px;
	margin:-10px 10px 10px 0;
}

#scroller .feature-headline {
	position:relative;
	top:140px;
	width:432px;
	background:white;
	margin:10px 10px 20px 10px;
	padding:10px 10px 0 10px;
}
#scroller .feature-headline a {
	font-weight: bold;
	text-decoration: none;
	color:#cc0000;
}

#scroller h1 {
	font-weight:normal;
	font-size:19px;
}

#scroller p {
	font-size: 14px !important;
	color:#666666;
	line-height:130%;
	padding:0 0 10px;
}


/* Container DIV - automatically generated */
.simply-scroll-container { 
	position: relative;
}

/* Clip DIV - automatically generated */
.simply-scroll-clip { 
	position: relative;
	overflow: hidden;
	z-index: 2;
}

/* UL/OL/DIV - the element that simplyScroll is inited on
Class name automatically added to element */
.simply-scroll-list { 
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	overflow: hidden;
	margin: 0;
	padding: 0;
	list-style: none;
}
	
.simply-scroll-list li {
	padding: 0;
	margin: 0;
	list-style: none;
}
	
.simply-scroll-list li img {
	border: none;
	display: block;
}

Comments / Feedback

Any feedback or bugs should be directed to @logicbox or will@logicbox.net. Enjoy!

« Back to simplyScroll Home

Images and markup used on this page are copyright © gighit.com 2009