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

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_xYkR-d1_eLbYkKjJLS6oz1GBQkFSalbbe8PTuSGLZ6PWgIERzot9pkXJKV5nPIZCFkkis_iOc1N7sa41kDsweeIUDZ7dLjQ5Zgyvub7hUCTblVhpVJRtJXRasBltE6DVdIUrHFldBns/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3AgEDugGbgQHVHBtT3W3bzu_VAqcfjTEwria1aCXcfMZhC_pgYM9EAWVLfbrqGGUmnA_dprysiBynrvdOuGbDg1Wbw_jDLKHZ96Haq2RgkkzvEuPVRh6anzZPH51CSLsJN_8bxiy-fHo/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!