Come creare un effetto pagepeel, angolo della pagina piegevole.

Effetto pagepeeel o angolo che si apre viene utilizzato per mostrare gli annunci, attirare attenzione di visitatori  con lo scopo che esso cliccano  su pubblicita  e quindi arrivano alla pagina di destinazione.

Vediamo alcuni soluzione per la creazione di questo effetto sulla nostra pagina

1.Netoops Page Peel

Vediamo il primo esempio come quello qui sulla destra e puoi anche  provare il suo funzionamento. Per me e la soluzione piu faccile fra quelli presenti perche è bassata su css3 e jQuery. Ed è facilmente gestibile.

ioeweb.it

Vediamo come posiamo realizzarlo.

Prima di tutto dobiamo colegare la libreria jQuery direi di usare una versione remota se non avete una gia instalata sul vostro sito

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script> 

Dopo di che dobiamo crere il nostro angolo e decorarlo tramite gli stili CSS

La nostra struttura  html del angolo

<div id='pageflip'>
<a href='indirizzo della pagina di destinazione '><img alt='angolo piegabile' src='page_flip.png'/></a>
<div class='back-img'/>
</div>

E gli stili CSS

<style type='text/css'>
#pageflip {
position: absolute;
right: 0; top: 0;
float: right;
}
#pageflip img {
width: 50px; height: 52px;
z-index: 99;
position: absolute;
right: 0; top: 0;
-ms-interpolation-mode: bicubic;
}
#pageflip .back-img {
width: 50px; height: 50px;
overflow: hidden;
position: absolute;
right: 0; top: 0;z-index:98;
background: url(la nostra immagine nascosta licabile ) no-repeat right top #fff;
}
</style>

e puoi il nostro script che gestisce l'effetto del angolo piegevole

<script type='text/javascript'>
$(document).ready(function(){
//Page Flip on hover
$("#pageflip").hover(function() {
$("#pageflip img , .back-img").stop()
    .animate({
    width: '307px',
    height: '319px'
    }, 500);
    } , function() {
    $("#pageflip img").stop()
    .animate({
    width: '50px',
    height: '52px'
    }, 220);
$(".back-img").stop()
    .animate({
    width: '50px',
    height: '50px'
    }, 200);
});
});
$(document).ready(function(){
 $("img").lazyload({
     effect       : "fadeIn"
 });
});
</script>

 

Ci servirà anche una immagine del angolo ch eviene mostrato che gioca ruolo importante nel nostro effetto io vi propongo la mia o potete fare una propria versione .

page flip

2. jQuery Peelback Ad

Altra soluzione del nostro effetto del angolo piegevole.

Anche qui utilizeremo la libreria jQuery e un plugin js che si chiama jquery.peelback.js che potrete scaricare sotto l'articolo.

Vediamo come funziona e il codice. Prima di tutto dobiamo collegare la librerira jQuery come abbiamo fatto nel esempio precedente  

<script src='http://code.jquery.com/jquery-latest.js' type='text/javascript'></script> 

E dopo il nostro jscript- jquery.peelback.js

<script src="/jquery.peelback.js"></script>  

e puoi un altro script che gestira la nostra animazione
<script>
    $(function(){
      $('body').peelback({//posiamo creare un semplice div e aplicare l'effeto ad esso come ho fatto io nel esempio sopra e non atag body. 
        adImage  : 'peel-ad.png',//immagine nascosta dietro angolo dobiamo indicare percorso della cartella continente la immagine 
        peelImage  : 'peel-image.png',// immagine del angolo percorso idem.
        clickURL : 'http://www.ioeweb,it/',//vostro indirizzo di destinazione
        
        autoAnimate: true
      });
    });
  </script>  

 

Anche qui hai sempre la possibilità di cambiare il codice jscript per quanto riguarda la larghezza e altezza del angolo nonché immagini del angolo e di quella nascosta che conterrà la tua pubblicità

Qui sotto come allegato da scaricare troverai i fail js con delle immagini e 2 fail html con esempi e guardando il loro codice potrai inserire leffeto sulla tua pagina del tuo sito. 

Letto 544 volte