in moderne achtergronden voor webdesign zijn groot (zowel letterlijk als figuurlijk). Met de komst van HD (en nu 4K) displays, ontwerpers zijn het creëren van achtergronden die veel van het scherm onroerend goed in beslag nemen. Waarom? Omdat ze zorgen voor een ongelooflijke visuele impact en helpen om een verhaal te vertellen.

maar er is zoveel meer aan achtergronden dan gewoon een foto of textuur in een grote ruimte gooien. Een combinatie van CSS en af en toe een beetje JavaScript kracht de creatie van een aantal verbazingwekkende speciale effecten.

laten we enkele van de unieke manieren verkennen waarop ontwerpers achtergronden kruiden. We zullen ook een pen voor elke techniek, zodat u precies kunt zien hoe ze werken.

CSS Mengmodus kleurverandering

wat dit achtergrondeffect zo cool maakt is dat het vaste element bovenaan van kleur lijkt te veranderen terwijl de gebruiker schuift. Het gebruik van de eigenschap CSS mix-blend-mode staat de verandering in tint toe, die afhankelijk is van de inhoud van de achtergrond.

Scrolling Animation

doet denken aan side-scroll video games uit het verleden, deze techniek heeft twee verschillende beelden – elk scrollen in de tegenovergestelde richting. Het wordt gedaan met behulp van CSS transform en enkele JS.

Scheve

Scheve achtergronden zijn een van de populairste trends in webdesign. Het is een effect dat ongelooflijk eenvoudig te implementeren was in printontwerp en een pijn om te doen op het web – tot nu toe. Deze pure HTML / CSS oplossing maakt het een makkie.

bewegende afbeeldingen

met behulp van een vrij eenvoudig bit van CSS, zorgt deze achtergrond voor een soepele overgang tussen meerdere afbeeldingen. Het zorgt voor een veel meer lichtgewicht slider dan traditionele JavaScript.

geanimeerd verloop

als dit niet zorgvuldig wordt gedaan, kan een geanimeerde achtergrond afleiden van alle inhoud die er bovenop zit. Dit geanimeerde gradiënt voorbeeld is leuk omdat het een meer subtiel effect. Met JavaScript kunt u kleurverlopen definiëren die overeenkomen met uw palet.

vervagen op Scroll

Deze techniek kan heel nuttig zijn voor momenten waarop u echt wilt dat bezoekers zich richten op de achtergrondafbeelding (zoals de koptekst van een nieuwsartikel) en dan de mogelijkheid bieden om tekst over de bovenkant te lezen. Een klein beetje jQuery verandert de eigenschap background-size tijdens het scrollen om het effect te creëren.

Fade-in Hero Image with Overlay

Er zijn een paar dingen aan de hand met dit voorbeeld. Ten eerste, een full-width hero afbeelding heeft een kleur overlay toegevoegd op de top om een andere tint te creëren. Vervolgens wordt een fade-animatie geïmplementeerd om de afbeelding op een visueel soepele manier te introduceren. Ten slotte wordt een parallax-stijl scrolling effect toegevoegd aan de mix. Het resultaat is een zeer moderne look die relatief weinig code (en geen JS) gebruikt.

Achtergrondzoom en Pan

Hier is een effect dat we de laatste tijd vaak zien. Als de gebruiker over een paneel zweeft, zoomt de achtergrondafbeelding in en pannen samen met eventuele bewegingen van de cursor. Het is een eenvoudige manier om wat interactiviteit toe te voegen en de interesse van de gebruiker te behouden.

Reveal on Hover

dit voorbeeld toont een gesplitst scherm waar de achtergrond wordt onthuld op basis van de positie van de muis van de gebruiker. Geweldig voor vergelijkingen, zoals’ voor ‘en’ na ‘ shots.

kleurverandering tijdens de Scroll

soms vergeten we hoe krachtig het gebruik van eenvoudige effen kleuren kan zijn. Hier zien we de impact die het kan maken als achtergrondkleuren veranderen op basis van de Scrollpositie. Deze lichtgewicht oplossing kan net zo visueel effectief zijn als zware beelden.

achtergronden in de voorhoede

achtergronden zijn niet langer alleen een middel om inhoud te framen – ze maken nu vaak deel uit van de inhoud zelf. Met zo veel interessante manieren om ze te gebruiken, is het de moeite waard om te experimenteren met verschillende achtergrondtechnieken en zien hoe ze de gebruikerservaring van uw volgende project kunnen verbeteren.