V tem besedilu se boste naučili, kako ustvariti kompleksne različice učinka 3D Parallax znotraj vtičnika Slider Revolution. Grafične elemente bomo ustvarili v Photoshopu in jih nato uvozili v WordPress. Korak za korakom boste videli, kako ustvariti 3D učinek, ko miškin kazalec premaknete nad slike.
Prva stvar, ki jo je treba narediti, je iz zgornje slike ustvariti 3 grafične elemente v Photoshopu, telefon, tablico in računalnik, ki se premikajo po strani, ko premaknemo miško. Da ne bi sami ustvarjali slik, poiščemo slike na nekaterih brezplačnih spletnih mestih, kot sta Unsplash ali Pexels, in poiščemo tisto, kar vam je všeč. Slike morajo biti v formatu .png, torej prosojne, da lahko za slikami postavimo ozadje.
Ko smo ustvarili slike, je naslednja stvar, da prilagodimo drsnike. Znotraj nadzorne plošče vašega spletnega mesta namestite in aktivirate vtičnik Slider Revolution, če tega še niste storili, in znotraj tega razdelka izvajamo nastavitve. Treba ga je prilagoditi Vir vsebine, v tem primeru bo Privzeti drsnik, nato naslove, imena in kratko kodo drsnika, vrsto drsnika in postavitev drsnika.
Ko smo nastavili začetne nastavitve, je potrebno znotraj razdelka Paralaksa in 3D spremeniti nekatere stvari. Na stikalu bomo omogočili 3D pogled, lahko prilagodimo senco in ali bomo omogočili ozadje ali ne. Možnost lahko nastavimo Privzeta globina 3D, ker ne želimo, da se ozadje premika prehitro.
Ko končamo z osnovno nastavitvijo odseka Parallax & 3D, pojdimo na ustvarjanje drsnika.
Znotraj drsnika dodamo različne elemente, kot so 3 različne slike, besedilo in gumb. Vse to se prilagodi pod gumbom Dodaj plast. Vstavimo vse elemente, jih oblikujmo tako, kot želimo, da izgledajo in dobimo nekaj, kar je videti kot spodnja slika.
Ko smo ustvarili končni videz drsnika, je naslednja stvar, da prilagodimo 3D učinek. Nastavimo možnost. 3D globina za računalnik, tablico in telefon različne vrednosti, za počasnejše in hitrejše premikanje po zaslonu. Postavili bomo tudi in 3D globina tako za besedilo kot tudi za gumb.
Ko smo vse to nastavili, je bil ustvarjen 3D Parallax učinek drsnika in ko premaknete miško nad drsnik, premaknete tudi elemente drsnika kot na spodnji sliki.
