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
1.2K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

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.
(Lees meer...)
Verwijderde gebruiker
10 jaar geleden
Verwijderde gebruiker
10 jaar geleden
weet jij dan misschien de javascript code hiervoor?
Verwijderde gebruiker
10 jaar geleden
Ik zou hier eens kijken, MCLovesMy: http://www.w3schools.com/default.asp. Het is niet te doen om zo'n code met uitleg en alles erbij hier neer te zetten.
Google eens op 'jQuery slideshow'. Er zijn honderden varianten die je zo kunt downloaden.
(Lees meer...)
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.
(Lees meer...)
Verwijderde gebruiker
10 jaar geleden

Weet jij het beter..?

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

0 / 5000
Gekozen afbeelding