abr

[2012]

Parallax Slider con CSS3 y jQuery

Parallax-Slider

Hace unos meses, en este blog de diseño web, vimos unos ejemplos de las últimas tendencias de diseño, el Parallax.

Hoy vamos a ver un ejemplo más de cómo hacer un slider con Parallax, en el que podemos ver cómo los elementos del diseño aparecen y desaparecen con distintos efectos.

En este ejemplo vamos a ver cómo controlar el comportamiento de cada elemento, dándole una clase. Cuando queremos desplazarlo a la derecha, por ejemplo, utilizamos la clase “da-slide-toright”.

Las clases utilizadas son:

.da-slide-fromright
.da-slide-fromleft
.da-slide-toright
.da-slide-toleft

El efecto Parallax se crea moviendo el fondo en dirección opuesta al movimiento del objeto. Con bgincrement, podremos controlar la cantidad de píxeles que tiene que moverse.

A continuación os dejo el enlace para ver y descargar el código de Tympanus.net

Share and Enjoy

Comparte este Blog de Diseño Web

abr

[2012]

25 animaciones jQuery y CSS3

CSS, jQuery.

Animaciones jQuery y CSS3

25 animaciones jQuery con sus correspondientes tuturiales. Sliders, parallax, landscapes animados, menús, etc…

Seguro que encuentras algo que se adapte a lo que andas buscando.

Ver animaciones en visionwidget.com

Share and Enjoy

Comparte este Blog de Diseño Web

mar

[2012]

Scrollbar con jScrollplane. jQuery

CSS, jQuery.

Scrollbar con jQuery y CSS

En diseño web cada vez se ve menos el scroll. De todos modos, hay veces en los que es necesario y si además podemos meter una barra diseñada por nosotros y ocultarla, mejor que mejor.

Este código nos permite ocultar la barra de desplazamiento, apareciendo cuando nos situamos encima de la zona de acción. Un ejemplo que podemos ver en la actividad en tiempo real de Facebook. Este ejemplo está realizado con jQuery y CSS.

CONTINUAR LEYENDO “Scrollbar con jScrollplane. jQuery” »

Share and Enjoy

Comparte este Blog de Diseño Web

mar

[2012]

Pintar con HTML5. Diseño Web

HTML5.

Etiqueta CANVAS. HTML5

El elemento Canvas de HTML5 es una etiqueta HTML similar a <div>, <a> o <table>, con la excepción de que su contenido se escribe o dibuja con JavaScript.

La etiqueta canvas va asociada a una función JavaScript, y con ella se pueden hacer todo tipo de líneas, dibujos, colores, gradientes, sombras, esquinas redondeadas, …

La forma de utilizar la etiqueta <canvas>, es la siguiente:

<!DOCTYPE HTML>
<html>
    <head>
        <script>

            window.onload = function(){
                var canvas = document.getElementById("myCanvas");
                var context = canvas.getContext("2d");

                // do stuff here
            };

        </script>
    </head>
    <body>
        <canvas id="myCanvas" width="578" height="200">
        </canvas>
    </body>
</html>

En este tutorial, podréis encontrar todo tipo de código para cada una de las múltiples posibilidades que nos ofrece esta etiqueta. Espero que os sirva.

VER EL TUTORIAL Y DESCARGAR CÓDIGO

Share and Enjoy

Comparte este Blog de Diseño Web

mar

[2012]

Notificaciones tipo iPhone con HTML5

CSS, Diseño Web, HTML5, Trucos CSS.

Notificaciones tipo iPhone con HTML5

El diseño web está muy ligado al resto de diseños tecnológicos, sobre todo al diseño realizado para smartphones. Hoy os dejo algo que seguro que os gusta. Se trata de la notificación que aparece en el iPhone (por ejemplo), cuando tenemos mensajes pendientes de leer.

Realizado en CSS3 y HTML5, aquí os dejo una demo y el código listo para descargar. Espero que os sea útil.