Je kunt het gimmicky noemen, je kunt het eye candy noemen, maar het parallax-effect in webdesign is er om te blijven. Het is een element dat uw site de "WOW" -factor geeft. Hoewel het effect al enige tijd bestaat, en er zijn tal van sites die het hebben geïmplementeerd in hun ontwerp, is het nog steeds cool.

Als u klaar bent om deel te nemen aan de beweging en het effect aan uw WordPress-site toe te voegen, houdt u ons dan in de gaten.

Wat is parallax?

Voor degenen die niet bekend zijn met de term, definieert het woordenboek het woord "parallax" als " het effect waarbij de positie of richting van een object lijkt te verschillen wanneer het wordt bekeken vanuit verschillende posities. ”

In de website-ontwerpwereld is parallax een techniek waarbij achtergrondafbeeldingen met een andere snelheid bewegen, meestal langzamer dan de voorgrondafbeeldingen. Het doel is om een ​​illusie van diepte (faux 3D-effect) te creëren in een 2D-omgeving.

De toepassing van parallax bestaat al sinds de jaren tachtig in de gamewereld, maar webontwerpers begonnen het effect pas in 2011 op te nemen met HTML5 en CSS3.

Eerste pad: WordPress-thema's

Als u een WordPress-gebruiker bent, is de eenvoudigste manier om het parallaxeffect op uw site te hebben, een WordPress-thema te gebruiken met het ingebouwde effect. Verander het thema en u bent klaar.

Er zijn tal van parallax-ready WP-thema's die er zijn, zowel gratis als betaald. Een snelle zoekopdracht op Google en in de WordPress-themarepository geeft u meer opties die u ooit kunt gebruiken.

Als u enkele van de thema's wilt testen, vindt u hier een paar voorbeelden uit de repository. Omdat het onmogelijk is om alle beschikbare parallax-ready thema's te testen en te vergelijken en je alleen de beste te laten zien, werden deze uitsluitend gekozen op basis van de subjectiviteit van mijn persoonlijke visuele smaak.

1. Parallax-kader

2. Marvy

3. SimpleShift

4. Eleganto

5. Integraal

6. IJver

7. Juniper

8. En vergeet niet dat het laatste officiële thema van WordPress, Twenty Seventeen, ook een parallax-header ondersteunt.

Deze thema's hebben meestal een of enkele tijdelijke plaatsaanduidingen voor het parallax-effect en u hoeft alleen de achtergrondafbeelding naar die locaties te uploaden. Maar deze eenvoud is ook een nadeel, omdat je weinig ruimte hebt om te improviseren.

Elk thema is anders, maar je kunt meestal de parallaxafbeelding op de achtergrond aanpassen via het menu "Uiterlijk -> Aanpassen" en het specifieke menu kiezen aan de hand van de thema-instellingen.

Tweede pad: WordPress-plug-ins

Als u het effect wilt toepassen op de gebieden van uw keuze, moet u plug-ins gebruiken. Hoewel het aantal niet zo groot is als met de thema's, zijn er nog steeds veel WordPress parallax-plug-ins die je kunt proberen. Hier zijn een paar van de plugin repository: Parallax Scroll, Easy WordPress Parallax Slider, cbParallax, ML Parallax, MG Parallax Slider, Easy WP Parallax Slider en Aesop Story Engine.

Met de meeste van deze plug-ins kunt u parallax-elementen maken en deze invoegen in berichten, pagina's of andere ondersteunde gebieden met behulp van shortcodes. Er zijn er ook enkele die de elementen direct creëren op de plaats waar je de parallax wilt laten verschijnen.

Omdat we Aesop Story Engine hebben besproken, zijn de mogelijkheid om parallax in te voegen en alle functies ervan opgenomen in de Storytelling-inhoud van Interactief Longform in WordPress, dus laten we in dit artikel een andere plug-in als voorbeeld bekijken.

In Parallax Scroll kunt u bijvoorbeeld een nieuwe parallax maken die lijkt op het maken van een nieuw bericht. De bewerkingsinterface ziet er ook hetzelfde uit. Gebruik de optie "Set featured image" om de parallax-achtergrondafbeelding toe te voegen. Titel en berichtinhoud zijn optioneel.

Er zijn veel opties waarmee je kunt sleutelen onder het inhoudsvak, maar ze zijn ook optioneel.

Na het raken van de knop "Publiceren", krijgt u een shortcode. Voer deze shortcode in op elke ondersteunde plaats (berichten, pagina's, widgets, etc.) en u zult het parallax-effect hebben.

Merk op dat zelfs als u veel dingen in de opties kunt aanpassen, het uiteindelijke resultaat van de parallax sterk zal afhangen van de thema's die u gebruikt. Als het thema volledige breedte ondersteunt, kan het parallaxelement in de volle breedte verschijnen. Als dat niet het geval is, kun je accepteren wat het leven je met open armen heeft gegeven, of je kunt proberen om je uiterlijk te hacken met CSS en JavaScript.

Een kleine truc om toe te voegen aan je arsenaal: niemand zei dat je het thema en de plug-in niet kon combineren. Het gebruik van meer dan één plug-in is ook legaal. U kunt bijvoorbeeld Twenty Seventeen gebruiken voor uw thema en Aesop Story Engine plus Parallax Scroll installeren als de extra smaakmaker voor uw webrecept.

Nu kun je op een parallax-reis gaan en je bezoekers langs de weg wowen.