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.

Inhoud[Producten per pagina]
 

kleurenscroll

installeren

Als je deze methode voor je volgende project wilt gebruiken, heb je nodig: jQueryjquery.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!

 

Over de auteur
Auteur: Super User

Nog een ding... Wist je dat mensen die nuttige dingen zoals dit bericht delen er ook GEWELDIG uitzien? ​
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.

 

wie zijn we?

CollectiveRay wordt gerund door David Attard - we werken al meer dan 12 jaar in en rond de niche van webdesign en bieden bruikbare tips voor mensen die met en op websites werken. We hebben ook DronesBuy.net - een website voor drone-hobbyisten.

David Attard

 

 

Auteur (s) Uitgelicht op:  Inc Magazine-logo   Sitepoint-logo   CSS Tricks-logo    webdesignerdepot-logo   WPMU DEV-logo   en nog veel meer ...