efecto para armar figura

[rascabuchitos]

hola amigos
tengo esta imagen

pero me gustaría que cuando entren a mi web esa imagen se arme
viniendo una imagen de la derecha otra de la izquierda y la ultima de abajo :)

alguien podría decirme como se llama el efecto responsive para buscar tutoriales al respecto y poder lograr mi objetivo?

gracias

[pzin]

No entendí lo que quieres hacer.

[superweb360]

en primer lugar necesitas tener las 3 imágenes por separado. Recortar esta imagen para obtener 3 me imagino que no valdría, porque quedaría mal.

Luego podrías conseguir el movimiento con jQuery animate()
http://www.w3schools.com/jquery/jquery_animate.asp

[rascabuchitos]

gracias superweb360
mas o menos es lo que quiero lograr:

http://www.w3schools.com/jquery/tryi...ery_animation2

pero en vez del hello que venga la imagen de chiquito a grande
y sea de forma automática cuando se ingrese a la web (todo responsive)...

dime, tendría que buscar como jquery_animate
o como algo mas especifico...


gracias...!!!

[NueveReinas]

Prueba haciéndolo con Adobe Edge Animate.

Es un entorno gráfico para la animación en HTML5+CSS3+JS+jQuery, e incluye opción responsive.

[mardojai]

No es tan difícil hacer eso, la cuestión es que se necesitan la tres imágenes por separado y completas. Solo necesitamos un "Master of Photoshop" que pueda llenar los huecos que quedarían en la laptop y tablet al separarlos xD

Saludos!

[rascabuchitos]

hola mardojai
como podría lograrlo?

NueveReinas
edge es licenciado... no creo que pueda trabajarlo :(
por eso opte por jquery

Gracias...!!!

[mardojai]

1. Se necesita las tres imágenes enteras.

2. Con css colocamos las imágenes en sus lugares usando position: absolute, left, right, top, bottom y z-index. Para que queden como la imagen original, esto es para que en móviles o navegadores sin javascript se vea la imagen igual omitiendo la animación (no recomiendo animaciones jquery para móviles).

3. Con Jquery css() movemos fuera de la vista a las imágenes y las hacemos más pequeñas.

4. Con animate() volvemos a poner las imágenes en su estado original (el punto 2), creándose un efecto de movimiento y tamaño.

5. Toda la parte de Jquery habría que limitarla a dispositivos con pantalla mayor a 800px para que no se anime en Móviles y Tablets.

Ejemplo:

Código:

if(screen.width > 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
//Código jquery aquí
}

La cuestión es que no estoy con mucho tiempo como para escribir este código, y necesitaría todo el código de tu web, y la imagen cortada como te dije.

Una opción es que me dejes tu correo y me mandes todos los archivos de tu web y ver si te puedo ayudar en mi tiempo libre con la animación, pero no sé si está permitido en el foro.

Saludos!

[Carlangueitor]

Si quieres hacerle el trabajo a alguien gratis, y arriesgarte a que cientos de usuarios de google te envíen mensajes para que les hagas sus trabajos puedes hacerlo.

Pero definitivamente no es la filosofía del foro.


Saludos

[mardojai]

Claro @Carlangueitor xD

En todo caso continuando las dudas de @rascabuchitos.
Te recomiendo que revises CodeAcademy, tiene muy buenos cursos de HTML/CSS, Jquery y otros lenguajes de programación, está enfocado a personas con pocos conocimientos en programación y es gratis, te puede ayudar a conseguir lo que buscas y para futuros proyectos.

http://www.codecademy.com/es/

Saludos!

[rascabuchitos]

o podemos postear aqui todo el trabajo para quien lo necesite en el futuro
asi no salimos de la filosofia y principios del foro :)

[mardojai]

Claro xD, con que me pases tu código (css/html) completo podría ver.
El único problema es lo de la imagen, si no puedes separarlas y que queden bien, seria de buscar tres imágenes separadas que al juntar las queden bien, eso es lo único.

Saludos!

[Carlangueitor]

Iniciado por rascabuchitos

o podemos postear aqui todo el trabajo para quien lo necesite en el futuro
asi no salimos de la filosofia y principios del foro :)

Salvo que te estarían haciendo el trabajo

Quizá si tuvieras dudas más concretas o intentaras algo, sería mejor.

[fede5426]

