Mostrando entradas con la etiqueta Javascript. Mostrar todas las entradas

Calendarios con estilo para tu blog

Ahora mostrar la fecha en tu blog puede, ademas de ser practico, ser un elemento mas de decoracion del sitio. Para tal motivo, me he estrujado un poquito las neuronas y me ha salido este widget tan 'cool' que muestra el numero y el nombre del dia a la perfeccion. Con un diseño elegante, con forma de icono y fondos combinando degradados y 'glossy', he utilizado Javascript para lo tecnico y CSS3 para lo visual. Esta disponible en 3 tonos: azul, negro y rojo, elige el que mas te guste y copia su codigo correspondiente para ponertelo en tu blog o web.

ver codigo

ver codigo

ver codigo

leer articulo ➨

Girar imagenes con un click

comentar

Combinando un poquito de Javascript y otro poquillo de CSS3 podemos conseguir que cualquier imagen de nuestro blog o web gire al hacer click con el raton sobre ella.

Para poner este efecto en una imagen, la cuestion es muy sencilla. Copiamos y pegamos el siguiente codigo donde queramos mostrarla, sustituyendo lo que esta en color rojo por la url de dicha imagen:

<img src="URL DE LA IMAGEN" id="girar"><script>
//<![CDATA[
$('#girar').on("click", function(e) {
e.preventDefault();
$('#girar').addClass('giro');

var t1 = setTimeout(function() {
$('#girar').removeClass('giro');
}, 1000);
});
//]]>
</script>
<style>
#girar {
position: relative;cursor:pointer;
-webkit-transition: all 500ms ease-in-out;
    -moz-transition: all 500ms ease-in-out;
    -o-transition: all 500ms ease-in-out;
    -ms-transition: all 500ms ease-in-out;
}

#girar.giro {
    -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
         -o-transform: rotate(90deg);
            transform: rotate(90deg);
    zoom: 1;
}
</style>

En caso de que queramos que gire hacia otro lado, modificando la parte del codigo CSS (-webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); transform: rotate(90deg);), podemos cambiar el agulo de rotacion. Y como ejemplo, aqui teneis 2 imagenes, podeis hacer click en cualquiera de ellas para comprobarlo.

leer articulo ➨

Letras que cambian de color al pasar el cursor

1 comentó

Ya hemos visto en este mismo blog muchas tecnicas para aplicar al texto, bien sean sombras, animaciones, parpadeos de colores, etc... Pues bien, en este caso, vamos a ver como aplicando un poco de Javascript combinado con CSS, no solo conseguimos que cada letra sea de un color diferente, sino que al pasar el cursor sobre cada una de ellas, estas cambien de color independientemente.

Aqui debajo tienes el ejemplo, pasa el raton por las letras y observaras este efecto camaleonico:

Si te ha gustado y quieres ponerlo en tu blog o web, copia el siguiente codigo y pegalo donde tu quieras. Lo que esta resaltado en color verde es el tamaño de la fuente, lo que esta en azul son los codigos HEX de los colores utilizados y donde esta en color rojo, sustituyelo por el texto que quieras poner.

ver codigo

leer articulo ➨

Texto interactivo

1 comentó

Para ponerlo de titulo en el blog, para poner un mensaje o para lo que tu quieras utilizarlo, te voy a enseñar un codigo realizado con Javascript y la etiqueta canvas (HTML5) que te permitira añadir un texto interactivo. Como puedes ver en el ejemplo de aqui abajo, al pasar el cursor alrededor o por encima, este se va moviendo y haciendo 'la ola'. Ademas, cada vez que recargues la pagina aparecerera con un color distinto. Para ponerlo en tu blog o web, tan solo tienes que copiar el codigo y pegarlo alli donde quieras mostrarlo. Donde esta indicado en color rojo, escribes el texto que quieras. Lo que esta en color verde es el tamaño o espacio que ocupa y lo que esta en azul es el tamaño y el tipo de la fuente.

