Input dominante kleur van afbeelding naar achtergrond met AdaptiveBackgrounds.js

Bij het weergeven van iets op internet vinden sommige ontwikkelaars het vaak moeilijk om te bepalen welke achtergronden het meest geschikt zijn voor gebruik. Een goede combinatie van de achtergrond met de juiste inhoud kan de gebruikerservaring substantieel beïnvloeden. Voor sommige ontwerpers geven ze er de voorkeur aan om enkele van de dominante kleuren in de inhoud zelf te gebruiken - AdaptiveBackgrounds.js kan dat automatisch voor je doen.

AdaptiveBackgrounds.js is een gratis jQuery-invoegtoepassing waarmee u eenvoudig de meest dominante kleur in uw inhoud kunt aanpassen als onderdeel van de achtergrond. Het is gebouwd bovenop RGBaster, gemaakt door dezelfde ontwikkelaar.

Kortom, het is een plug-in om het kleurenpalet van een afbeelding uit te pakken om de dominante kleur te bereiken . De eerste keer dat de pagina wordt geladen, extraheert de plug-in de kleur uit de afbeelding. De geëxtraheerde kleur wordt vervolgens toegepast op de afbeeldingsouder. Je kunt zien hoe het werkt in deze gif.

(Afbeeldingsbron: AdaptiveBackgrounds.js)

Ermee beginnen

AdaptiveBackgrounds.js vereist dat de jQuery-bibliotheek werkt. Hoewel het bovenop RGBaster is gebouwd, hoeft u het niet meer op te nemen. Je kunt het plug-in bestand downloaden van zijn GitHub-pagina.

Voeg vervolgens alle vereiste bestanden toe aan uw project, zoals:

Pas dominante kleur aan

We gaan deze tool uitproberen en gebruiken om de dominante kleur uit deze afbeelding te halen. Dubbelboogfoto door Kartik Ramanathan, en dan toepassen op het bovenliggende element.

Als u de dominante kleur in een element wilt toepassen, moet u de afbeelding als het onderliggende element plaatsen. Beschrijf binnen de img tag het kenmerk data-adaptive-background, zodat het script de kleur kan krijgen:

Voor meer voorbeelden en extra instellingen kunt u de AdaptiveBackgrounds.js documentatiepagina bezoeken.
Laatste gedachte 
Met AdaptiveBackgrounds.js krijgt u alleen een statische kleur. Je kunt proberen je achtergrond een beetje meer kleur te geven voor een opvallend resultaat. Als dat het geval is, bekijk dan de demo-pagina van AdaptiveBackgrounds.js voor meer ideeën.







        

          
          

		  
Bekijk YouTube-video's samen met vrienden met behulp van UpTime
            
Voor het grootste deel is het bekijken van YouTube-video's op je mobiele apparaat meestal een eenzame ervaring. Wat als er een app was waarmee je tegelijkertijd een "YouTube" -video kunt bekijken met je vrienden ? Als zo'n app je aanspreekt, ben je misschien geïnteresseerd in wat UpTime te bieden heeft.
			
(Technische en ontwerptips)
          
        
      

        

          
          

		  
12 gratis Windows-hulpprogramma's die u moet installeren [2018]
            
Telkens wanneer ik een nieuwe pc krijg of Windows opnieuw installeer, besteed ik een uur of twee aan het personaliseren en optimaliseren van mijn behoeften. Een belangrijk onderdeel van dit proces is het installeren van tools van derden die helpen mijn pc te beveiligen, opschonen, beheren en optimaliseren voor de beste ervaring
			
(Technische en ontwerptips)
          
        
      

  
  
  



Interessante Artikelen






			
	
				

					20 geweldige boomhutten die je zullen verbazen
					

			
	
				

					35 Ongebruikelijke WiFi-routernamen die u moet zien
					
						







			
	
				

					Vind gebruikersinterfaceontwerp Inspiratie met UIDB
					

			
	
				

					Google-kantoren over de hele wereld [Foto's]