Iniciado por Carlangueitor

Salvo que te estarían haciendo el trabajo

Quizá si tuvieras dudas más concretas o intentaras algo, sería mejor.

Con todo respeto, no veo nada de malo que le haga el trabajo, eso es decisión de mardojai, no perjudica a nadie. Claro que veo correcto que se postee acá como solucionaron el problema porque de eso se trata el foro, así quedaría la solución plasmada en este tema.

Es más, si mardojai hace el trabajo y deja comentarios en el archivo (en el post), rascabuchitos entendería como se hace y ya habría aprendido algo nuevo, desde mi punto de visa, ganan todos.

Siempre con respeto Carlangueitor, no te quiero quitar autoridad, solo dar mi opinión.

Por cierto, creo que yo entendí lo que quiere hacer, que cada dispositivo ingrese desde una posición diferente y conformen la imagen que muestra en el post.

[razpeitia]

Buenas tardes, escuche que están haciendo trabajo gratis, por donde me formo?

Ocupo implementar varios e-commerce, response, wearable, material desing, real-time, critical mission.

[mardojai]

Como quieras @razpeitia xD, también ofrezco vps 4gb de ram 1tb de espacio + dominio .com/.net/.org gratis por 10 años.
Desarrollo e implementación de cualquier sistema (hasta si quieres te desarrollo tu propio Facebook) gratis. Si el sistema requiere un tema, también el desarrollo del mismo es gratis.
Y no solo eso, si quieres más... Desarrollo de cualquier tipo de software en C++, Pynthon, y Java. Además de apps para Android, Windows Phone, IOS, FirefoxOS y Ubuntu Phone.

La generosidad llego a ForosDelWeb.

Lo siento, tenia que decirlo (sin ánimos de ofender). xD

Simplemente tengo 16 años y tiempo libre ._. Cuando me aburro diseño webs completas y después las echo a la basura (a ver si las reciclo en algún proyecto), así que no vi problema en ayudar a hacer unas simples animaciones en Jquery, si más gente me pide que le haga el trabajo, creo que ya depende de mi si lo hago o no.

Saludos!

[rascabuchitos]

entonces a empezar mis amigos...
lo de las imagenes ... no tienen porque ser las imagenes...
tan solo es un ejercicio...
y como remembranza de guerra, cuando empezo el foro o yo empece en el foro
tambien tenia tiempo libre y hacia algunas cositas para ayudar a los demas :)

este foro siempre fue lo maximo....!!!

[pzin]

El espíritu del foro es ayudar, no hacer; guiar, no enseñar; resolver dudas puntuales, no sistemas enteros.

Lo curioso es que para hacer todo eso no necesitas ni tan siquiera de JavaScript, con CSS puedes hacerlo usando animation. Siendo esa la guía, ahora deberías de echarle un vistazo a esto.

Iniciado por rascabuchitos

y como remembranza de guerra, cuando empezo el foro o yo empece en el foro
tambien tenia tiempo libre y hacia algunas cositas para ayudar a los demas :)

La búsqueda del foro es letal a tales palabras.

[mardojai]

El siguiente ejemplo, esta diseñado con la siguiente estructura de archivos:

• index.html
• style.css
• animacion.js

index.html

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Animaci&oacute;n Jquery</title>
        <!-- Incluimos el css -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        
        <!-- Incluimos Jquery -->
        <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
        
        <!-- Incluimos el script de la animacion -->
        <script src="animacion.js"></script>
    </head>
    <body>
        <div id="banner">
            <div id="devices">
                <!-- Cada dispositivo lo pondremos como un div -->
                <div class="device laptop"></div>
                <div class="device tablet"></div>
                <div class="device phone"></div>
            </div>
        </div>
        <!-- Div de relleno -->
        <div id="content">
                        
        </div>
    </body>
</html>
 

style.css

Código CSS:

html, body {
    margin: 0;
    overflow-x: hidden;
}
 
#banner {
    background: #EEE;
    height: 380px;
}
 
#devices {    
    height: 380px;
    margin: 0px auto;
    position: relative;
    width: 700px;
}
 
.device {
    position: absolute;
}
 
.laptop {
    background: #666;
    height: 300px;
    width: 450px;
    z-index: 2;
}
 
.tablet {
    background: #363636;
    height: 200px;
    right: 0px;
    top: 100px;
    width: 300px;
    z-index: 1;
}
 
