JQuery Plugin | Tema per sito con animazione in stile FLASH

Pubblicato: novembre 8, 2011 in News, Programmazione
Tag:, , ,

La sezione BUG e MIGLIORAMENTI è qui per dargli maggiore visibilità

Allora cominciamo con le modifiche:

E stato aggiornato un BUG sulla trasparenza del DIV MASTER. Scaricate il nuovo file


Buongiorno,

oggi sono qui a presentarvi un nuovo plugin JQuery: SLIDING.

SLIDING è un plugin che vi permette di creare uno splendido effetto movimento per il vostro sito.

In pratica si è pensato di creare un vero e proprio menu grande quanto tutto la pagina(questa la mia idea) ma ovviamente lui si regola in base al suo contenitore.

Nel caso in cui il contenitore non abbia un altezza impostata, SLIDING prenderà l’altezza della finestra del browser come impostazione base.

Infatti il plugin è auto regolabile in base alle dimensioni di risoluzione.

Scaricate la demo in fondo alla pagina prima di continuare a leggere.

Per questo plugin è stata utilizzara la versione 1.7 di Jquery scaricabile dal sito stesso di Jquery 🙂 .

Allora cominciamo.

Per prima cosa aprimo la nostra bella pagina HTML/ASP/ASPX/PHP ec…….

Andiamo ad inserire all’interno dell’head in nostri file JS di jquery e quello del plugin SLIDING.

In più aggiungiamo il CSS del plugin SLIDING.

In tutto ci dovremmo trovare in questa situazione:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
  <link href="css/sliding.css" rel="stylesheet" type="text/css" />
  <script src="scripts/jquery-1.7.min.js" type="text/javascript"></script>
  <script src="scripts/sliding.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" ">

</form>
</body>
</html>

Dopo di che andiamo a inserire il codice HTML necessario al funzionamento del plugin:

<div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div class='piccoli'></div>
  <div id="master">
  </div>
</div>

Spieghiamo:ogni DIV con classe PICCOLO rappresenta l’unita cliccabile di piccole dimensioni, mentre il DIV MASTER rappresenta il contenitore del contenuto.

Bisogna guardare la DEMO per capirne bene il funzionamento e le specifiche.

Continuiamo:

Ora non resta che avviare il nostro script subito dopo il caricamento dell’intera pagina in questo modo:


<script>
$(document).ready(function () {
sliding.init();
});
</script>

Solo creando e impostando queste piccole cose il plugin funziona correttamente, ma ci sonoun po di parametri che e possibile impostare:

  • time (ms)  :  numerico – imposta il tempo di spostamento degli element. Di default è impostato a 1500 ms
  • childrenHover :  0/1 – setta o meno l’effetto del passaggio sui DIV con classe PICCOLI. Di default = 1
  • segnaPosto : 0/1 – setta o meno l’effetto di elemento DIV selezionato
  • segnaPostoHTML : stringa – HTML da passare per impostare il segnaposto. Necessario segnaPosto=1.  Di default = <div></div> in modalità trasparente bianco
  • classPiccoli : stringa – classe assegna ai DIV PICCOLI se impostate una classe diversa da”piccoli”.Di default ovviamente è “piccoli”
  • IDmaster : stringa – ID del DIV MASTER se gli assegnate un’ID diverso da “master”. Di default ovviamente è “master”
  • marginElement (px) : numerico – setta la spaziatura tra tutti i DIV nel contesto.
  • diffHeight (px) : numerico – setta una spaziatura in altezza per rimpicciolire le dimensioni del plugin.
  • piccoliWidth : stringa – setta la dimensione dei DIV PICCOLI. si può inpostare in qualsiasi unità o percentuale.

Potete scaricare tutti gli script con una pagina di esempio QUI

Se avente miglioire da comunicare o critiche , sono qui ad aspettare

Ciaooooo

Annunci
commenti
  1. burn city apk ha detto:

    An fascinating discourse is designer interpret. I opine that you should pen many on this issue, it strength not be a prejudice individual but mostly grouping are not sufficiency to verbalise on much topics. To the succeeding. Cheers like your JQuery Plugin | Tema per sito con animazione in stile FLASH Salvatore Cervone's Blog.

  2. I like Your Article about JQuery Plugin | Tema per sito con animazione in stile FLASH Salvatore Cervone's Blog Perfect just what I was searching for! .

  3. Nice, wonderful post I just wrote from you. I like the way you appear on items quite a great deal. I’m positive you may have been investigating this matter a entire lot.

  4. Allison Cumbert ha detto:

    Very interesting info !Perfect just what I was looking for!

  5. Slimberry Acai ha detto:

    I really feel this post along with your point of views are unquestionably terrific. Thanks for a great share.

  6. Willis Danella ha detto:

    You made some decent points here! I looked on the web for the issue and found most people will go along with with your site.

  7. Tassimo T65 Brewer ha detto:

    Nice producing, thoughfull and very exciting, I such as the way you place it down within your post, and I definitely had to take into consideration our factors of see, But I do agree with lots of of th

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...