Kleur veranderende achtergrond op scroll

 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!