Tijdens het werken aan een project (dat maken we binnenkort bekend!), wilde ons ontwerpteam een mooie van kleur veranderende achtergrond. Nu weten we dat we een statisch verloop hadden kunnen gebruiken, of gewoon vervagen tussen secties, maar we dachten dat het cool zou zijn als de achtergrond zou veranderen als de gebruiker op een vaste manier naar beneden scrolde. Meestal als we een uitdaging als deze tegenkomen, is het eerste wat we doen, kijken of iemand anders het al heeft gedaan, en in een mum van tijd vonden we deze jsfiddle: http://jsfiddle.net/cgspicer/V4qh9/. Het is geweldig, maar we hadden iets meer nodig. De huidige versie ondersteunt alleen vervaging tussen twee kleuren, dus we hebben de code gevorkt en een beetje uitgebreid.
installeren
Als je deze methode voor je volgende project wilt gebruiken, heb je nodig: jQuery, jquery.color-2.1.0.js, en de stukjes HTML/CSS/JS die in deze jsfiddle zijn opgenomen: https://jsfiddle.net/jguffey/mxkx9j2o/.
Maak het uw eigen
In de viool gebruiken we ` ` elementen om de inhoudsgrenzen te markeren, maar u kunt elk gewenst element gebruiken door de selector op regel 8 en de bijbehorende CSS en HTML te wijzigen. De reeks strings in de aanroep van `scrollColors` (regel 16) is waar we de kleuren opslaan waarnaar we willen overstappen. Vergeet niet om de CSS-achtergrondkleureigenschap voor body (ons doel voor kleurverandering) te wijzigen zodat deze overeenkomt met het eerste element in deze array, anders krijgt u nog steeds de felroze kleur wanneer de pagina voor het eerst wordt geladen.
Dankzij de jQuery Color-plug-in zijn hex-, rgb- en zelfs rgba-waarden toegestaan. Dit kan een aantal coole effecten opleveren wanneer het over een afbeelding of video wordt gelaagd. Het alfakanaal in RGBA is geanimeerd net als de andere kleurkanalen, dus je zou een verkochte kleurveranderingsdekking kunnen hebben met scrollen.
Geniet!
Alstublieft laat een nuttig geef commentaar met je mening, deel dit dan op je Facebook-groep (en) die dit nuttig zouden vinden en laten we samen de vruchten plukken. Bedankt voor het delen en aardig zijn!
Disclosure: Deze pagina kan links bevatten naar externe sites voor producten die we geweldig vinden en die we van harte aanbevelen. Als u producten koopt die we aanbevelen, kunnen we een verwijzingsvergoeding verdienen. Dergelijke vergoedingen hebben geen invloed op onze aanbevelingen en we accepteren geen betalingen voor positieve beoordelingen.
en nog veel meer ...