Comunidad de diseño web y desarrollo en internet online

crear un pasillo o galeria de imagenes en HTML5

Foros de discusión > CSS y HTML

Citar            
MensajeEscrito el 21 Ago 2015 06:32 am
Estimados, necesito crear una galeria de imágenes en 3d que avancen desde el centro hacia los costados, dando la ilusión de que van avanzando por un pasillo y el avance por este pasillo pueda ser controlado por el scroll del raton o las flechas del teclado. agradeceria enormemente vuestra ayuda.

Por donky_bong

2 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 21 Ago 2015 12:17 pm
¿Qué llevas hecho hasta ahora?

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

chrome
Citar            
MensajeEscrito el 21 Ago 2015 10:43 pm
hasta ahora solo tengo una galería que se desplaza de izquierda a derecha de forma plana, no he logrado darle el efecto de profundidad ni menos duplicarlo simétricamente en ambos costados :(

Por donky_bong

2 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 22 Ago 2015 06:32 am

DriverOp escribió:

¿Qué llevas hecho hasta ahora?

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="donky_bong" content="projectounoduroyseguro">
<meta name="keywords" content="HTML, CSS3, JavaScript">
<title>mercado-pyme</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<div id="agrupar">
<header id="cabecera">
<h1>mercado-pyme</h1>
<h2>una nueva experiencia en comprar</h2>

</header>
<nav id="menu">
<ul>
<li>Bienvenido:-textdato=nombre-</li>
<li>tu carro: -monto=valor- </li>
<li>selecciona categoria: </li>
<li>vestuario</li>
<li>calzado</li>
<li>artesanias</li>
<li>joyeria</li>
<li>gourmet</li>
<li>delivery</li>
<li>servicios</li>
<li>miscelaneo</li>
<li>musica</li>
<li>deportes</li>
</ul>
</nav>

</div>

<section>
<article1>
</div>
<div class="wall">
<div id="pg_container" class="pg_container">
<ul id="pg_photos" class="pg_photos"><!-- calculate top-->
<li><a href="#1"><img src="images/1.jpg" alt="shushaita"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="A description"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="Another descritpion of the image"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="shushaita"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="shushaita"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="shushaita"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="shushaita"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="shushaita"/></a></li>
<li><a href="#9"><img src="images/9.jpg" alt="shushaita"/></a></li>
<li><a href="#10"><img src="images/10.jpg" alt="shushaita"/></a></li>
<li><a href="#11"><img src="images/11.jpg" alt="shushaita"/></a></li>
<li><a href="#12"><img src="images/12.jpg" alt="shushaita"/></a></li>
<li><a href="#13"><img src="images/13.jpg" alt="shushaita"/></a></li>
<li><a href="#14"><img src="images/14.jpg" alt="shushaita"/></a></li>
<li><a href="#15"><img src="images/1.jpg" alt="shushaita"/></a></li>
<li><a href="#16"><img src="images/2.jpg" alt="shushaita"/></a></li>
<li><a href="#17"><img src="images/3.jpg" alt="shushaita"/></a></li>
<li><a href="#18"><img src="images/4.jpg" alt="shushaita"/></a></li>
<li><a href="#19"><img src="images/5.jpg" alt="shushaita"/></a></li>
<li><a href="#20"><img src="images/6.jpg" alt="shushaita"/></a></li>
<li><a href="#21"><img src="images/7.jpg" alt="shushaita"/></a></li>
<li><a href="#22"><img src="images/8.jpg" alt="shushaita"/></a></li>
<li><a href="#23"><img src="images/9.jpg" alt="shushaita"/></a></li>
<li><a href="#24"><img src="images/10.jpg" alt="shushaita"/></a></li>
<li><a href="#25"><img src="images/11.jpg" alt="shushaita"/></a></li>
<li><a href="#26"><img src="images/12.jpg" alt="shushaita"/></a></li>
<li><a href="#27"><img src="images/13.jpg" alt="shushaita"/></a></li>
<li><a href="#28"><img src="images/14.jpg" alt="shushaita"/></a></li>
</ul>
</div>
</div>
</article1>

<article2>
</div>
<div class="wall">
<div id="pg_container" class="pg_container">
<ul id="pg_photos" class="pg_photos"><!-- calculate top-->
<li><a href="#1"><img src="images/1.jpg" alt="shushaita 1"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="shushaita2"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="shushaita3"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="shushaita4"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="shushaita5"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="shushaita6"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="shushaita7"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="shushaita8"/></a></li>
<li><a href="#9"><img src="images/9.jpg" alt="shushaita9"/></a></li>
<li><a href="#10"><img src="images/10.jpg" alt="shushaita10"/></a></li>
<li><a href="#1"><img src="images/1.jpg" alt="shushaita 1"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="shushaita2"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="shushaita3"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="shushaita4"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="shushaita5"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="shushaita6"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="shushaita7"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="shushaita8"/></a></li>
<li><a href="#9"><img src="images/9.jpg" alt="shushaita9"/></a></li>
<li><a href="#10"><img src="images/10.jpg" alt="shushaita10"/></a></li>
<li><a href="#1"><img src="images/1.jpg" alt="shushaita 1"/></a></li>
<li><a href="#2"><img src="images/2.jpg" alt="shushaita2"/></a></li>
<li><a href="#3"><img src="images/3.jpg" alt="shushaita3"/></a></li>
<li><a href="#4"><img src="images/4.jpg" alt="shushaita4"/></a></li>
<li><a href="#5"><img src="images/5.jpg" alt="shushaita5"/></a></li>
<li><a href="#6"><img src="images/6.jpg" alt="shushaita6"/></a></li>
<li><a href="#7"><img src="images/7.jpg" alt="shushaita7"/></a></li>
<li><a href="#8"><img src="images/8.jpg" alt="shushaita8"/></a></li>
<li><a href="#9"><img src="images/9.jpg" alt="shushaita9"/></a></li>
<li><a href="#10"><img src="images/10.jpg" alt="shushaita10"/></a></li>
</ul>
</div>
</div>
</article2>
</section>
<aside>

<li><a href="#1"><img src="publ/1.jpg" alt="publicidad"/></a></li>
<li><a href="#2"><img src="publ/2.jpg" alt="publicidad"/></a></li>
<li><a href="#3"><img src="publ/3.jpg" alt="publicidad"/></a></li>

</aside>
<footer>
copyrigt@donky_bong design diseñado en 2015

</footer>
</body>

Por donky_bong

2 de clabLevel



 

Envíale un mensaje privado    

chrome
Foros de discusión > CSS y HTML

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.