.phone {
    background: #085ed3;
    bottom: 0px;
    height: 180px;
    left: 400px;
    width: 100px;
    z-index: 3;
}
 
#content {
    background: #000;
    color: #FFF;
    height: 800px;
    position: relative;
    z-index: 9999;
}
 

animacion.js

Código Javascript:

$(document).ready(function(){
    
    if(screen.width > 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) { // Limitamos la animacion a dispositivo con pantalla mas grande que 800px
        var device = $('.device') // Todos los divs con la clase "device" los comvertimos en objetos de Jquery y en una variable.
        
        var laptop = $('.laptop') // La laptop la comvertimos en objeto de Jquery y en una variable.
        var tablet = $('.tablet') // La tablet la comvertimos en objeto de Jquery y en una variable.
        var phone = $('.phone') // El phone la comvertimos en objeto de Jquery y en una variable.
        
        device.css('display','none'); // Hacemos que no se muestren todos los divs con la clase "device".
        laptop.css('left','-800px'); // Ponemos la laptop -800px a la izquierda
        tablet.css('right','-800px'); // Ponemos la tablet -800px a la derecha
        phone.css('bottom','-400px'); // Ponemos el phone -800px para abajo
        
        device.fadeIn(100); // Ahora mostramos los divs con la clase "device".
        laptop.animate({left: '0px'}, 1000); // Hacemos que entre la laptop
        tablet.animate({right: '0px'}, 1000); // Hacemos que entre la tablet
        phone.animate({bottom: '0px'}, 1000); // Hacemos que entre el phone
        
    }
    
});
 

Aquí esta una demostración: DEMO
Y un link de descarga: DESCARGA

Se que el código no es perfecto, pero es todo lo que puedo dar. Y es cierto, una buena opción puede ser hacerlo directamente con animaciones css.

Saludos

[mardojai]

Con css seria así:

Estructura de archivos:

• index.html
• style.css

index.html

Código HTML:

<!DOCTYPE html>
<html lang="es">
    <head>
        <title>Animaci&oacute;n Jquery</title>
        
        <!-- Incluimos el css -->
        <link rel="stylesheet" type="text/css" href="style.css" />
        
        </head>
    <body>
        <div id="banner">
            <div id="devices">
                <!-- Cada dispositivo lo pondremos como un div -->
                <div class="device laptop"></div>
                <div class="device tablet"></div>
                <div class="device phone"></div>
            </div>
        </div>
        <!-- Div de relleno -->
        <div id="content">
                        
        </div>
    </body>
</html>
 

style.css

Código CSS:

html, body {
    margin: 0;
    overflow-x: hidden;
}
 
#banner {
    background: #EEE;
    height: 380px;
}
 
#devices {    
    height: 380px;
    margin: 0px auto;
    position: relative;
    width: 700px;
}
 
.device {
    position: absolute;
}
 
.laptop {
    animation: laptop 1.5s;
    -webkit-animation: laptop 1.5s;
    background: #666;
    height: 300px;
    width: 450px;
    z-index: 2;
}
 
.tablet {
    animation: tablet 1.5s;
    -webkit-animation: tablet 1.5s;
    background: #363636;
    height: 200px;
    right: 0px;
    top: 100px;
    width: 300px;
    z-index: 1;
}
 
.phone {
    animation: phone 1.5s;
    -webkit-animation: phone 1.5s;
    background: #085ed3;
    bottom: 0px;
    height: 180px;
    left: 400px;
    width: 100px;
    z-index: 3;
}
 
@-webkit-keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}
@keyframes laptop {
    from {left: -800px;}
    to {left: 0px;}
}
 
@-webkit-keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}
@keyframes tablet {
    from {right: -800px;}
    to {right: 0px;}
}
 
@-webkit-keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}
@keyframes phone {
    from {bottom: -400px;}
    to {bottom: 0px;}
}
 
#content {
    background: #000;
    color: #FFF;
    height: 800px;
    position: relative;
    z-index: 9999;
}
 

Ejemplo: https://jsfiddle.net/21aoLz1j/1/embedded/result/

Saludos!

[rascabuchitos]

talento puro mi estimado...
ahora le meto mano y veo si puedo hacer algun aporte :)

para que tambien se vea en moviles...


gracias...!!!