<canvas id="c"></canvas> <script> document.body.clientWidth; with(Math){r=random;f=floor;pi=PI;at=atan2}w=window;a=[];function rn(b){return f(r()*b)}function rc(){return"rgb("+rn(255)+","+rn(255)+","+rn(255)+")"} w.onload=function(){c=document.getElementById("c");c.width=cw=600;c.height=ch=300;o=c.getContext("2d");g=o.createLinearGradient(0,0,cw,70);g.addColorStop(0,rc());g.addColorStop(0.5,rc());o.fillStyle=g;o.font="60px Arial Black";o.fillText("TU TEXTO AQUI",50,200);for(x=0;x<cw;x+=5)for(y=0;y<ch;y+=5){d=o.getImageData(x,y,1,1).data;color="rgb("+d[0]+","+d[1]+","+d[2]+")";d[2]!=0&&a.push({x:x,y:y,c:color})}w.onmousemove=function(b){x=b.clientX;y=b.clientY};setInterval(function(){c.width=cw;for(i=0;i<a.length;i++){o.save(); o.translate(a[i].x,a[i].y);o.rotate(at(x-a[i].x,-(y-a[i].y))*(180/pi)/50);o.fillStyle=a[i].c;o.beginPath();o.moveTo(20,20);o.lineTo(25,20);o.lineTo(20,25);o.fill();o.restore()}},10)};</script>

leer articulo ➨

Cubo 3D con tu logo

2 comentaron

Vamos a ver una original manera de presentar el logo de tu blog o web o la imagen que desees transformandola en un cubo 3D. ¿Como conseguimos este efecto? Pues con la libreria three.js, utilizada por desarrolladores de juegos y animadores, ya que con ella se pueden crear increibles animaciones utilizando para ello simplemente Javascript y HTML5. Para que veais como queda, he puesto esta imagen que veis a la derecha y aqui abajo teneis el resultado. La imagen aparece por los seis lados del cubo y pasando el cursor del raton por encima podemos rotarlo en todas las direcciones posibles.

Si quieres añadirlo en tu blog o web, copia el siguente codigo y pegalo donde quieras mostrar el cubo. Sustituye URL IMAGEN (en color rojo) por la direccion URL de la imagen que quieras poner.

ver codigo

<div id="container"></div>
<script src="https://sites.google.com/site/redeando1/cubotresd.js"></script>
<script src="https://sites.google.com/site/redeando1/cubotresd2.js"></script>
<script>
var container, stats;
   var camera, scene, renderer;
   var group;
   var mouseX = 0, mouseY = 0;

   var windowHalfX = window.innerWidth / 2;
   var windowHalfY = window.innerHeight / 2;

   init();
   animate();

   function init() {

    container = document.getElementById( 'container' );

    camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 500;

    scene = new THREE.Scene();

    group = new THREE.Object3D();
    scene.add( group );

    // earth

    var earthTexture = new THREE.Texture();
    var loader = new THREE.ImageLoader();

    loader.addEventListener( 'load', function ( event ) {

     earthTexture.image = event.content;
     earthTexture.needsUpdate = true;

    } );

    loader.load( 'URL IMAGEN' );

    var geometry = new THREE.CubeGeometry( 200, 200, 200 );
    var material = new THREE.MeshBasicMaterial( { map: earthTexture, overdraw: true } );

    var mesh = new THREE.Mesh( geometry, material );
    group.add( mesh );

    // shadow

    var shadowTexture = new THREE.Texture();
    var loader = new THREE.ImageLoader();

    loader.addEventListener( 'load', function ( event ) {

     shadowTexture.image = event.content;
     shadowTexture.needsUpdate = true;

    } );

    loader.load( '' );

    var geometry = new THREE.PlaneGeometry( 400, 400, 3, 3 );
    var material = new THREE.MeshBasicMaterial( { map: shadowTexture, overdraw: true } );

    var mesh = new THREE.Mesh( geometry, material );
    mesh.position.y = - 250;
    mesh.rotation.x = - Math.PI / 2;
    group.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    container.appendChild( renderer.domElement );

    stats = new Stats();
    stats.domElement.style.position = 'absolute';
    stats.domElement.style.top = '0px';

    document.addEventListener( 'mousemove', onDocumentMouseMove, false );

    //

    window.addEventListener( 'resize', onWindowResize, false );

   }

   function onWindowResize() {

    windowHalfX = window.innerWidth / 2;
    windowHalfY = window.innerHeight / 2;

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );

   }

   function onDocumentMouseMove( event ) {

    mouseX = ( event.clientX - windowHalfX );
    mouseY = ( event.clientY - windowHalfY );

   }

   //

   function animate() {

    requestAnimationFrame( animate );

    render();
    stats.update();

   }

   function render() {

    camera.position.x += ( mouseX - camera.position.x ) * 0.05;
    camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
    camera.lookAt( scene.position );

    group.rotation.y -= 0.002;

    renderer.render( scene, camera );

   }
</script>

leer articulo ➨

Texto intermitente que cambia de color como un neon

5 comentaron

