Transizione per effetti di animazione

The first most common mistake is to do all animation effects at a constant speed. For many types of effects, linear/constant speed animation looks clunky because the animation starts and stops and so abruptly. The solution is to adjust the speed of the animation based on a sinusoidal curve rather than a line so that the transition looks smoother — basically, it should start slow and end slow and speed up in the middle.

The second most common mistake is to do all animation at a constant frame rate. Given the dramatic DOM performance differences between web browsers and operating systems, an animation with a constant number of frames can take an order of magnitude longer on some users’ computers. The solution is to perform animation in a constant amount of time, adjusting the frame rate based on the performance of the user’s browser.

The Transition class below is a recipe that can handle any type of animation (linear, sinusoidal, etc) with a variable frame rate:

function Transition(curve, milliseconds, callback) {
    this.curve_ = curve;
    this.milliseconds_ = milliseconds;
    this.callback_ = callback;
    this.start_ = new Date().getTime();
    var self = this;
    this.runCallback_ = function() {
        self.run();
    };
}
Transition.prototype.run = function() {
    if (!this.hasNext()) return;
    this.callback_(this.next());
    setTimeout(this.runCallback_, 10);
}
Transition.prototype.hasNext = function() {
    if (this.done_) return this.oneLeft_;
    var now = new Date().getTime();
    if ((now - this.start_) > this.milliseconds_) {
        this.done_ = true;
        this.oneLeft_ = true;
    }
    return true;
}
Transition.prototype.next = function() {
    this.oneLeft_ = false;
    var now = new Date().getTime();
    var percentage = Math.min(1, (now - this.start_) / this.milliseconds_);
    return this.curve_(percentage);
}

The Transition class is designed to be used with a function that defines the curve/speed of the animation. Here are sinusoidal and linear examples:

 

function SineCurve(percentage) {
    return (1 - Math.cos(percentage * Math.PI)) / 2;
}
function LinearCurve(percentage) {
    return percentage;
}

You can use one of the functions with the Transition class with the following pattern:

var transition = new Transition(SineCurve, 1000, function(percentage) {
    // Move your element percentage of the way through the animation
});
transition.run();Here is a practical example that moves text diagonally across the screen at a sinuoidal speed:
var element = document.getElementById("animated");
element.style.position = "absolute";
element.style.left = "0px";
element.style.top = "0px";
var transition = new Transition(SineCurve, 1000, function(percentage) {
    var x = element.parentNode.offsetWidth - element.offsetWidth;
    var y = element.parentNode.offsetHeight - element.offsetHeight;
    element.style.left = Math.round(percentage * x) + "px";
    element.style.top = Math.round(percentage * y) + "px";
});
transition.run();

Fonte: http://ajaxcookbook.org/transitions-animation-effects/

December 17, 2006 | Filed Under ajax, javascript, tutorials | Leave a Comment 

Disabilitare il menu contestuale del browser

Puoi disabilitare il menu contestuale del browser per un elemento nel tuo DOM con il seguente script JavaScript:

function disableContextMenu(element) {
    element.oncontextmenu = function() {
        return false;
    }
}

Ad esempio se vuoi disabilitare il menu per una foto nella tua pagina potresti usare:

disableContextMenu(document.getElementById("photo"));

Fonte: http://ajaxcookbook.org/disable-browser-context-menu/

December 17, 2006 | Filed Under javascript, tutorials | Leave a Comment 

Ottenere valori generici da post con php

Per ottenere i dati via post , occorre utilizzare la seguente sintassi:

$variabile = $_POST['datoinviato'];

cosi facendo non si conoscono quali dati si stanno inviando se i dati vengono da un from generico.

per cui, come faccio ad ottenere l’elenco dei valori e dei dati contenuti in essi del post?

<?php
foreach($_POST as $key => $valore)
echo $key.’ ‘.$valore.’<br />’;
?>

December 11, 2006 | Filed Under php, tutorials | Leave a Comment 

Introduzione alla pixel art

Obiettivo
In questo articolo vedremo come sia possibile disegnare degli oggetti grazie alla pixel grafica.

Articolo
Chi non avesse mai visto un disegno fatto tramite questa tecnica deve sapere che questo modo di disegnare presuppone l’utilizzo dei pixel (singoli punti) come ingrediente del disegno.

Software
I software che possiamo utilizzare sono tantissimi, diciamo che qualsiasi software di grafica che riesca a disegnare un singolo pixel e’ buono.
Solo per citarne qualcuno:

Photoshop
Fireworks
Ms paint

Prime tecniche
Vediamo come disegnare una semplice linea

In questo caso abbiamo disegnato una linea che ha inclinazione di 30° e come si puo’ vedere e’ costituita da tanti piccoli segmenti da 2 pixel. Il fatto che sia costituita da segmenti uguali e’ molto importante per un ottima resa grafica. Un errore molto comune:

Linee
Abbiamo visto come realizzare una semplice linea con angolazione di 30°, adesso vediamo le altre angolazioni.

December 11, 2006 | Filed Under pixel art, tutorials | Leave a Comment 

Creare un semplice script php per ricercare dati nel database (parte 2)

In questo tutorial vedremo come creare un semplice script per la ricerca di dati in un database. Per continuare a leggere il tutorial occorre leggere la prima parte.

