Farbwechselnder Hintergrund beim Scrollen

 Während der Arbeit an einem Projekt (wir werden es bald bekannt geben!) Wollte unser Designteam einen schönen farbwechselnden Hintergrund. Jetzt wissen wir, dass wir einen statischen Farbverlauf hätten verwenden oder einfach zwischen Abschnitten verblassen können, aber wir dachten, es wäre cool, wenn sich der Hintergrund ändern würde, wenn der Benutzer auf feste Weise über die Seite scrollen würde. Wenn wir uns einer solchen Herausforderung stellen, überprüfen wir normalerweise zunächst, ob dies bereits jemand anderes getan hat, und in kürzester Zeit haben wir diese jsfiddle gefunden: http://jsfiddle.net/cgspicer/V4qh9/. Es ist großartig, aber wir brauchten ein bisschen mehr. Die aktuelle Version unterstützt nur Überblendungen zwischen zwei Farben, daher haben wir den Code gegabelt und ein wenig erweitert.

Inhalt[Anzahl Artikel]
 

Farbenrolle

Montage von

Wenn Sie diese Methode für Ihr nächstes Projekt verwenden möchten, benötigen Sie jQueryjquery.color-2.1.0.jsund die Teile von HTML / CSS / JS, die in dieser jsfiddle enthalten sind: https://jsfiddle.net/jguffey/mxkx9j2o/.

Machen Sie es Ihren eigenen

In der Geige verwenden wir ` `Elemente zum Markieren der Inhaltsgrenzen. Sie können jedoch jedes gewünschte Element verwenden, indem Sie den Selektor in Zeile 8 sowie das entsprechende CSS und HTML ändern. In dem String-Array im Aufruf von `scrollColors` (Zeile 16) speichern wir die Farben, zu denen wir wechseln möchten. Denken Sie daran, die CSS-Hintergrundfarbeneigenschaft für body (unser Farbänderungsziel) so zu ändern, dass sie mit dem ersten Element in diesem Array übereinstimmt. Andernfalls wird beim ersten Laden der Seite immer noch die leuchtend rosa Farbe angezeigt.

Dank des jQuery Color-Plugins sind Hex-, RGB- und sogar RGBA-Werte zulässig. Dies kann zu coolen Effekten führen, wenn Sie ein Bild oder Video überlagern. Der Alphakanal in RGBA wird genau wie die anderen Farbkanäle animiert, sodass Sie eine verkaufte Farbwechsel-Deckkraft mit Bildlauf erzielen können.

Willkommen bei SANOVO!

 

Über den Autor
Autor: Super User

Eine Sache noch... Wussten Sie, dass Leute, die nützliche Dinge wie diesen Beitrag teilen, auch FANTASTISCH aussehen? ;-);
Bitte kontaktieren Sie uns, wenn lass a nützlich Kommentieren Sie mit Ihren Gedanken und teilen Sie dies dann Ihren Facebook-Gruppen mit, die dies nützlich finden würden, und lassen Sie uns gemeinsam die Vorteile nutzen. Vielen Dank für das Teilen und nett zu sein!

Disclosure: Diese Seite enthält möglicherweise Links zu externen Websites für Produkte, die wir lieben und von ganzem Herzen empfehlen. Wenn Sie Produkte kaufen, die wir vorschlagen, können wir eine Empfehlungsgebühr verdienen. Solche Gebühren haben keinen Einfluss auf unsere Empfehlungen und wir akzeptieren keine Zahlungen für positive Bewertungen.

 

Wer sind wir?

CollectiveRay wird von David Attard geleitet - arbeitet seit mehr als 12 Jahren in und um die Webdesign-Nische und bietet umsetzbare Tipps für Leute, die mit und an Websites arbeiten. Wir betreiben auch DronesBuy.net - eine Website für Drohnen-Hobbyisten.

David Attard

 

 

Autor (en) Empfohlen am:  Inc Magazin Logo   Sitepoint-Logo   CSS Tricks Logo    Webdesignerdepot-Logo   WPMU DEV Logo   und viele mehr ...