Combinando Javascript y CSS3 para cambiar y editar los colores, aplicando text-shadow para crear el brillo, podemos crear textos que se 'apagan' y se encienden como los neones luminosos. Se le pueden dar muchas utilidades a esta tecnica, como por ejemplo aplicandoselo al titulo del blog. Aqui teneis tres ejemplos, aunque se pueden combinar los colores a vuestro gusto:

color azul neon
de color rojo
verde luminoso

Cuando quieras poner un texto con este efecto, tan solo tienes que copiar y pegar el siguiente codigo alli donde quieras mostrarlo. Donde esta indicado en color rojo escribe las palabras que desees. Tambien puedes modificar algunos parametros como el color de la fuente, del luminoso y su tamaño donde esta indicado en color azul.

ver codigo

leer articulo ➨

Lluvia en tu blog

4 comentaron

Si en invierno y navidades a much@s les da por poner nieve cayendo en su blog o web... ¿Porque no poner lluvia? La verdad es que es relativamente facil de conseguir este efecto. Para ello necesitamos un poco de Javascript, le añadimos un toque de CSS3 y ¡voila!, ya tenemos nuestra receta hecha (el codigo, quiero decir). Como podeis comprobar, funciona, mirad como esta diluviando sin parar en este mismo blog. Mientras cojo el paraguas, os cuento como podeis añadir esta animacion en vuestra pagina. Teneis que dirigiros a la plantilla, buscad la etiqueta <body> y justo debajo pegais el siguiente codigo y guardais los cambios. Saludos pasados por agua.

<div class="lluvia"></div><style>
.gotas {
  background:-webkit-gradient(linear,0% 0%,0% 100%, from(rgba(13,52,58,1) ), to(rgba(255,255,255,0.6))  );
  background: -moz-linear-gradient(top, rgba(13,52,58,1) 0%, rgba(255,255,255,.6) 100%);
 width:1px;height:89px;
 position: absolute;top:0px;z-index:99999;
 -webkit-animation: fall .63s linear infinite;
  -moz-animation: fall .63s linear infinite;
}
@-webkit-keyframes fall {
 to {margin-top:900px;}
}
@-moz-keyframes fall {
 to {margin-top:900px;}
}
</style><script type="text/javascript">
  //<![CDATA[
(function() {

var nbDrop = 200; 

function randRange( minNum, maxNum) {
  return (Math.floor(Math.random() * (maxNum - minNum + 1)) + minNum);
}

function createRain() {

 for( i=1;i<nbDrop;i++) {
 var dropLeft = randRange(0,980);
 var dropTop = randRange(-1000,1400);

 $('.lluvia').append('<div class="gotas" id="gotas'+i+'"></div>');
 $('#gotas'+i).css('left',dropLeft);
 $('#gotas'+i).css('top',dropTop);
 }

}

createRain();

})();
//]]>
</script>

leer articulo ➨

Confeti cayendo por el blog

1 comentó

Para una celebracion o simplemente para decoracion, os voy a contar un truquito para añadir confeti en vuestro blog. Se trata de un codigo Javascript, utilizando la etiqueta canvas (HTML5), que hace que vaya cayendo desde la cabecera hacia abajo y que ademas sigue al cursor al moverlo de lado a lado. Para que funcione correctamente, debemos añadir dicho codigo en la plantilla antes de la etiqueta </body>. Si quereis cambiar la distancia desde que cae hasta que desaparece el confeti, modificad los numeros que estan en color verde, a mas tanto por ciento mas distancia y viceversa.

ver demostracion

ver el codigo

<canvas style="height:20%;width:100%;position:absolute;left:0px;top:0px;z-index:99999;" id="confeti"></canvas>