Inseriamo nello script, la stringa sql che cerca i dati nella tabella

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Creates a new connection to the mysql server.
mysql_select_db(’database’); // Connects to the database.
if(!isset($_POST['search'])){ // If the form has not been submitted.
?>
<form method="POST">
Search: <input type="text" name="term" id="term" /><br/>
<input type="submit" name="search" id="search" value="Search" />
</form>
<?php
}elseif(isset($_POST['search'])){ // ElseIf the form has been submitted.
    $term = addslashes($_POST['term']); // This is our search term, has a little sql injection protection with addslashes.
    $search = mysql_query("SELECT `title` FROM `tutorials` WHERE `title` LIKE ‘%$term%’" ); // Using the LIKE syntax we can look in a database for a best match for the input, also the % work as wild cards.
} // End ElseIf.
?>

Se la ricerca non ha prodotto risultati mostra la scritta "not found"

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Creates a new connection to the mysql server.
mysql_select_db(’database’); // Connects to the database.
if(!isset($_POST['search'])){ // If the form has not been submitted.
?>
<form method="POST">
Search: <input type="text" name="term" id="term" /><br/>
<input type="submit" name="search" id="search" value="Search" />
</form>
<?php
}elseif(isset($_POST['search'])){ // ElseIf the form has been submitted.
    $term = addslashes($_POST['term']); // This is our search term, has a little sql injection protection with addslashes.
    $search = mysql_query("SELECT `title` FROM `tutorials` WHERE `title` LIKE ‘%$term%’" ); // Using the LIKE syntax we can look in a database for a best match for the input, also the % work as wild cards.
    $total = mysql_num_rows($search); // Counts the total results found.
    if($total == 0){ // If the total is equal to 0 that means no results have been found.
        echo ‘Nothing Found ‘; // Lets the user know nothing has been found!
    }else{ // Else there is results.
    } // End Else.
} // End ElseIf.
?>

E infine lo script definitivo che mostra i risultati

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Creates a new connection to the mysql server.
mysql_select_db(’database’); // Connects to the database.
if(!isset($_POST['search'])){ // If the form has not been submitted.
?>
<form method="POST">
Search: <input type="text" name="term" id="term" /><br/>
<input type="submit" name="search" id="search" value="Search" />
</form>
<?
}elseif(isset($_POST['search'])){ // ElseIf the form has been submitted.
    $term = addslashes($_POST['term']); // This is our search term, has a little sql injection protection with addslashes.
    $search = mysql_query("SELECT `title` FROM `tutorials` WHERE `title` LIKE ‘%$term%’" ); // Using the LIKE syntax we can look in a database for a best match for the input, also the % work as wild cards.
    $total = mysql_num_rows($search); // Counts the total results found.
    if($total == 0){ // If the total is equal to 0 that means no results have been found.
        echo ‘Nothing Found ‘; // Lets the user know nothing has been found!
    }else{ // Else there is results.
        while($r = mysql_fetch_array($search)){ // This will loop through each row found and return the title of the tutorial.
            echo $r['title'] . ‘<br />’;
        } // End While.
    } // End Else.
} // End ElseIf.
?>

December 11, 2006 | Filed Under php, tutorials | Leave a Comment 

Creare un semplice script php per ricercare dati nel database (parte 1)

In questo tutorial vedremo come creare la nostra piccola applicazione php mysql per la ricerca di dati nel database.Iniziamo a creare un file chiamato search.php,abbiamo bisogno di creare una nuova connessione al database usando mysql_connect.

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Crea una nuova connessione.
mysql_select_db(’database’); // Connette al database.
?>

Avendo cura di sostituire i dati con quelli corretti.Miglioriamo lo script, verificando che la stringa inserita non sia vuota:

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Creates a new connection to the mysql server.
mysql_select_db(’database’); // Connects to the database.
if(!isset($_POST['search'])){ // If the form has not been submitted.
}elseif(isset($_POST['search'])){ // ElseIf the form has been submitted.
} // End ElseIf.
?>

Se la stringa di ricerca non è vuota, mostra i risultati , altrimenti in form di ricerca

<?
$connection = mysql_connect(’localhost’, ‘mysql_user’, ‘mysql_password’) or die(mysql_error()); // Creates a new connection to the mysql server.
mysql_select_db(’database’); // Connects to the database.
if(!isset($_POST['search'])){ // If the form has not been submitted.
?>
<form method="POST">
Search: <input type="text" name="term" id="term" /><br/>
<input type="submit" name="search" id="search" value="Search" />
</form>
<?php
}elseif(isset($_POST['search'])){ // ElseIf the form has been submitted.
} // End ElseIf.
?>

December 11, 2006 | Filed Under php, tutorials | Leave a Comment 

← Previous Page — Next Page →


Commenti recenti:


Ultimi dal forum

Selezionando contrassegno si aggiungono spese al totale
Ho inserito postepay come pagamento
Inserire metakeywords
Problemi di installazione
Scaricare correttore ortografico italiano
Vari problemi
Installazione su server remoto
Installazione
Problema aggiornamento quantità prodotti carrello
Info
Bug utente + suggerimento formattazione
Problema cancellazione dalla mailing list
Problemi login
Problemi di visualizzazione nella home page
Fireworks appiattisce livelli quando salvo in png