Achtergrond maken met JavaScript code voorbeelden

Logo cursus traing wordpress

Achtergrond maken met JavaScript code voorbeelden

Gewoonlijk worden achtergronden ingesteld met CSS. Ik ben echter twee projecten tegengekomen waarbij ik de wilde laten veranderen op basis van logica.

Om een achtergrond te veranderen met , gebruik je de volgende regel code:

document.body.style.background = "url('[INSERT HTTPS IMAGE URL HERE]')";

Hieronder staat een meer gedetailleerd codevoorbeeld, dat de achtergrondafbeelding kiest op basis van de dag van de week.

// Object containing url links to images from Unsplash
const IMAGE_URLS = {
  nature: 'https://images.unsplash.com/photo-1501854140801-50d01698950b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2600&q=80',
  pencils: 'https://images.unsplash.com/photo-1489844097929-c8d5b91c456e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1652&q=80',
};
// Sets the background image
const setBackground = (image) => {
  document.body.style.background = "url('"+IMAGE_URLS.[image]+"')";
};
if (isWeekend) {
  setBackground('nature');
} else {
  setBackground('pencils');
}

38 JavaScript Achtergrond Effecten

Collectie van handgeplukte gratis vanille JavaScript achtergrond effect code voorbeelden: verander achtergrond of afbeelding, geanimeerd, met canvas en meer.

https://freefrontend.com/javascript-background-effects/

https://freefrontend.com/css-animated-backgrounds/


Wil je meer informatie over Achtergrond maken met JavaScript code voorbeeldenof info?

Meer weten? Veel web-designers met interesse in Achtergrond maken met JavaScript code voorbeelden bekeken ook de onderstaande veel gelezen handleidingen:


Training of cursus CSS en html

Snel CSS en html leren

Leer hoe je je website beter en kan maken en beheren in de html-css training op maat:
CSS en HTML-cursus voor WordPress

WP Bootcamp spoedopleiding

Leer hoe je je WordPress site sneller kan maken en ontwerpen in de WP Bootcamp spoedopleiding:
WordPress Bootcamp spoedopleiding

Info over Achtergrond maken met JavaScript code voorbeelden?

Neem contact op met Arthur als je nog vragen hebt over ontwerp, Achtergrond maken met JavaScript code voorbeelden en WordPress web-development.

WP developer

Arthur Wentzel, web-designer

06 20 83 05 83

Scroll naar boven