To create the view I used Processing.js, which is very easy and simple to work with. Here’s a screenshot of the completed application:

The application is also featured in Processing.js exhibition page and a guide (in italian) is undergoing with all the technical details about its implementation.

Here’s an example:

input:required + label:after {
  content: ' *';
  color: black;
}

By this way you are able to dynamically append the classic ‘*’ to the labels that belongs to input tags with the required flag. Obviously you have to put the label after the input tag but then you can revert this structure by using some CSS float instructions.

Here’s the running example:

I used some of the amazing CSS 3D transformations to archieve this effect under WebKit based browsers. Here’s a snippet from the page:

 
  #container{
     margin: 0 auto;
     width: 100%;
     height: 90%;
     max-width: 1024px;
     -webkit-transform-style: preserve-3d;
     -webkit-perspective: 900;
     -webkit-perspective-origin: 100% 30%;
  }

The container, which is the div that hold the rest of the elements, has some -webkit-* experimental properties that set the position and the distance of the point of view of the user from the scene, as much as it happens with 3D software.

After this each card needs to be rotated against its Y axes; here comes to rescue another CSS3 property:

  .card{
     -webkit-transform: rotateY( 120deg);
  }

Then, all you need is find a way to trigger a change of CSS properties in your .card elements while specifying a transition which handles this change smoothly. So first let’s add this transition:

  .card{
     -webkit-transition: all 1s ease-out;
  }

And then let’s use the :target pseudoclass which gets applied to an <a> element when its name became part of the URL (either because clicked or typed):

  .card:target{
    -webkit-transform: rotateY( 0deg);
  }

The trickiest part is then try to make this thing works also under Firefox which doesn’t have 3D transformations. It turns out that you can emulate them by using wisely the skew(xdeg, ydeg) transform, so you can do the following:

  .card{
     -moz-transform: skew(0deg,-35deg) scale(0.70);
  }
  .card:target{
     -moz-transform: skew(0deg,0deg) scale(1);
  }

Good, but now there’s another challenge: how to solve this ?

The elements on the right side of the selected one have two issues: they should be inclined on the opposite angle and the way they overlap each other should also be reversed.

To solve the first part we can rely on the ~ selector to tell the browser that each element following the selected one must obey to a different skew angle:

  .card:target ~ .card{
    -moz-transform: skew(0deg,20deg) scale(0.70);
  }

The only solution I found to archive the second issue is to use the + selector iteratively in order to assign a z-index to an element based on its distance from the selected one:

  .card:target + .card{
    z-index: 10;
  }

  .card:target + .card + .card{
    z-index: 9;
  }

  .card:target + .card + .card + .card {
    z-index: 8;
  }

  .card:target + .card + .card + .card + .card{
    z-index: 7;
  }

  .card:target + .card + .card + .card + .card + .card{
    z-index: 6;
  }

  .card:target + .card + .card + .card + .card + .card + .card{
    z-index: 5;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card{
    z-index: 4;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 3;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 2;
  }

  .card:target + .card + .card + .card + .card + .card + .card + .card + .card + .card + .card{
    z-index: 1;
  }

Here’s the final result:

You can have a working demo at this address:
http://sandropaganotti.com/wp-content/goodies/demos/cards/index.html#aela

To archive this result I played a bit with clear and float properties by adding them to some specific elements, here’s a sample:

The .cestello HTML structure:

<div class="cestello">
    <div>
        <a href="#arancia" onclick="PB.to('#arancia');return false;">
            <img src="img/arancia-small.png" alt="arancia">
        </a>
    </div>
    <div>
        <a href="#banana" onclick="PB.to('#banana');return false;">
            <img src="img/banana-small.png" alt="banana">
        </a>
    </div>
    <!-- other divs -->
</div>

And the corresponding CSS code:

.cestello{
  float:left;
  width: 100%;
}

@media screen and (min-width:480px) and (max-width:960px){
  .cestello div{
     width: 33%;
  }
  .cestello div:nth-of-type(3){
    clear: right;
  }
  .cestello div:nth-of-type(4){
    clear: left;
  }
}

@media screen and (max-width:480px){
  .cestello{
    float:none;
    width: 80%;
    margin-left: auto;
    margin-right: auto;
  }

  .cestello div{
     width: 50%;
  }
  .cestello div:nth-of-type(even){
    clear: right;
  }
  .cestello div:nth-of-type(odd){
    clear: left;
  }
}

Here you find the three statuses in which the ‘.cestello’ structure may be found. By using some clever CSS3 selector I’m able to inject ‘clear:right’ and ‘clear:left’ and change the aspect of the page.

To accomplish that I set-up a two-page structure: a dashboard, used to choose which files to play and to control the grid size (other controls may came next), and the mosaic page itself: in this way one page can be projected in full-screen while the other one can be viewed on the second monitor.

In the dashboard lays a drop-area where video files can be dropped, dropping one or more file cause afunction ‘caricaIlVideo’ to be called:

caricaIlVideo = function(evento){
  var files = evento.dataTransfer.files;
  for(var x=0; x < files.length; x++){
    console.log("wooo");
    worker.port.postMessage("comando-verso-mosaic:carica-video:" +
      window.webkitURL.createObjectURL(files[x]));
  }
}

The function uses Drag And Drop API and File API to recover the dropped files, then a message is sent to a SharedWebWorker for each of the dropped files containing a string like :

"comando-verso-mosaic:carica-video:blob:http://sandropaganotti.com/ecba59ec-d1cc-435c-9bd3-ba50e2bf0eab"

the blob* part is the most interesting: it contains the URL of the File dropped. The SharedWebWorker then unfold the message removing the ‘comando-verso-mosaic’ part and sends the rest to the mosaic page.

When the mosaic page receives a message like this it launch a function called ‘caricaVideo’:

caricaVideo = function(blob_url){
  var video  = document.createElement('video');
  var source = document.createElement('source');
  video.muted = true;
  video.volume = 0.0;
  video.loop  = true;
  source.src = blob_url;
  source.type= "video/webm";
  video.appendChild(source);
  document.querySelector("#videos").appendChild(video);
  video.addEventListener('canplaythrough', iniziaLaProiezione, false);
}

The function basically creates a new video element using the blob URL as a source and then attach to the element a listener for the ‘canplaythrough’ event, which occurs when the video buffer reach enough capacity to guarantee a full-play performance.

The mosaic has a looping function, called ‘aggregaVideo’ which takes care of the drawing stuff: it iterates over all the video elements created and it draws them over a canvas according with the tessellation configuration:

aggregaVideo = function(canvas_context, videoboxes){
    canvas_context.canvas.width = canvas_context.canvas.width;
    for(var i=0; i < tassello['tassellazione-y']; i++){
      for(var k=0; k < tassello['tassellazione-x']; k++){
        if(videoboxes[k + i*tassello['tassellazione-y']] != undefined){
          canvas_context.drawImage(videoboxes[k + i*tassello['tassellazione-y']],
            tassello.width * k, tassello.height * i,
            tassello.width , tassello.height
          );
        }
      }
    }
    setTimeout(function(){aggregaVideo(canvas_context,  document.querySelectorAll('#videos video'))},0);
}

Here’s a video showing the whole thing running:

The code of this project is, as usual, on my github account.

Finally you can test the video mosaic by yourself launching both the dashboard and the mosaic; be sure to have some webm video files on your computer, you can find some here: http://www.webmfiles.org/demo-files/ or you can convert some using miro video converter. Please note that everything should work, at the moment, only on Chrome 10.

Thanks!

To archive such effect I used CSS3 3d properties, in particular the ‘rotate3d‘ one; here’s the portion of html used to define the picture: three divs have been used as layers with ‘preserve3d’ and ‘translateZ’ to specify the distance between each of them:

<div style="position: absolute; top: 50%; left:50%; margin-left: -350px; margin-top: -233px;
            -webkit-perspective: 1000;" >
  <div id="picture" style="height: 466px;
          width: 699px;
          -webkit-transform-style: preserve-3d;
          background: url('flowers.png') no-repeat;
          ">
          <div style="width: 377px;
                height: 424px; background: url('body.png') no-repeat;
                position: absolute;
                -webkit-transform: translateZ(20px);
                top: 45px; left: 75px;">
          </div>
          <div style="position: absolute;
          -webkit-transform: translateZ(30px);
          bottom: 0px; right: 0px; padding-left: 30px; padding-right: 30px;
          background: rgba(0,0,0,0.6);     font-family: 'Lobster', arial, serif;
          color: #FFF; font-size: 30px; line-height: 60px; text-align:center;">
            Francy taking pictures
          </div>
  </div>
</div>

Next I wrote a small JQuery flavored Javascript to rotate the ‘layer0′ div according to mouse position; the other two divs follows the rotation of the first automatically preserving the 3D spatial relations.

$(document).ready(function() {
    $('body').mousemove(function(event) {
        cx = Math.ceil($('body').width() / 2.0);
        cy = Math.ceil($('body').height() / 2.0);
        dx = event.pageX - cx;
        dy = event.pageY - cy;

        tiltx = (dy / cy);
        tilty = - (dx / cx);
        radius = Math.sqrt(Math.pow(tiltx,2) + Math.pow(tilty,2));
        degree = (radius * 20);

        $('#picture').css('-webkit-transform','rotate3d(' + tiltx + ', ' + tilty + ', 0, ' + degree + 'deg)');
    });
});

And that’s all; you can try the demo at this link: Parallax Gallery, please note that only works on Safari; here’s a screenshot of the effect in action:

To simulate the light behavior I used a CSS3 gradient on the body background and a text-shadow property on the text. Both of these css3 attributes are then dynamically changed upon the user’s mouse move.

Here’s the snippet of the JQuery-flavored javascript I used:

$(document).ready(function() {
    $('body').mousemove(function(event) {
        $('#instructions').hide();

        // compute the center of the page and the distance between the center and the mouse
        // coordinates
        cx = Math.ceil($('body').width()  / 2);
        cy = Math.ceil($('body').height() / 2);
        dx = event.pageX - cx;
        dy = event.pageY - cy;

        // introducing a little parallax for the biggest light cone
        x0 = Math.ceil(cx - (dx * 0.2));
        y0 = Math.ceil(cy - (dy * 0.2));
        x1 = event.pageX;
        y1 = event.pageY;
        r0 = 300;
        r1 = 10;

        // another parallax for the text shadow
        sx = -dx * 0.03;
        sy = -dy * 0.03;

        // blur the shadow depending upon its distance
        b  =  (Math.abs(sx) + Math.abs(sy)) * 0.2;

        // simulate the light
        $('body').css('background-image', "-webkit-gradient(radial, " + x0 +" " + y0 +", "+ r0 +", "+ x1 +" "+ y1 +", "+ r1 +", from(#575757), to(#FFFFFF))");

        // simulate the shadow
        $('h1').css('text-shadow', "#444 "+ sx +"px "+ sy + "px " + b + "px");
    });
});

Here’s an image took from the demo, the whole page source code is available on my github account as a gist:

.

Come funziona? Bisogna istanziare un nuovo oggetto della classe GTileLayer e specificarne all’interno una funzione che, ricevuti due parametri (un oggetto GPoint e un numero indicativo del livello di zoom) sappia ritornarne l’immagine appropriata.

Nel prossimo articolo andrò un pò più nel dettaglio, per il momento vi lascio a questa proof-of-concept che potrebbe trasformarsi, a breve, nella gallery ufficiale del sito.

Effetto: zoom out e zoom in

Parte Prima, il layout:

La parte più difficile è sicuramente creare un layout al 100% liquido, per farlo ricordatevi che la percentuale espressa nel dimensionare un elemento si rapporta alla dimensione dell’elemento padre, quindi se all’interno di un contenitore di 760px ho due <div> una all’interno dell’altra ed entrambe di dimensione 50% la prima misurerà 760/2 = 380px e la seconda 380/2 = 190px.

Per quanto riguarda il testo vale quanto segue: la dimensione del font, se espressa in percentuale si rapporta alla dimensione del font del primo elemento padre espressa non in percentuale. Per fare un esempio: se nel mio box contenitore imposto font-size: 10px e all’interno di tale box utilizzo solo valori percentuali per il testo otterrò come risultato che tutto il contenuto testuale verrà rapportato a 10px secondo la percentuale specificata; quindi un font-size: 120% = 10*120/100 = 12px.

Parte Seconda, lo script:

Una volta completata la stesura del layout dovremmo trovarci con un box contenitore dimensionato con valori assoluti (sia per width che per font-size) contenente l’intero layout fluido. A questo punto modificando i valori del box contenitore otterremo una modifica proporzionale dell’intero layout.

Ma possiamo fare di più; la funzione Morph di Scriptaculo.us ci consente di creare una transizione animata tra due valori. Quindi ad esempio:

$('box').morph("width: 300px; font-size: 6px;"); - Esegui

Perfetto, quasi ci siamo, ora manca solo un modo per modificare queste due grandezze secondo un fattore di scala che le mantenga proporzionali, per fare questo è sufficiente creare un piccolo javascript:

Element.addMethods({
  magnify_string: function(element, sf) {
    dimensions = element.getDimensions();
    font_size  = ( element.getStyle('font-size') == null ? 16 : parseFloat(element.getStyle('font-size')));
    new_width  = ( dimensions.width  > 0 ? dimensions.width  : 1.0)*sf;
    new_size   = ( font_size > 0         ? font_size         : 1.0)*sf;
    return "width: " + new_width + "px; font-size: " + new_size + "px;";
  }
})

Questa funzione ritorna una stringa con altezza e font-size dell’elemento su cui è invocata modificati secondo un valore di scala da 0.0 a 1.0 (0 = 0% e 1 = 100%); tale stringa si presta benissimo quindi ad essere passata all’effetto Morph ottenendo come risultato quanto mostrato all’inizio di questo articolo; per completezza allego qui il codice dei pulsanti ‘zoom-in’ e ‘zoom-out’ presentati in precedenza:

/* Effetto zoom-out */
$('demo1').morph($('demo1').magnify_string(0.5));

/* Effetto zoom-in */
$('demo1').morph($('demo1').magnify_string(2));

Sandro Paganotti