<script type="text/javascript">
//<![CDATA[
(function() {

(function() {
var Confetti, PI_2, canvas, colors, confetti, context, drawCircle, i, range, resizeWindow, xpos;

canvas = document.getElementById("confeti");

context = canvas.getContext("2d");

window.w = window.innerWidth;

window.h = window.innerHeight;

resizeWindow = function() {
    window.w = canvas.width = window.innerWidth;
    return window.h = canvas.height = window.innerHeight;
};

window.addEventListener('resize', resizeWindow, false);

window.onload = function() {
    return setTimeout(resizeWindow, 0);
};

range = function(a, b) {
    return (b - a) * Math.random() + a;
};

colors = [[85, 71, 106], [174, 61, 99], [219, 56, 83], [244, 92, 68], [248, 182, 70]];

PI_2 = 2 * Math.PI;

drawCircle = function(x, y, r, style) {
    context.beginPath();
    context.arc(x, y, r, 0, PI_2, false);
    context.fillStyle = style;
    return context.fill();
};

xpos = 0.5;

document.onmousemove = function(e) {
    return xpos = e.pageX / w;
};

window.requestAnimationFrame = (function() {
    return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(callback) {
      return window.setTimeout(callback, 1000 / 60);
    };
})();

Confetti = (function() {

    function Confetti() {
      this.style = colors[~~range(0, 5)];
      this.rgb = "rgba(" + this.style[0] + "," + this.style[1] + "," + this.style[2];
      this.r = ~~range(2, 6);
      this.replace();
    }

    Confetti.prototype.replace = function() {
      this.opacity = 0;
      this.dop = 0.03 * range(1, 5);
      this.x = range(-2 * this.r, w - 2 * this.r);
      this.y = range(-2 * this.r, h - 2 * this.r);
      this.xmax = w - this.r;
      this.ymax = h - this.r;
      this.vx = 2 * Math.random() + 10 * xpos - 6;
      return this.vy = this.r + range(-1, 1);
    };

    Confetti.prototype.draw = function() {
      var _ref;
      this.x += this.vx;
      this.y += this.vy;
      this.opacity += this.dop;
      if (this.opacity > 1) {
        this.opacity = 1;
        this.dop *= -1;
      }
      if (this.opacity < 0 || this.y > this.ymax || !((0 < (_ref = this.x) && _ref < this.xmax))) {
        this.replace();
      }
      return drawCircle(~~this.x, ~~this.y, this.r, "" + this.rgb + "," + this.opacity + ")");
    };

    return Confetti;

})();

confetti = (function() {
    var _results;
    _results = [];
    for (i = 1; i <= 300; i++) {
      _results.push(new Confetti);
    }
    return _results;
})();

window.step = function() {
    var c, _i, _len, _results;
    requestAnimationFrame(step);
    context.clearRect(0, 0, w, h);
    _results = [];
    for (_i = 0, _len = confetti.length; _i < _len; _i++) {
      c = confetti[_i];
      _results.push(c.draw());
    }
    return _results;
};

step();

}).call(this);

})();
//]]>
</script>

leer articulo ➨

Presentacion de imagenes apiladas

1 comentó

Cuando queremos mostrar una galeria de imagenes en nuestro blog, pienso que la manera estetica de hacerla es fundamental. Si es original y encima tiene animaciones como esta, no te digo 'na'. Utilizando el CSS3 y el Javascript se consigue esta presentacion con las imagenes apiladas-desordenadas que al hacer click sobre ellas, estas van pasando como si lo hicieramos con la mano.

Si quieres ponerla en tu blog o web, primero copia este codigo y pegalo en tu plantilla antes de </head>.

Ver/Ocultar Codigo

Ahora, cada vez que queramos mostrar esta presentacion, agregamos el siguiente codigo, añadiendo las urls de las imagenes.

leer articulo ➨

Cronometro digital usando Javascript y CSS

1 comentó

En otro articulo ya os mostre un cronometro grande muy chulo creado con CSS3 integramente. El que os enseño hoy tiene un diseño mas minimalista, pero elegante y a la par efectivo a la vez, pardiez. Tambien esta realizado con CSS3, que es el que provoca las animaciones, aparte del diseño visual. Es verdad que utiliza un poco de Javascript para simplificar el codigo, pero de eso ya os hablare en otra entrada. Sus funciones basicas mediante botones son: Start, Stop y Reset, como todo buen cronometro que se precie. Si quereis ponerlo en vuestra pagina, mas abajo teneis el codigo completito.

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6

0 1 2 3 4 5 6 7 8 9

0 1 2 3 4 5 6

0 1 2 3 4 5 6 7 8 9

Start Stop Reset

Ver/Ocultar Codigo

<center><div class="container">
<input id="start" name="controls" type="radio" />
<input id="stop" name="controls" type="radio" />
<input id="reset" name="controls" type="radio" />
<div class="timer">
<div class="cell">
   <div class="numbers tenhour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
   <div class="numbers hour moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
   <div class="numbers tenminute movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
   <div class="numbers minute moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
   <div class="numbers tensecond movesix">0 1 2 3 4 5 6</div>
</div>
<div class="cell">
   <div class="numbers second moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell divider"><div class="numbers">:</div></div>
<div class="cell">
   <div class="numbers milisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
   <div class="numbers tenmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
<div class="cell">
   <div class="numbers hundredmilisecond moveten">0 1 2 3 4 5 6 7 8 9</div>
</div>
</div>
<div id="timer_controls">
<label for="start">Start</label>
<label for="stop">Stop</label>
<label for="reset">Reset</label>
</div>
</div></center>

