Dodatak za navigaciju pločica za JAVASCRIPT/JQUERY

Vrlo često, prilikom kreiranja pločice navigacije na web stranici, postoji potreba za njenom animacijom. Ovaj članak opisuje rješenje ovog problema pomoću dodatka. Glavni princip njegovog rada je podijeliti navigacijske elemente na komponente i animirati ih na različite načine, ovisno o odabranim postavkama.

Preuzmite dodatak

Prepoznatljive karakteristike i mogućnosti dodatka za navigaciju sa pločicama:

• Integracija sa jquery bibliotekom
• Mogućnost fleksibilnog podešavanja parametara
• Mnoge opcije za segmentnu animaciju
• Zaključajte stavke galerije kako biste izbjegli više klikova

Dodatak za navigaciju sa pločicama sastoji se od glavnih dijelova:

• HTML pločice za navigaciju
• JQuery skripta sa predlošcima postavki
• Univerzalni CSS stilovi dodataka

Primjer instaliranja dodatka za animaciju pločica

Preuzmite arhivu s dodatkom i kopirajte njen sadržaj u direktorij vaše web stranice. Da bi skripta radila, morate imati povezanu jQuery biblioteku.

Struktura arhive:

/css/style.css              // Файл основных стилей
/css/font-awesome.css       // Файл стилей шрифта FontAwesome
/css/plate.css              // Файл стилей плитки
/fonts/*                    // Файлы шрифта
/js/plate.js                // Основной код
/images/                    // Папка с изначальным набором картинок 
index.html                  // Файл с оригинальной разметкой

Inicijalizacija i konfiguracija dodatka za pločice

Galerija slika na koju će se skripta povezati mora imati sljedeću strukturu:

<section class="plate">
 <a href="#" class="plate-item">
  <img src="/images/plate-2-1.jpg" alt="" />
 </a>
 <a href="#" class="plate-item">
  <img src="/images/plate-2-2.jpg" alt="" />
 </a>
 <a href="#" class="plate-item">
  <img src="/images/plate-2-3.jpg" alt="" />
 </a>
 <a href="#" class="plate-item">
  <img src="/images/plate-2-4.jpg" alt="" />
 </a>
 <a href="#" class="plate-item">
  <img src="/images/plate-2-5.jpg" alt="" />
 </a>
 <a href="#" class="plate-item">
  <img src="/images/plate-2-6.jpg" alt="" />
 </a>
</section>

Da biste inicijalizirali dodatak, samo navedite klasu spremnika vanjske galerije u jquery selektoru.

<script>
 $('.plate').plate();
</script>

Da biste detaljno konfigurirali dodatak, prilikom inicijalizacije možete u zagradama navesti parametre koje želite primijeniti. (Pogledajte ispod za kompletnu listu dostupnih opcija)

<script>
 $('.plate').plate({
   count : 'auto',
   speedShow : 300,
   animateParametersShow : {
      width : 'hide',
      opacity : 0
   },
   speedHide : 300
 });
</script>

Kako radi dodatak za animaciju navigacije sa pločicama

Nakon inicijalizacije, dodatak kreira gornji sloj u svakom elementu galerije, koji se sastoji od mnogo segmenata, čiju animaciju pokreće događaj koji je naveden u postavkama. Štaviše, ova animacija može biti simultana ili sekvencijalna, ovisno o specificiranim intervalima.

Moguće je postaviti segmente animacije u obliku cijele slike, podijeljene na zasebne dijelove, ili jednog prozirnog sloja (njegova boja se također može podesiti). Da biste popunili segmente animacije slikom, potrebno je postaviti parametar backgroundType: 'image' i navesti pozadinu za blokove galerije slika u stilovima.

section.plate .plate-item:nth-of-type(1){background: url(/images/plate-2-6.jpg) top center no-repeat;}
section.plate .plate-item:nth-of-type(2){background: url(/images/plate-2-5.jpg) top center no-repeat;}
section.plate .plate-item:nth-of-type(3){background: url(/images/plate-2-4.jpg) top center no-repeat;}
section.plate .plate-item:nth-of-type(4){background: url(/images/plate-2-3.jpg) top center no-repeat;}
section.plate .plate-item:nth-of-type(5){background: url(/images/plate-2-2.jpg) top center no-repeat;}
section.plate .plate-item:nth-of-type(6){background: url(/images/plate-2-1.jpg) top center no-repeat;}

Takođe, pozadina segmenata animacije može se postaviti ne slikom, već bojom. Da biste to učinili, trebate postaviti parametar backgroundType : 'image' i   backgroundColor : 'COLOR' .

Dodatak ima mogućnost da konfiguriše brzinu animacije segmenata i interval njihove animacije koristeći sledeće parametre:   speedShow , rangeShow , speedHide , rangeHide (označeno u milisekundama).

 

speedShow i speedHide su vrijeme tokom kojeg će se pojaviti animacija prikazivanja ili skrivanja jednog segmenta animacije.

rangeShow i rangeHide su vrijeme nakon kojeg počinje animacija sljedećeg segmenta nakon početka animacije prethodnog kada se prikazuje, odnosno skriva.

Parametri konfiguracije dodatka tokom inicijalizacije

Animacija se može fleksibilno prilagođavati ovisno o postavkama, zbog čega se efekti animacije u konačnici mogu značajno razlikovati jedni od drugih.

Prepoznatljive karakteristike i mogućnosti univerzalnog dodatka za blok iskačućih prozora: Univerzalni blok dodatak se sastoji od glavnih dijelova:

Također je vrijedno razmotriti parametar animacije inverzije inversType . Kada ga koristite, animacija segmenata će početi sa dvije različite strane u isto vrijeme, njihovo skrivanje će ići od centra elementa galerije do rubova ( vanjskih ) ili obrnuto ( unutrašnje ), tj. polovina segmenata će biti uslovno dodijeljena lijevoj strani roditeljskog elementa, a polovina desnoj.

Osim toga, kada se koristi parametar InversSide , lijeva polovina svih segmenata će biti poravnata prema vrhu, a druga prema dnu s vrijednošću tl-rb i obrnuto sa tr-lb . Ova funkcionalnost je trenutno dostupna samo u beta verziji dodatka i dalje će se razvijati ovisno o njenoj potražnji u budućnosti...