Slider jQuery StartStop Slider

sliderjqueryPour commencer je vous souhaites à tous une bonne et heureuse année mais surtout la santé. Je vous présente ici une animation qui se nomme StartStopSlider.  Elle est intéressante car elle ne se contente pas de déplacer des blocs dans un seul sens. En effet, elle permet de déplacer les parties dans deux directions différentes horizontalement et verticalement, ce qui donne une animation plutôt sympa.

sliderstartstopCette animation dispose du bouton marche/arrêt et fait défiler les blocs à la fois de haut en bas mais aussi de droite à gauche. Et il est de plus facile de le customiser et de rajouter des blocs.

Installation:

A mettre dans la partie head:

<link rel=« stylesheet » href=« css/style.css » type=« text/css » media=« screen » charset=« utf-8″ />

<script type=« text/javascript » src=« js/jquery-1.2.6.js »></script>

<script type=« text/javascript » src=« js/startstop-.js »></script>

Dans le partie body:

<div id="slider">
	<div id="mover">
		<div id="slide-1" class="slide">
			<h1>Garden Rack</h1>
			<p>Donec gravida posuere arcu. Nulla facilisi. Phasellus imperdiet. Vestibulum at metus. Integer euismod. Nullam placerat rhoncus sapien. Ut euismod. Praesent libero. Morbi pellentesque libero sit amet ante. Maecenas tellus.</p>
			<a href="#"><img src="images/slide-1-image.png" alt="learn more" /></a>
		</div>
		... additional slides follow format of this one, except no need for ID ...
	</div>
</div>

Pour la partie CSS:
#slider          { background: white url(../images/slider-bg.jpg); height: 227px; overflow: hidden;
                   position: relative; margin: 50px 0; }
#mover           { width: 2880px; position: relative; }
.slide           { padding: 40px 30px; width: 900px; float: left; position: relative; }
.slide h1        { font-family: Helvetica, Sans-Serif; font-size: 30px; letter-spacing: -1px;
                   color: #ac0000; }
.slide p         { color: #999; font-size: 12px; line-height: 22px; width: 300px; }
.slide img       { position: absolute; top: 20px; left: 400px; }
#slider-stopper  { position: absolute; top: 1px; right: 20px; background: #ac0000; color: white;
                   padding: 3px 8px; font-size: 10px; text-transform: uppercase; z-index: 1000; }

Et pour finir la démo et disponible sur cette page: StartStopSlider
Pour plus de détails et téléchargement: StartStopSlider

A voir aussi

Réseau

Sites