<script src="http://hostredeando.ucoz.es/js/prefixfree.js" type="text/javascript"></script>

<style>
.container {
padding: 20px;width: 400px;
text-align: center;
}

.timer {
padding: 10px;
background: #000000;
overflow: hidden;
display: inline-block;
border: 7px solid #efefef;
border-radius: 5px;
position: relative;
box-shadow:
0 -2px 10px 1px rgba(0, 0, 0, 0.75),
0 5px 20px -10px rgba(0, 0, 0, 1);

}

.cell {
width: 0.60em;
height: 40px;
font-size: 50px;
overflow: hidden;
position: relative;
float: left;
}

.numbers {
width: 0.6em;
line-height: 40px;
font-family: digital, arial, verdana;
text-align: center;
color: #fff;

position: absolute;
top: 0;
left: 0;

text-shadow: 0 0 5px rgba(255, 255, 255, 1);
}

#timer_controls {
margin-top: 5px;
}
#timer_controls label {
box-shadow:
0 -2px 10px 1px rgba(0, 0, 0, 0.75),
0 5px 20px -10px rgba(0, 0, 0, 1);

cursor: pointer;
padding: 5px 10px;
background: #efefef;
font-family: arial, verdana, tahoma;
font-size: 11px;
border-radius: 0 0 3px 3px;border:1px solid #989293;
}
input[name="controls"] {display: none;}

#stop:checked~.timer .numbers {animation-play-state: paused;}
#start:checked~.timer .numbers {animation-play-state: running;}
#reset:checked~.timer .numbers {animation: none;}

.moveten {
/*The digits move but dont look good. We will use steps now
10 digits = 10 steps. You can now see the digits swapping instead of
moving pixel-by-pixel*/
animation: moveten 1s steps(10, end) infinite;
/*By default animation should be paused*/
animation-play-state: paused;
}
.movesix {
animation: movesix 1s steps(6, end) infinite;
animation-play-state: paused;
}

.second {animation-duration: 10s;}
.tensecond {animation-duration: 60s;} /*60 times .second*/

.milisecond {animation-duration: 1s;} /*1/10th of .second*/
.tenmilisecond {animation-duration: 0.1s;}
.hundredmilisecond {animation-duration: 0.01s;}

.minute {animation-duration: 600s;} /*60 times .second*/
.tenminute {animation-duration: 3600s;} /*60 times .minute*/

.hour {animation-duration: 36000s;} /*60 times .minute*/
.tenhour {animation-duration: 360000s;} /*10 times .hour*/

@keyframes moveten {
0% {top: 0;}
100% {top: -400px;}
/*height = 40. digits = 10. hence -400 to move it completely to the top*/
}

@keyframes movesix {
0% {top: 0;}
100% {top: -240px;}
/*height = 40. digits = 6. hence -240 to move it completely to the top*/
}

@font-face {
font-family: 'digital';
src: url('http://thecodeplayer.com/uploads/fonts/DS-DIGI.TTF');

</style>

leer articulo ➨

Pluma animada que escribe lo que tu le pongas (con Javascript)

8 comentaron

¿Os gustan los efectos con Javascript? ¿Si? Pues este que estais viendo y leyendo seguro que os atrae.
Aplicando un script, 2 imagenes y un toque de CSS, conseguireis esta animacion para ponerla en vuestro blog o web.
Todo lo que escribais ira apareciendo poco a poco en vuestra pagina como si lo estuvierais escribiendo a mano con una pluma antigua.
Como podreis apreciar, la pluma poco a poco se va quedando sin tinta, cuando esto pasa, ella misma se moja en el tintero y vuelve a escribir con el trazo mas nitido.
Para poner este magnifico efecto de escritura, teneis que copiar el Codigo 1 y añadirlo en la plantilla de vuestro blog antes de </head> y guardar.
Una vez hecho esto, agregais el Codigo 2 alli donde querais mostrar este efecto, sustituyendo lo que esta en rojo por el texto querais poner.
¡Facilisimo!

CODIGO 1

CODIGO 2

<div id="escritura_src">
Escribe aqui el texto que quieras
</div>

<div id="escritura"></div>
<img alt="tintero" id="tintero" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjn8j47LK2sIfxsAQrjBnIuZ8W1p6IKPwCcVs2GifTL3t6QEIAQwo2Loa5Ycf8i21HTqeGk3gIwSFt6smK-ueSOXluZX6zm3Wc7ZHzxW3l7wVO2WBPfIJogM8ZJdHlIx1Ulc_th73jfvXw/s184/tintero2.gif" />

leer articulo ➨