• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech News
Sin resultados
Ver todos los resultados

Cómo crear un paisaje animado con jQuery y CSS

Diego CambiasoporDiego Cambiaso
06/03/2018
enDesarrollo/programación, Internet, Recursos
Tiempo de lectura2 minutos
0

Paisaje animado con jQuery y CSSHace un tiempo vimos cómo crear un fondo animado con Mootools, hoy vamos a ver cómo crear un paisaje animado con jQuery y CSS.

La animación de este ejemplo consiste en un bote que recorre un río, en éste se ven también el desplazamiento de las nubes.

Implementación

Primero tenemos que enlazar los archivos JS en la sección HEAD del HTML de la página, que en este caso son la biblioteca jQuery y el plugin Landscape:

EntradasRelacionados

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

4 Tips de Oracle para iniciarte en el mundo de la programación

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js" 
type="text/javascript"><!--mce:0--></script>
<script src="landscape.js" type="text/javascript"><!--mce:1--></script>

Con la siguientes funciones animamos las nubes:

function cloudone(){
$("#cloudone").animate({left:"+=1200px"},10000).animate({left:"-200px"}, 0)
setTimeout("cloudone()",10000);
}
function cloudtwo(){
$("#cloudtwo").animate({left:"+=1500px"},15000).animate({left:"-300px"}, 0)
setTimeout("cloudtwo()",15000);
}
function cloudthree(){
$("#cloudthree").animate({left:"+=2000px"},20000).animate({left:"-600px"}, 0)
setTimeout("cloudthree()",20000);
}
function boat(){
//Tiempo necesario para mover el bote a la izquierda
$("#boat").animate({right:"+=1000px"},20000).animate({right:"-200px"}, 0)
setTimeout("boat()",20000);
}

Luego tenemos que iniciar la acción:

$(document).ready(function() {
setTimeout("cloudone()",10);
setTimeout("cloudtwo()",10);
setTimeout("cloudthree()",10);
setTimeout("boat()",10);
});

Luego creamos la estructura de la animación con HTML, el contenedor con el ID inner, es el que contiene toda la animación:

<div id="wrapper">
<div id="inner">
<div id="cloudone"><img src="images/clud1.png"></div>
<div id="cloudtwo"><img src="images/clud2.png"></div>
<div id="cloudthree"><img src="images/clud1.png"></div>
<div id="boat"><img src="images/boat.png"></div>
</div>
</div>

Por último el código CSS:

#wrapper {
width:800px;
height:600px;
/* Imagenprincipal que contiene el cielo, sol, rio y nubes
background-image:url(images/Untitled-3.jpg);
background-repeat:no-repeat;
margin-top:10px;
margin-left:auto;
margin-right:auto;
border: 10px solid #666;
}
#inner {
position:relative;
overflow:hidden;
width:800px;
height:600px;
margin:0px;
}
#cloudone {
position:absolute;
margin-top:2px;
margin-left:-200px;
filter:alpha(opacity=80);
/* CSS3 estandard */opacity:0.8;
}
#cloudtwo {
position:absolute;
margin-top:80px;
margin-left:-300px;
filter:alpha(opacity=60);
/* CSS3 estandard */opacity:0.6;
}
#cloudthree {
position:absolute;
margin-top:60px;
margin-left:-600px;
filter:alpha(opacity=70);
/* CSS3 estandard */opacity:0.7;
}
#boat {
margin-top:360px;
position:absolute;
margin-left:800px;
}

Colorario

En general, aunque nos puede parecer algo extenso es muy sencillo; la parte más larga de esta implementación es el código CSS.

Animated Landscape Using CSS and jQuery

Visitar: acrisdesign.com/2010/04/animated-landscape-using-css-and-jquery

Demo: acrisdesign.com/demo/landscape

Tags: animacion jqueryCSSCuriosidaddesarrollowebJavascriptjQueryplugin jqueryprogramacion webRecursosSoftware libre
Diego Cambiaso

Diego Cambiaso

Comunicador Social y Desarrollador de Software. Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

WixCcode

WixCode una moderna herramienta para desarrollo web

07/05/2018
Microsoft Teams - Interface

Microsoft Teams disponible para usuarios de Office 365 en el mundo

20/03/2017

Note Links: Conoce una función de Evernote para conectarte con los contenidos esenciales

18/01/2015
HEX: Shards of Fate - Open BEta

Hex: Shards Of Fate – Disponible en Open Beta

05/12/2014

C-Lab de Samsung recibe 29 premios CES a la Innovación

18/01/2023

CES 2023: Un futuro sostenible gracias a la conectividad

16/01/2023

Samsung comparte su visión para llevar la calma a la experiencia de los dispositivos conectados en CES 2023

11/01/2023

Estudio: Los relojes inteligentes ayudan a prevenir o reducir la obesidad

26/12/2022

Sáquele provecho a las características de un TV 8K

21/12/2022

Ventajas de un proyector portátil de 100 pulgadas

19/12/2022

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...