[SOLUCIONADO] Conseguir efecto como el de esta web

programador_independ · #1 (**permalink**) 25/09/2014, 13:05

Que tal compañeros buen día.

Cómo se consigue hacer el efecto de esta web:

http://bextlan.com/proyectos/alumnos/don-gato/personajes.html

Me refiero al efecto de que cuando le das click a uno de los personajes, se despliegue el texto de arriba y cuando se elije otro personaje, cierra el texto del personaje anterior y abre el nuevo texto del personaje elegido.

Muchas gracias por sus respuestas.

Dios les Bendiga y les Conserve la Salud.

javierflti · #2 (**permalink**) 26/09/2014, 01:26

Este efecto se consigue con Jquery
Básicamente lo que tienes que hacer es tener un div con el texto que quieras mostrar y utilizar las funciones de jquery show() y hide() para mostrarlo y ocultarlo.
Para que la transición dure un segundo o dos, añade 1000 dentro de las funciones (es el tiempo en milisegundos)

Para el texto puedes tener un solo div que se modifique mediante javascript o tener varios e ir ocultando y mostrando según el personaje

Por ejemplo, con un solo div tendrías que hacer

Código:

$(#nombreDeTuDiv).hide(1000);
$(#nombreDeTuDiv).innertext() = "nuevo texto del div"
$(#nombreDeTuDiv).show(1000);

Con estas tres líneas cerrarías el div, cambiarías el texto y lo volverías a abrir.

Intenta investigar con esto y si tienes alguna duda pásate de nuevo por aquí

programador_independ · #3 (**permalink**) 26/09/2014, 18:33

Muchas gracias compañero javierflti.

Voy a investigar sobre lo que me has indicado de jquery, voy a realizar las divs y te tomo la palabra, sí tengo dudas, vuelvo a pedir tu ayuda compañero.

Saludos, Dios te Bendiga y te Conserve la Salud.

programador_independ · #4 (**permalink**) 02/10/2014, 13:58

Buen día compañero javierflti.

Después de haber investigado y leído y releído no he podido dar exactamente con el efecto que busco. Lo máximo que logré fue armar un código como este:

Código:

<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>
<head>
   <title>Efectos con jQuery</title>
   <script src="jquery-1.11.1.min.js" type="text/javascript"></script>   
<script>
$(document).ready(function(){
   $("#ocultar").click(function(event){
    event.preventDefault();
    $("#capaefectos").hide(3000);
   });

   $("#mostrar").click(function(event){
    event.preventDefault();
    $("#capaefectos").show(3000);
   });   

});
</script>
</head>

<body>

<div id="capaefectos" style="background-color: #cc7700; color:fff; padding:10px;">
Esto es una capa que nos servirá para hacer efectos!
<br>
<br>
Pongo este texto simplemente de prueba
</div>

<p>
<a href="#" id="ocultar">Ocultar la capa</a> | 
<a href="#" id="mostrar">Mostrar la capa</a> 
</p>

</body>
</html>

El cual hace aparecer y desaparecer la div por completo.

Ahora bien, bajé el código de la página que muestro en el primer mensaje de este post y tomé el código y me funciona el efecto de bajar y subir el div, lo que no sé cómo realizar es que me muestre un párrafo distinto según el personaje que elijo, estuve investigando como lo puedo cambiar con la línea que tú me indicas:

Código:

$(#nombreDeTuDiv).innertext() = "nuevo texto del div"

pero no sé cómo usarla, dónde ni cómo ponerla en el código.

aquí está el código de la página de don gato:

nombre del archivo: personajes.html

Código:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>Personajes</title>
	<meta name="description" content="Sección Personajes de Don Gato."/>
	<!-- Importante para que sea responsive, aquí se adapta al device -->
	<meta name"viewport" content="width=device-width,initial-scale=1, maximum-scale=1"/>
	<!-- http://www.convertico.com/ imagen de tipo ico de 16px x 16px -->
	<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
	<!-- imagen de 57px x 57 px formato png para visualizar en ipad -->
	<link rel="apple.touch-icon" href="apple-touch-icon.png"/>
	<!-- http://humanstxt.org/ datos de la gente que colaboró en el sitio -->
	<!-- <link rel="author" type="text/plain" href="humans.txt"/> -->
<!-- 	Mapa de sitio en formato XML http://www,sitemaps.org/
	Generador de mapa de sitio http://www.xlm-sitemaps.com -->
	<link rel="sitemap" type="application/xml" title="Sitemap" href="sitemap.xml" />
	<link rel="stylesheet" href="css/jquery.fancybox.css" />
	<link rel="stylesheet" href="css/estilos.css" />
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
	<script>
		!window.jQuery && document.write("<script src='js/jquery.min.js'><\/script>");
	</script>
	<script src="js/jquery.mousewheel-3.0.6.pack.js"></script>
	<script src="js/jquery.fancybox.js"></script>
	<script src="js/efectos.js"></script>
	<script>
		$(document).on("ready",mostrarPersonajes);
	</script>
	
</head>

<body>
<header>
	<h1>
<a href="index.html"><img src="img/top-cat-logo.png" title="Don Gato"></a>
	</h1>
	<nav>
<ul>
	<!-- <li><a class="cambio" href="index.html">Inicio</a></li> -->
	<li><a class="cambio" href="historia.html">Historia</a></li>
	<li><a class="cambio" href="personajes.html">Personajes</a></li>
	<li><a class="cambio" href="capitulos.html">Capítulos</a></li>
	<li><a class="cambio" href="galeria.html">Galería</a></li>
	

</ul>
	</nav>

</header>
<section id="contenido">
			<section id="personajes-descripcion">
			<h2>Top Cat</h2>
			<p>
				Top Cat, conocido en español como Don Gato y su pandilla o simplemente como Don Gato, es una serie animada para la televisión de apenas 30 episodios, ideada por el joven Luis Pistocchi y producida por Hanna-Barbera en 1961 y emitida en el horario estelar en la cadena ABC de los Estados Unidos a partir del 27 de septiembre de 1961 hasta el 8 de abril de 1962.
			</p>
		</section>
		<section id="personajes-html5">
			<div>
				<figure id="don_gato_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/don.png" title="Don Gato" />
						<figcaption class="cambio">Don Gato</figcaption>
					</a>
				</figure>
				<figure id="benito_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/ben.png" title="Benito" />
						<figcaption class="cambio">Benito</figcaption>
					</a>
				</figure>
				<figure id="cucho_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/cu.png" title="Cucho" />
						<figcaption class="cambio">Cucho</figcaption>
					</a>
				</figure>
				<figure id="demostenes_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/demos.png" title="Demóstenes" />
						<figcaption class="cambio">Demóstenes</figcaption>
					</a>
				</figure>
			
				<figure id="espanto_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/espan.png" title="Espanto" />
						<figcaption class="cambio">Espanto</figcaption>
					</a>
				</figure>
				<figure id="panza_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/pan.png" title="Panza" />
						<figcaption class="cambio">Panza</figcaption>
					</a>
				</figure>
				<figure id="matute_" class="personajes">
					<a href="#">
						<img class="cambio redonda" src="img/matu.png" title="Matute" />
						<figcaption class="cambio">Matute</figcaption>
					</a>
				</figure>
				
			</div>
		</section>
		

	</section>

	<footer>
	Sitio Don gato por Fco. Hdez. Mayo 2013
	</footer>

</body>
</html>

y aquí esta el código js
nombre del archivo: efectos.js

Código:

//funcion del index.html
function iniciarSlider()
{
	$(".flexslider").flexslider({
		animation:"slide",
		direction:"horizontal",
		slideshowSpeed: 3000		
	});
}

//funcion de acerca.html
function formulaHTML5()
{
	//alert("probando");
	var imgFormula = $("#acerca-historia figure img");

	imgFormula.on("mouseover",function(){
		$(this).css({
			background:"rgba(190,236,249,.6)",
			borderRadius:"1em",
			boxShadow:"-.1em -.1em .5em #F60 inset"
		});
	});

	imgFormula.on("mouseout",function(){
		$(this).css({
			background:"transparent",
			borderRadius:"0",
			boxShadow:""
		});
	});

	imgFormula.on("click",function(){
		$("#acerca-historia figcaption").slideToggle(2000);
	});
}



//funciones de personajes.html
function mostrarPersonajes()
{
	//alert("Probando");
	var figureId, figcaption, url;

	$(".personajes").on("mouseover",function(){
		figureId = $(this).attr("id");
		//alert(figureId);
		figcaption = "#"+figureId+" figcaption";
		$(figcaption).animate({opacity:1},"swing");		
	});

	$(".personajes").on("mouseout",function(){
		figureId = $(this).attr("id");
		//alert(figureId);
		figcaption = "#"+figureId+" figcaption";
		$(figcaption).animate({opacity:0},"swing");
	});

	$("#don_gato_").on("click",quePersonaje);
	$("#benito_").on("click",quePersonaje);
	$("#cucho_").on("click",quePersonaje);
	$("#demostenes_").on("click",quePersonaje);
	$("#espanto_").on("click",quePersonaje);
	$("#panza_").on("click",quePersonaje);

	$("#matute_").on("click",quePersonaje);


	$(".ejemplo").fancybox();
}

function quePersonaje(enlace)
{
	enlace.preventDefault();
	figureId = $(this).attr("id");
	url = "html/"+figureId+".html";
	$("#personajes-descripcion").slideUp(2000,function(){
		$(this).load(url);
	}).slideDown(2000);
}

Lo que cambia es el contenido del párrafo del archivo "personajes.html", según el personaje que se elije, pero no sé como meterle el nuevo párrafo.

Espero me puedas ayudar por favor compañero.

Dios te Bendiga y te Conserve la Salud.

programador_independ · #5 (**permalink**) 09/10/2014, 05:26

Doy por concluido el tema ya que yo mismo he encontrado la respuesta.