JMiur [E]

Que nadie se crea que esto tiene alguna utilidad práctica inmediata, es para pasar el rato, un experimento que usa jQuery y que no tiene mayores pretensiones. Creado por kelvinluck.com/.

¿Será que todo tiene que tener alguna utiidad?


<style>
  /* este es el formulario superior */
  #boing-container { text-align: center; }
  #boing-container input {
    background: #000;
    border: 2px solid #444;
    border-radius: 4px;
    color: #CCC;
    padding: 5px;
  }
  #boing-container input[type=text] {
    text-align: center;
    width: 400px;
  }
  #boing-container input[type=submit]{
    background-image: -moz-linear-gradient(#888, #222);
    background-image: -webkit-linear-gradient(#888, #222);
    background-image: -o-linear-gradient(#888, #222);
    background-image: -ms-linear-gradient(#888, #222);
    background-image: linear-gradient(#888, #222);
    cursor: pointer;
    width: 80px;
  }
  #boing-container input[type=submit].loading{visibility:hidden;}
  .error{
    color: #F00;
    font-style: italic;
    margin: 5px 0;
  }
  /* este es el contenedor con la imagen y el efecto */
  #picHolder{
    height: 200px;
    margin: 50px auto;
    position: relative;
    width: 200px;
  }
  .block {position: absolute;}
  .default { /* los cuadraditos iniciales */
    border: 1px solid #FFF;
    height: 18px;
    width: 18px;
  }
</style>

<script>
  // recordar que se debe tener jQuery cargado */
  // boingPic.js - a javascript experiment by Kelvin Luck - http://www.kelvinluck.com/
  $(function(){
      var divs;
      var $picHolder = $('#picHolder');
      function initGrid(w, h, backgroundImage){
        $picHolder.empty();
        $picHolder.css({'width' : w,'height' : h});
        w /= 10; h /= 10;
        divs = [];
        for (var i=0; i<10; i++) {
          var t = i * h; var l = 0;
          for (var j=0; j<10; j++){
            var css = {top:t, left:l};
            if (backgroundImage){
              css.background = 'url(' + backgroundImage + ') no-repeat -' + l + 'px -' + t + 'px';
              css.width = w; css.height = h;
            }
            var d = $('<div class="' + (backgroundImage ? '' : 'default ') + 'block" />').css(css);
            d.data('t', t); d.data('l', l);
            divs.push(d);
            $picHolder.append(d);
            l+=w;
          }
        }
      }
      initGrid(200, 200);
      var mouseX = 1000; var mouseY = 1000;
      $(document).bind(
        'mousemove',
        function(e){
          var po = $picHolder.offset();
          mouseX = e.pageX - po.left; mouseY = e.pageY - po.top;
        }
      );
      var force = 1500;
      setInterval(
        function(){
          var po = $picHolder.offset();
          for (var i=0; i<divs.length; i++) {
            var $d = divs[i];
            var o = $d.offset();
            var x = o.left - po.left; var y = o.top - po.top;
            var xDif = mouseX - x; var yDif = mouseY - y;
            var distance = Math.sqrt(xDif*xDif+yDif*yDif);
            var tempX = x - (force/distance)*(xDif/distance); var tempY = y - (force/distance)*(yDif/distance);
            $d.css('left', ($d.data('l') - x)/2+tempX); $d.css('top', ($d.data('t') - y)/2+tempY);
          }
        },
        100
      );
      $imageUrl = $('#imageUrl');
      $imageUrl.bind(
        'focus',
        function(e){if ($imageUrl.val() == 'direccion url de una imagen y click en cargar ...') {$imageUrl.val('');}}
      ).bind(
        'blur',
        function(e){if ($imageUrl.val() == '') {$imageUrl.val('direccion url de una imagen y click en cargar ...');}}
      );
      var $submitButton = $('#loadImage');
      $submitButton.bind(
        'click',
        function(e){
          $submitButton.addClass('loading');
          var i = new Image();
          $(i).bind(
            'load',
            function(e){
              $submitButton.removeClass('loading');
              var w = i.width; var h = i.height;
              initGrid(w, h, $imageUrl.val());
            }
          ).bind(
            'error',
            function(){
              $submitButton.removeClass('loading');
              var $errorMessage = $('<div class="error">la URL de la imagen no es valida</div>');
              $submitButton.after($errorMessage);
              $errorMessage.hide().slideDown('normal').animate(
                  {'opacity': .9}, 2000
                ).slideUp(
                  'normal', function(){$errorMessage.remove();}
                );
              initGrid(20, 20);
            }
          );
          i.src = $imageUrl.val() || 'theresnoimagebythatname!';
          return false;
        }
      );
    }
  );
</script>

<div id="boing-container">
<form>
<input type="text" id="imageUrl" value="direccion url de una imagen y click en cargar ..." />
<input type="submit" id="loadImage" value="cargar" />
</form>
</div>

<div id="picHolder"></div>

25 comentarios:

Analía Alvado  

Ahhhhhhhhh, me encantóoooooooo!!!
Ya tengo algo nuevo para jugar.
Gracias, JMiur :-)

Responder
Alejandro  

MUY divertido! está genial :D

Responder
Enrique Carlos Ameijeiras  

Está muy bueno, por favor encontrémosle una utilidad urgente, jaja

Responder
Enrique Carlos Ameijeiras  

Una idea: Ponga la foto del protagonista de esta noticia (Noticia ampulosa) e imprima esta pantalla y enviésela a un amigo. jaja, salvaremos al mundo con esta idea...

Responder
m.p.moreno  

¡Divertido!
JMiur, gracias por toda la información que nos has ido mandando a lo largo de este año.

Que pases unas muy felices fiestas y que en el nuevo 2013 logres todas tus ilusiones y esperanzas.

Un abrazo navideño. Pilar

Responder
Gem@  

Ohhhh es grato ver esto el día después del fin del mundo :D :D

Responder
Beben Koben  

that's one cool
it's cooler master
www.is-real.net/experiments/css3/wonder-webkit/
i have try for mozilla support, and awesome :D

Responder
Peter  

Muy divertida la imagen, siempre traes algo interesante y divertido

Responder
Anahí  

Yo ya le encontré una utilidad: poner la imagen de algún personajes desagradable... pa´ descargarme simbólicamente nomás xD

Vengo a desearle felices fiestas J.Miur.
Y a sus lectores.
Abzo.

Responder
Rosendo Ramírez Aquino  

Esta divertido!

Responder
♥ Ana  

No se si tiene utilidad pero está genial

JMiur, pasaba por aquí a desearte unas felices fiestas y que, el año próximo, venga cargado de felicidad para ti y los tuyos
Un abrazo y espero seguir contando con tus ayudas en el futuro jejeje

JMiur  

Gracias, Ana. Lo mismo te deseo :-)

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Es muy interesante!!! Siempre innovando.
Mis mejores deseos para Vagabundia y todas las personas que día a día echan un vistazo a estos estupendos posts.
Para ti J.Miur muchas gracias...por la eficiencia,eficacia y efectividad de tu trabajo,gracias también por ese trato "delicatessen" que nos brindas. ¡¡¡SALUD y Feliz 2013!!!

JMiur  

Muchas gracias. Feliz Navidad :D

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Por cierto,por supuesto que tiene una "utilidad práctica inmediata" si ponemos esta URL de imagen: http://4.bp.blogspot.com/-p8jzU9ZZD1s/UNeO74qXlMI/AAAAAAAAA5s/EsYYZHPL4gw/s320/2012.jpg
¿ Verdad ?

JMiur  

¿Por que no? Todo es cosa de imaginación :D

Responder
Señor Web  

Saludos a todos, y muy feliz 2013 a todos...

un cordial saludo
posicionamiento web

Responder
Alundra  

Hola JMiur,

Perdón por la ignorancia pero... esto se puede poner para que se vea así una foto en una entrada? o sólo sirve para otros elementos en la página?

Y otra cosa más... donde dice "direccion url de una imagen y click en cargar"... no entiendo lo de click en cargar... jeje sorry... ;)

