Du kan kalde det gimmicky, du kan kalde det eye candy, men parallax effekten i webdesign er her for at blive. Det er et element, der vil give dit websted "WOW" -faktoren. Mens effekten har eksisteret i nogen tid, og der er masser af websteder, der har implementeret det på deres design, er det stadig sejt.

Hvis du er klar til at deltage i bevægelsen og føje effekten til dit WordPress-websted, skal du holde dig indstillet.

Hvad er Parallax?

For dem, der ikke er bekendt med udtrykket, definerer ordbogen ordet "parallax" som " den effekt, hvor positionen eller retningen af ​​en genstand synes at afvige, når den ses fra forskellige positioner. ”

I webdesignarkivet er parallax en teknik, hvor baggrundsbilleder bevæger sig i en anden hastighed, som regel langsommere end forgrundsbillederne. Formålet er at skabe en illusion af dybde (faux 3D effekt) i et 2D miljø.

Anvendelsen af ​​parallax har eksisteret fra 1980'erne i spilverdenen, men webdesignere begyndte lige at indarbejde effekten meget i 2011 ved hjælp af HTML5 og CSS3.

Første sti: WordPress Temaer

Hvis du er en WordPress-bruger, er den nemmeste måde at have parallax-effekten på dit websted at bruge et WordPress-tema med den indbyggede effekt. Skift temaet, og du er færdig.

Der er masser af parallax-klar WP temaer derude, både gratis og betalt. En hurtig søgning på Google og i WordPress-temaarkivet giver dig flere muligheder, som du nogensinde kan håndtere.

Hvis du vil teste nogle af temaerne, her er et par eksempler på dem friske fra depotet. Da det er umuligt at teste og sammenligne alle de tilgængelige parallax-klare temaer og kun vise dig det bedste, blev disse udelukkende valgt ud fra subjektiviteten af ​​min personlige visuelle smag.

1. Parallax Frame

2. Marvy

3. SimpleShift

4. Eleganto

5. Integral

6. Zeal

7. Juniper

8. Og glem ikke det seneste officielle tema fra WordPress, Twenty Seventeen, understøtter også en parallax header.

Disse temaer har normalt et eller nogle få specifikke pladsholdere til parallax-effekten, og alt du skal gøre er at uploade baggrundsbilledet til disse steder. Men denne enkelhed er også en ulempe, fordi du har lidt plads til at improvisere.

Hvert tema er anderledes, men du kan som regel tilpasse baggrundsparallaxbilledet via menuen "Udseende -> Tilpas" og vælge den specifikke menu i henhold til temaindstillingerne.

Anden sti: WordPress-plugins

Hvis du vil anvende effekten til de områder, du ønsker, skal du bruge plugins. Selv om antallet ikke er så stort som med temaerne, er der stadig mange WordPress-parallax-plugins, som du kan prøve. Her er et par af dem fra plugin repository: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider og Aesop Story Engine.

De fleste af disse plugins giver dig mulighed for at oprette parallax elementer og indsætte dem i indlæg, sider eller andre understøttede områder ved hjælp af kortkoder. Der er også nogle, der skaber elementerne direkte på det sted, hvor du vil have parallaxen til at dukke op.

Siden vi har diskuteret Aesop Story Engine, er dens parallelle indsættelsesevne og alle dets funktioner i Building Interactive Longform Storytelling Indhold på WordPress ebook, så i forbindelse med denne artikel skal vi se på et andet plugin som et eksempel.

I Parallax Scroll kan du for eksempel oprette en ny parallax svarende til oprettelse af et nyt indlæg. Redigeringsgrænsefladen ligner også. For at tilføje parallax baggrundsbilledet skal du bruge indstillingen "Set featured image". Titel og postindhold er valgfri.

Der er mange muligheder, du kan tinker med under indholds boksen, men de er også valgfrie.

Når du har trykket på knappen "Publicer", får du en kortkode. Indsæt denne shortcode i ethvert understøttet sted (indlæg, sider, widgets osv.), Og du vil have parallax-effekten.

Bemærk, at selv om du kan justere mange ting i mulighederne, afhænger parallaxens endelige resultat meget af de temaer, du bruger. Hvis temaet understøtter fuld bredde, så kan parallaxelementet ses i fuld bredde herlighed. Hvis ikke, kan du acceptere, hvad livet har givet dig med åbne arme, eller du kan forsøge at hakke dig ind i dit foretrukne udseende ved hjælp af CSS og JavaScript.

Et lille trick til at føje til dit arsenal: Ingen sagde, at du ikke kunne kombinere temaet og plugin'et. Brug af mere end et plugin er også lovligt. Du kan f.eks. Bruge 20 Seventeen til dit tema og installere Aesop Story Engine plus Parallax Scroll som ekstra spicing til din webrecept.

Nu kan du gå på en parallax rejse og wow dine besøgende undervejs.