Hét vraag- en antwoordplatform van Nederland

Hoe wissel je tussen afbeeldingen met CSS/HTML?

Dus ik wil weten hoe je wat je op deze pagina ziet moet maken:
https://www.easygiven.com/
En dan dat: Stap 1: organiseren, Stap 2: Geld inzamelen, Stap 3: Samen geven. Dat het grijs wordt en dan kleur krijgt omstebeurten!

Toegevoegd na 1 minuut:
En kan het met alleen HTML/CSS of nog iets anders?

Verwijderde gebruiker
10 jaar geleden
Geef jouw antwoord
0 / 2500
Geef Antwoord

Antwoorden (3)

Dit gebeurt door middel van JavaScript.

Er wordt gefade tussen een kleur- en grijsversie van de betreffende plaatjes.

De makkelijkste manier voor een beginner is om jQuery te gebruiken. Daarmee heb je snel te gebruiken functies als fadeOut(). Het loopje op die site zou als volgt kunnen werken:

1: We hebben 3 slides.
2: Eentje moet kleur worden, de andere grijs.
3: Fade alle kleurversies uit.
4: Welke moet er deze keer kleur worden? Fade daarvan de kleurversie in.
5: Terug naar stap 1.
Verwijderde gebruiker
10 jaar geleden
Google eens op 'jQuery slideshow'. Er zijn honderden varianten die je zo kunt downloaden.
Verwijderde gebruiker
10 jaar geleden
Op je vraag: "En kan het met alleen HTML/CSS of nog iets anders?"

Nee. Je kunt héél veel met CSS, maar vooral event-gestuurd, m.a.w. wanneer er een muis-/toetsenbordactie aan ten grondslag ligt. Vanwege het repeterende karakter van deze "slide show" zal dat met CSS niet gaan.

WEL kun je de fading-effecten heel eenvoudig met CSS doen (via transitions). Dan hoef je in javascript alleen nog maar een hele simpele timer te hebben. Vanwege de eenvoud en de multi-platform compatibility zou dit mijn persoonlijke voorkeur hebben. Ook hoeft de bezoeker dan niet de JQuery-library te downloaden en laadt/werkt de pagina daardoor nèt iets sneller.
Verwijderde gebruiker
10 jaar geleden
Deel jouw antwoord
0 / 2500
Geef Antwoord
logo van Kompas Publishing

GoeieVraag.nl is onderdeel van Kompas Publishing