Comillas animadas Jquery

Posteado el 28. Dec, 2010 por tuto in Dreamweaver

Les dejamos en este tutorial como animar comillas con Jquery utilizando Dreamweaver esperamos les guste
Aqui pueden ver el demo en linea

PASO 1
Creamos una carpeta nueva llamada Comillas, dentro de la cual creamos una carpeta llamada imágenes donde vamos a guardar la imagen que nos servirá de fondo para nuestro tutorial.

PASO 2
Abrimos Adobe Dreamweaver y creamos un nuevo documento HTML en blanco.

PASO 3
Debajo de la etiqueta Comillas Animadas con Jquery vamos a copiar el siguiente código html4strict.

Code block

<link rel="stylesheet" type="text/css" href="css/estilo.css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

PASO 4
Presionamos el comando Ctrl + S para guardar nuestro documento con dentro de la carpeta comillas con el nombre comillas.html.

PASO 5
Ahora con el comando Ctrl + N creamos un nuevo documento CSS en blanco.

PASO 6
Dentro del documento CSS copiamos el siguiente código CSS.

Code block

ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input{margin:0; padding:0;}
 
/* HTML ELEMENTS */
body {
	background-image:url(../imagenes/bg.jpg);
	font-family: "Segoe UI","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Arial,Tahoma,Verdana,sans-serif;
	font-size:13px;
	color:#eee;
	background-repeat: no-repeat;
	background-position: center top;
}
h1 { font: bold 65px/60px Helvetica, Arial, Sans-serif; text-align: center; color: #eee; text-shadow: 0px 2px 6px #333; }
h1 small{ font-size: 20px; text-transform:uppercase; letter-spacing: 14px; display: block; color: #ccc; }
h2 a { display: block; text-decoration: none; margin: 0 0 30px 0; font: italic 45px Georgia, Times, Serif;  text-align: center; color: #bfe1f1; text-shadow: 0px 2px 6px #333; }
h2 a:hover { color: #90bcd0; }
 
/* COMMON CLASSES */
.break { clear:both; }
 
/* WRAPPER */
#wrapper { width:800px; margin:40px auto; }
 
/* CONTENT */
#content { }
#content p.info { margin:10px auto; width:600px; }
#content p a { color: #bfe1f1; text-decoration:none; }
#content p a:hover { color: #90bcd0; }
 
/* QUOTE BOX */
#quotebox {
	width:550px;
	height:150px;
	margin:20px auto;
	color:#FFCC00;
	-webkit-box-shadow:0 0 10px #000000;
	-moz-box-shadow:0 0 10px #000000;
	box-shadow:0 0 10px #000000;
	background-color: #666666;
}
.quote {
	display:none;
	float:left;
	height:69px;
	background-color:#333333;
	margin-left:20px;
	margin-top:14px;
	padding:7px;
}
.quote p { font:bold 17px Helvetica, Arial, Sans-serif; }
.quote .author {
	font:italic 13px Georgia,serif,Times;
	color:#FFFFFF;
	padding-top:1px;
}
.quotemark {
	display:none;
	float:left;
	letter-spacing:-35px;
	line-height:300px;
	color:#333333;
	font-family: Helvetica;
	font-size: 300px;
	font-weight: bold;
}
.rightquote { margin-top:-3px; }

PASO 7
Presionamos el comando Ctrl + S y guardamos nuestro documento dentro de la carpeta css que se encuentra de la carpeta comillas con el nombre estilo.css.

PASO 8
Regresamos a nuestro documento HTML y dentro de las etiquetas copiamos el siguiente código html4strict.

Code block

<div id="wrapper">
	<h1>Comillas Animadas<small>Usando jQuery</small></h1>
	<h2><a href="http://www.tutorialesenlaweb.com" title="Visit Marcofolio.net">Tutoriales en la web</a></h2>
<div id="content">
 
<div id="quotebox">
			<p class="quotemark leftquote">‘‘</p>
			<div class="quote"></div>
			<p class="quotemark rightquote">’’</p>
		</div>
 
	</div>
</div>

PASO 9
Dentro de la carpeta comillas creamos una carpeta nueva llamada js dentro de la cual vamos a copiar los dos archivos JS que adjunto en este tutorial.

PASO 10
Ahora abrimos en Adobe Dreamweaver el documento js llamado script y en donde se señala en la imagen ahí vamos a cambiar el texto de las frases que necesitamos que aparezcan.