Gracias de nuevo y felices fiestas.
Saludetes.

Responder
Alundra  

Ah vale!! ya entendí lo de cargar, jaja lo siento de nuevo!!

La pregunta entonces es solo si puedo poner una foto así en una entrada.

Saludetes.

JMiur  

Seguramente pero tendrás que ver omo funciona el script y modificarlo para conseguir eso.

Responder
ramon martinez i travessa  

Apreciado J. Miur:
Despues de mis encarecidos saludos paso a darte noticia de mis cuitas, A diferencia de casi todo el personal que me antecede, yo por más que lo he probado, no he sido capaz de reproducir tu artilugio, en mi bloc. Soy novato en esta afición y quizá no muy diestro, es por ello, que me hace falta una mano amiga que me instruya. Ya son varias las veces, que recurro a tu ayuda con éxito asegurado. Ahora pues recibe por anticipado mi reconocimiento y agradecimiento, puesto que estoy seguro que resolveras mi pequeño problema.
He trabajado en un blog de pruebas, cuya dirección te incluyo, para que puedas investigar cuales han sido mis errores.
http://primerpasdos.blogspot.com.es/
Lo dicho: gracias anticipadas y mis saludos más cordialesé
Ramon Martinez i Travessa (ramonborinotros@gmail.com)

JMiur  

Lo que se ve como erróneo es que has colocado el script dentro de <b:skin> </b:skin> y eso es el CSS de la página y no deben agregarse etiquetas en su interior, sólo, reglas de estilo.

Por eso, arriba del sitio, se ven estos caracteres } -->

ramon martinez i travessa  

Buenas JMiur.
Gracias por la aclaracion. Pero como veras no te he contestado al momento por que he querido probar de solucionarlo yo, pero no he sabido encontrar el sitio donde debo poner el script. Entiendo que he de poner todo el texto que esta entre "script" y "/script", o debo crear un archivo script con todo ese texto?. Perdona mi ignoracia en este tema, pero hay algunas cosas del html que ya las tengo por la mano, pero estos pequeños detalles con el CSS y los scripts aun me lian.
Muchas gracias por tu ayuda y perdona por las molestias.
Saludos
Ramon

JMiur  

Los sripts se colocan antes de </head> o donde se indique; en este caso, pueden ir directamente en una entrada.

Responder
Pancho Gámez  

pues yo lo usaria para alguna especie de broma "click en el cuadro para..." ninca podrian porque los cudritos huyen del cursos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR