jQuery: creare elementi con effetto fly-in

  • jQuery
  • Gabriele Romanato

L'effetto fly-in consiste in un'animazione composta da due fasi: nella prima fase l'elemento entra in assolvenza e nella seconda le sue dimensioni tornano allo stato normale dopo essere state raddoppiate. Vediamo come ottenere questo effetto con jQuery e CSS.

Con i CSS creeremo un'animazione che andrà ad operare sulle proprietà opacity e transform:


.module {

  -webkit-animation: flyin 600ms ease-in;
  -moz-animation: flyin 600ms ease-in;
  -o-animation: flyin 600ms ease-in;
  -ms-animation: flyin 600ms ease-in;
        animation: flyin 600ms ease-in;
    
}

@-webkit-keyframes flyin {
    from {
        opacity: 0;
  -webkit-transform: scale(2);
}    
   to { 
     -webkit-transform: scale(1);
     opacity: 1;
   }
}

@-moz-keyframes flyin {
    from {
        opacity: 0;
  -moz-transform: scale(2);
}    
   to { 
     -moz-transform: scale(1);
     opacity: 1;
   }
}

@-o-keyframes flyin {
    from {
        opacity: 0;
  -o-transform: scale(2);
}    
   to { 
     -o-transform: scale(1);
     opacity: 1;
   }
}

@-ms-keyframes flyin {
    from {
        opacity: 0;
  -ms-transform: scale(2);
}    
   to { 
     -ms-transform: scale(1);
     opacity: 1;
   }
}

@keyframes flyin {
    from {
        opacity: 0;
        transform: scale(2);
}    
   to { 
     transform: scale(1);
     opacity: 1;
   }
}

Con jQuery andiamo semplicemente a creare l'elemento con la classe CSS appropriata:


$(function() {

    $("#add-sidebar-module").on("click", function() {
        $("<div />", {
            'class': "module",
            text: "I'm new here."
        }).prependTo("#sidebar");
    });

    $("#add-article").on("click", function() {
        $("<div />", {
            'class': "module",
            html: "<h1>Title</h1><p>text text text.</p>"
        }).prependTo("#main");
    });
});​
Torna su