Pubblicato il 22/08/12e aggiornato il

Peeling Effect o Effetto Page Flip per Blogger.

Effetto Page Flip per siti su piattaforma Blogger. Viene visualizzata una immagine che si sfoglia al passaggio del mouse con link a piacere.
Dopo una decina di minuti di ricerche su Google non sono riuscito a trovare di chi sia paternità di questo effetto molto simile al PageEar ma più semplice anche se di minor impatto estetico. Anche il suo nome è dubbio visto che il Page Flip, così si dovrebbe chiamare, è un effetto piuttosto complesso con versione gratuita e a pagamento che mostra i vari oggetti come se fossero delle pagine di un libro che si sfoglia.

Per abuso di linguaggio chiamiamo Page Flip anche la personalizzazione per Blogger che vado a presentare. Dopo la sua installazione verrà a visualizzarsi una piccola finestra in alto a destra del layout. Se ci si passa sopra con il mouse si visualizzerà invece una immagine più grande con l'impressione di aver sfogliato una pagina. Ho postato in rete una dimostrazione del Page Flip

 

L'Effetto Page Flip sfrutta l'ultima versione di JQuery ed è facilmente personalizzabile riguardo alla immagine e al link da mostrare al navigatore che passerà con il mouse sopra all'immagine

page-flip-effetto

Per l'installazione, dopo aver salvato il template per ragioni di sicurezza, si va su Modello > Modifica HTML > Procedi e si cerca la riga </head> . Subito sopra si incolla questo codice

<!-- Effetto Page Flip Inizio -->
<style type='text/css'>
img { behavior: url(iepngfix.htc) }
#pageflip {
position: relative;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 9999;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .msg_block {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;
background: url(https://lh3.googleusercontent.com/-x6amtc-2y2s/UDSkKDQ-zRI/AAAAAAAAZ2k/87t2iW0M4wQ/s308/pageflip.png) no-repeat right top;
}
</style>
<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .msg_block").stop()
.animate({
width: '307px',
height: '319px'
}, 500);
} , function() {
$("#pageflip img").stop()
.animate({
width: '50px',
height: '52px'
}, 220);
$(".msg_block").stop()
.animate({
width: '50px',
height: '50px'
}, 200);
});
});
//]]>
</script>
<!-- Effetto Page Flip Fine -->

Successivamente, stavolta subito sotto sempre alla riga </head> , si incolla quest'altro codice

<div id='pageflip'>
<a href='http://feeds.feedburner.com/ideepercomputeredinternet/zUQN'  target='_blank'><img alt='' src='https://lh3.googleusercontent.com/-bjU87K79NJE/UDSk204XUwI/AAAAAAAAZ2s/88xiwzcrTEo/s319/page_flip-background.png'/></a>
<div class='msg_block'/>
</div>

Si salva il modello e si visualizza il risultato aprendo il blog. Se nel vostro template avete JQuery già installata fate a meno di incollare la riga colorata di blu. L'URL di background è l'immagine che volete mostrare quando si passa sopra con il mouse. Si tratta di una immagine di poco più di 300 pixel per altezza e larghezza e tali dimensioni possono essere in qualche misura personalizzate come lo possono essere anche quelle della immagine nera di sfondo il cui URL è colorato di viola.

Il Page Flip può essere collegato a qualsiasi pagina. In questa demo ho inserito l'URL dei feed preso da FeedBurner che è colorato di blu. Il tag  target='_blank' colorato di verde serve per aprire il link in un'altra scheda del browser e può anche essere eliminato. I più bravi possono anche provare a configurare la velocità di apertura e di chiusura del Page Flip modificando i valori numerici in rosso. Incredibile a dirsi ma l'Effetto Page Flip funziona anche con Internet Explorer!




6 commenti :

  1. Egregio Ernesto,
    innanzitutto complimenti per il tuo blog, è molto utile.
    Relativamente all'effetto page flip sopra descritto, sul mio blog di prova - così come sul tuo - purtroppo provoca un fastidioso effetto tremolante. Malgrado qualche smanettamento, non riesco a ovviare al problema: sapresti indicarmi una soluzione?
    grazie in anticipo. :)

    mini nuni

    RispondiElimina
  2. @mininuni
    Come puoi leggere nella scritta di colore verde sopra al modulo dei commenti vengono eliminati quelli che contengano link attivi. Visto che mi pare sia il tuo primo commento su questo sito per questa volta lo lascio stare ma ti prego di non insistere a mettere link perché, visto che non ho il tempo di controllarli, sono costretto a cancellare i commenti. E non posso neppure fare eccezioni perché altrimenti sarei inondato di spam. Inoltre gli eventuali benefici di questo comportamento sono tutti da dimostrare.

    L'effetto tremolante è purtroppo tipico di questo effetto e dipende dai modelli utilizzati. Alternativamente si può installare l'effetto PageEar
    http://www.ideepercomputeredinternet.com/2012/04/pageear-o-effetto-sfoglia-pagina-per.html
    che è più stabile.

    RispondiElimina
  3. ciao ho fatto tutto come da te indicato ma l'immagine sottostante che dovrebbe comparire al passaggio del mouse non si vede e si vede solo lo sfondo. Non capisco perché io l'ho caricata da imageshack.

    RispondiElimina
    Risposte
    1. @# Se hai un blog di Blogger prova a usare Picasa e ricordati di caricarla in un album pubblico

      Elimina
  4. niente nemmeno con picasa. grazie comunque.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti. Se ti ho aiutato con il post o con le risposte ai commenti condividi su Facebook o su Twitter. Grazie.