23
Jul

Pagepeel: visualizzarlo correttamente con altre animazioni Flash

1

Eccomi di nuovo a parlare dell’effetto Page Peel. Pensavate fosse finita?
Nemoprincess aveva gia’ introdotto l’argomento, io l’ho integrato con quest’articolo e ora non rimane altro che concludiamo in bellezza.

In questa sede, discuteremo come visualizzare correttamente l’effetto in presenza di un’altra animazione in flash. Infatti, se nella pagina web sono presenti altri .swf oltre allo script Page Peel, quest’ultimo comparira’ sotto le altre animazioni in flash.

Tra i numerosi commenti, si era supposto che il problema fosse causato dalla mancanza dello z-index (proprieta’ presente nei CSS, che controlla quali elementi sono disposti “sopra” o “sotto” rispetto alla profondità dello schermo).
Riflettendoci un po’, ho capito che il problema poteva essere risolto aggiungendo il parametro “wmode” nel secondo file .swf, lasciando stare lo script.

La procedura da seguire e’ molto semplice:

  • Per chi usa DreamWeaver come me, lo script “AC_RunActiveContent.js” verra’ generato ed inserito automaticamente nella pagina web:

  • Stessa cosa per l’animazione in flash:






  • Ora dobbiamo inserire il tag “wmode” col parametro “opaque” all’interno di “AC_FL_RunContent“:

... ality','high','wmode','opaque','pluginspage','htt ...

  • Fatto? Bene, perche’ poi si deve aggiungere, sotto agli altri parametri gia’ presenti:


Esempio:
......

  • Ed infine aggiungere in EMBED:

... wmode="opaque" ...

  • Ecco il codice modificato completamente:






Salviamo tutto, carichiamo i file nel server ftp e godiamoci l’effetto fixato.

Web Design

16
Jul

Effetto Page Peel bloccato da AdBlock Plus: come risolvere

0

AdivorPeel, il famoso script gratuito che permette di arricciare l’angolo superiore di una pagina web, e’ veramente uno strumento utile e molto valido. Lo script, come ormai molti di voi sapranno, è scaricabile gratuitamente da Avidorblog.com oppure in alternativa dal mirror postato da nemoprincess in questa pagina.

In questo periodo, ho testato molti script simili e, a mio parere, AdivorPeel -grazie alla fluidità data dall’animazione in Flash- rimane il più semplice ed elegante effetto “page peel” della categoria.

Utilizzando Mozilla Firefox, ho riscontrato un “problemino tecnico” causato dall’estensione Adblock Plus. L’estensione, essendo molto invasiva, filtra la maggior parte di banner e testi pubblicitari. Purtroppo blocca perfino il nostro scriptino.

Una soluzione banale sarebbe disabilitare l’estensione incriminata, ma non la ritengo valida a causa dell’enorme quantita’ di banner e pubblicita’ che imperversa nel web e che, sinceramente, mal digerisco. Quindi, come ho risolto il problema?

Navigando per la rete ho trovato uno script molto simile (d’ora in poi chiameremo jaaspeel) che utilizza la medesima animazione di AdivorPeel, mentre il codice nel file .js e’ leggermente diverso.

Scarichiamo da questo mirror il pacchetto contenente la cartella “peel” con seguenti file:

  • large.swf
  • large.jpg
  • small.swf
  • small.jpg
  • peel.js

Ora non ci resta che editare il file “peel.js” modificando i seguenti campi con i nostri dati:

  1. jaaspeel.ad_url – URL della nostra pagina pubblicitaria
  2. jaaspeel.small_path – percorso del file small.swf
  3. jaaspeel.small_image – percorso del file small.jpg
  4. jaaspeel.big_path – percorso del file large.swf
  5. jaaspeel.big_image – percorso del file large.jpg

ad esempio:

  1. jaaspeel.ad_url = escape(‘http://www.miosito.com’);
  2. jaaspeel.small_path = ‘http://www.miosito.com/peel/small.swf’;
  3. jaaspeel.small_image = escape(‘http://www.miosito.com/peel/small.jpg’);
  4. jaaspeel.big_path = ‘http://www.miosito.com/peel/large.swf’;
  5. jaaspeel.big_image = escape(‘http://www.miosito.com/peel/large.jpg’);

Una volta modificato il file, editato le immagini ed inserito il seguentecodice javascript:

Web Design

15
Jun

Effetto Page Peel con jQuery e Css

2

Ormai diffusissimo, l’ effetto Page Peel è effettivamente molto utile per sfruttare poco spazio ma avere un’ ottima visibilità.

Quasi sempre lo si vede in flash, ma oggi vi presento la versione jQuery + Css.

Il tutto funziona con IE7, io l’ ho testato su Firefox , Chrome e Opera, versioni varie, e non dà nessun tipo di problema.

Qui potete scaricare tutto il codice.

Effetto Page Peel

L’ installazione è molto semplice:

  • Bisogna scaricare le librerie jQuery e jQuery UI
  • Creiamo poi una cartella che chiamaremo ad esempio turn
  • Inseriamo nella nostra pagina il codice


  • Aggiungiamo l’ immagine che resterà sempre almeno parzialmente visibile

  • Infine la funzione che genera l’ effetto, inserendo prima di il codice


Lo script può essere facilmente personalizzabile, modificando il codice:

// Default awesomeness
var defaults = {
directory: 'turn', // La directory che contiene le librerie
javascript
side: 'left', // destra o sinistra
turnImage: 'fold.png', // l' immagine a forma di triangolo
maxHeight: 400, // La massima altezza
startingWidth: 80, // Larghezza iniziale
startingHeight: 80, // Altezza iniziale (these should probably
be camelCase, d'oh.)
autoCurl: false // Movimento automatico o manuale
};

Plugin, Web Design

3
Feb

Effetto Page Peel – Come arricciare la pagina

32

Ho installato anch’ io questo script tanto carino e anche molto utile… AdivorPeel, per arricciare la pagina nascondendo l’ angolo con pubblicità o altro link.

Questo il link per il download. La password è adivorblog.

Per installarlo su wordpress, aprite il file PagePeel,js, alla riga 5 trovate

pagepeel.ad_url = escape('http://www.miosito.it'); // Link Address when ad is clicked on

sostituite a www.miosito.it l’ indirizzo a cui volete far linkare la pagina sottostante.

Modificate le immagini che trovate nella cartella images a vostro piacimento e caricate tutta la cartella pagepeel nelle directory principale del vostro blog (Attenzione: non nella cartella del template)

Poi inserire nel file header.php del vostro tema dopo il tag body. Dove in src=”…..” va inserito il percorso esatto dello script.

E questo è tutto per avere questo bello effetto.

Io l’ ho installato su WordPress ma ovviamente funziona con qualsiasi pagina.

.

Web Design, Wordpress