U ovom tekstu ćete saznati kako da napravite složene verzije 3D Parallax efekta u okviru Slider Revolution plugina. Napravićemo grafičke elemente u Photoshopu, a zatim ćemo ih importovati u WordPress. Videćete korak po korak kako da se stvori 3D efekat kada prelazite mišem preko slika.
Prva stvar koju je potrebno uraditi je napraviti 3 grafička elementa u Photoshopu sa slike iznad, telefon, tablet i računar, koji se pomeraju na sajtu kada pomeramo miš. Kako ne bismo sami pravili slike, pronađemo slike na nekim od besplatnih sajtova kao što su Unsplash ili Pexels i pronađete šta vam se dopada. Potrebno je da slike bude u .png obliku, odnosno da bude transparentna, kako bi mogli da postavimo pozadinu iza slika.
Kada smo napravili slike, sledeća stvar je podešavanje slajdera. U okviru kontrolne table vašeg sajta, instalirate i aktivirate Slider Revolution plugin ako već niste i u okviru tog odeljka vršimo podešavanja. Potrebno je podesiti Content Source, u ovom slučaju će biti Default Slider, zatim naslove, nazive i shortcode slajdera, tip slajdera i izgled slajdera.
Nakon što smo postavili početna podešavanja potrebno je u okviru odeljka Parallax & 3D izmeniti pojedine stvari. Omogućićemo 3D prikaz na prekidaču, može se podesiti senka i da li ćemo omogućiti ili ne pozadinu. Možemo podesiti opciju Default 3D Depth, jer ne želimo da se pozadina prebrzo pomera.
Kada smo završili sa osnovnim podešavanjem Parallax & 3D odeljka, krećemo sa kreiranjem slajdera.
U okviru slajdera, dodajemo različite elemente, kao što su 3 različite slike, tekst i dugme. Sve se to podešava pod dugmetom Add Layer. Ubacimo sve elemente, stilizujemo ih kako želimo da izgledaju i dobijemo nešto što izgleda kao na slici ispod.
Kada smo napravili konačan izgled slajdera, sledeća stvar je podešavanje 3D efekta. Podesimo opciju 3D Depth za računar, tablet i telefon različite vrednosti, kako bi se sporije i brže pomerali po ekranu. Takođe ćemo podesiti i 3D Depth za tekst kao i za dugme.
Nakon što smo sve ovo podesili, kreiran je 3D Parallax efekat slajdera i kada pomerate miša preko slajdera pomerate i elemente slajdera kao na slici ispod.
