Gewoonlijk worden achtergronden ingesteld met CSS. Ik ben echter twee projecten tegengekomen waarbij ik de achtergrond wilde laten veranderen op basis van logica.
Om een achtergrond te veranderen met JavaScript, 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 kleur of afbeelding, geanimeerd, met canvas en meer.