Style je eigen checkbox-animatie-effecten met Checkbox.css
In een recent bericht behandelde ik een leuke animatiebibliotheek voor aangepaste keuzerondjes, aangedreven door CSS.
Die gratis bibliotheek werd vrijgegeven door 720 kb en zag al snel een follow-up alternatief genaamd Checkbox.css. Dit werkt op een vergelijkbare manier, behalve het hertekent en animeert HTML-selectievakjes.
Deze bibliotheek komt als een reeks bibliotheken bij drie verschillende doelen:
Radiobox.css- aangepaste radioanimatiesCheckbox.css- aangepaste checkbox-animatiesChecked.css- stijlen & animeert bestaande geselecteerde elementen (radio's & selectievakjes)
Deze zijn allemaal ontwikkeld door hetzelfde team en ze werken op dezelfde manier. Maar dat moet je wel doen elke bibliotheek afzonderlijk opnemen als je de volledige effecten wilt hebben.
Neem een kijkje in de Checkbox.css GitHub om enkele van deze functies te zien en hoe ze werken. Standaard vertrouwen ze erop 2D-transformaties samen met CSS-overgangen, afhankelijk van de browserondersteuning.
Geen van deze bibliotheken wordt geleverd met JS fallback-methoden, dus dat doen ze echt werk alleen voor door CSS aangestuurde animaties. Maar een snelle blik op de demopagina zou je blij moeten hebben gemaakt om deze animaties toe te voegen aan je pagina.
Het proces kan niet eenvoudiger en het vereist weinig tot geen codeerkennis (hoewel het altijd handig is om wat te hebben).
Zodra de CSS-stylesheet op uw pagina staat, voegt u gewoon een klasse toe aan uw selectievakje met het formaat checkbox-x waar de “X” vertegenwoordigt welke animatie je maar wilt. Hier is bijvoorbeeld de code voor de “springen” animatie effect:
Het beste deel is hoe deze bibliotheek kan werken in combinatie met het keuzerondje, te. Ik zou de bibliotheek Checked.css zeker aanraden als je dat wilt animeren bestaande geselecteerde elementen.
Laat al deze afhankelijkheden je niet afschrikken. Vrijwel iedereen kan de Checkbox.css-bibliotheek of een van de gerelateerde bibliotheken opzetten, helemaal vanaf het begin met een beetje kopiëren & plakken.
En als je vragen of suggesties hebt voor dit pakket met invoeranimatiebibliotheken, probeer dan de makers te berichten via hun site of op Twitter @ 720kb_.
