Adaptive Background Colors

Developer
Rich Wertz
Size
6,171 Kb
Views
6,072
  1. Adaptive Background Colors Previews
  2. Adaptive Background Colors HTML Codes
  3. Adaptive Background Colors CSS Codes
  4. Adaptive Background Colors JS Codes

How do I make an adaptive background colors?

A js based kit that determines the most prominent color of an image and makes that the background color of the image container. This uses YIQ formulas and elements of RGBaster to achieve desired results. *CORS must be enabled to see the really cool stuff that goes on with this!. What is a adaptive background colors? How do you make a adaptive background colors? This script and codes were developed by Rich Wertz on 29 January 2023, Sunday.

Adaptive Background Colors Previews
IQ Test

Adaptive Background Colors - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Adaptive Background Colors</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html>
<head> <title>Adaptive Background Color</title> <link href="https://fonts.googleapis.com/css?family=Merriweather|Raleway:500" rel="stylesheet"> <script type="text/javascript" src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js'></script> <script type="text/javascript" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/jquery.adaptive-backgrounds.js'></script> <script type="text/javascript"> $(document).ready(function() { $.adaptiveBackground.run({ normalizeTextColor: true }); }); </script>
</head> <body> <div id="header"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/logo.png" alt="logo"> </div> <div id="heroSection"> <div id="hero" data-adaptive-background data-ab-css-background data-ab-parent='#heroSection'><h2><span>Special Feature</span><br>Exploring Vintage</h2></div> <div id="heroText"> <div class="layout"> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. </div> </div> </div>
<div class="panel"> <div class="p_inside"> <img class="panel-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/3.jpg" data-adaptive-background> <div> <h2>Cal-Can</h2> <p>Portable gas cans with flair.</p> </div> </div> </div>
<div class="panel"> <div class="p_inside"> <img class="panel-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/4.jpg" data-adaptive-background> <div> <h2>Fortunes</h2> <p>The message is in the medium.</p> </div> </div> </div>
<div class="panel"> <div class="p_inside"> <img class="panel-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/2.jpg" data-adaptive-background> <div> <h2>Webco</h2> <p>Time Tested School Supplies.</p> </div> </div> </div>
<div class="panel"> <div class="p_inside"> <img class="panel-img" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/9.jpg" data-adaptive-background> <div> <h2>Microcraft</h2> <p>Vintage chemical company.</p> </div> </div> </div> <div class="cleared"></div> <div id="main"> <div id="inner"> <img id="mainPic" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/main.jpg" data-adaptive-background data-ab-parent='#main'> <div id="mainText"> <h2>Vintage Amsterdam Landscape</h2> <p>There is background image here. The adaptive background color, from the image at left, is slightly transparent so that it has an influence on the background image, without overpowering the space with the color.</p> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> </div> <div class="cleared"></div> </div> </div> <div id="footer"> <h3>Adaptive background color</h3> <h4>***Please enable cross-origin resource sharing so that the script can access the assets in this project.<br>A js based kit that determines the most prominant color of an image and makes that the background color of the image container. This uses YIQ formulas and elements of RGBaster to acheive desired results.</h4> <p>Copyright &copy;2017 <a href="http://www.rwertz.com">Rich Wertz</a></p> </div>
</body>
</html> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Adaptive Background Colors - Script Codes CSS Codes

/*Eric Meyer's CSS Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {	display: block;
}
body {	line-height: 1;
}
ol, ul {	list-style: none;
}
blockquote, q {	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {	content: '';	content: none;
}
table {	border-collapse: collapse;	border-spacing: 0;
}
/* END */
body { margin: 0; padding: 0; line-height: 1.8em; font-family: 'Raleway', sans-serif;	font-size: 16px;
}
.panel { float: left; width: 25%; text-align: center;
}
.p_inside { padding: 20% 3%;
}
.panel-img { max-width: 80%; display: block; margin: 0 auto; height: auto; border-radius: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
h2 { font-family: 'Merriweather', serif; font-size: 2em; padding: 40px 0 20px 0;
}
p { padding: 0 0 20px 0;
}
.cleared { clear: both; padding-top: 5%;
}
#mainPic{ max-width: 50%; float: left; height: auto;
}
#mainText { max-width: 42%; float: left; padding: 2% 4% 0 4%;
}
#inner{ width: 100%; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/cart.png) repeat !important;
}
#header, #footer { background: #eee;
}
#header img { display: block; margin: 0 auto;
}
#hero{ height: 800px; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/329887/hero3_bw.jpg) no-repeat center center fixed; background-size: cover;
}
#hero h2 { display: block; width: 1200px; margin: 0 auto; font-size: 7em; text-align: center; position: relative; padding: 40% 0 0 0; color: #fff; letter-spacing: -0.07em; text-shadow: 1px 1px 2px black, 0 0 25px black, 0 0 5px black;
}
#hero h2 span { color: #ccc; font-size: 0.5em; line-height: 2.5em; letter-spacing: -0.03em;
}
#heroText { max-width: 1200px; margin: 0 auto; padding: 100px 0 160px 0;
}
.layout { column-count: 4;
}
#footer { padding: 1% 0 0 0;
}
#footer a {	text-decoration: none;
}
#footer a:hover {	text-decoration: underline;
}
#footer p { color: #666; text-align: center; padding-top: 2%;
}
#footer h3, #footer h4 {	padding: 2%;
}
#footer h3 {	font-weight: bold; font-size: 1.5em;	font-family: 'Merriweather', serif;
}
#footer h4 {	font-family: 'Raleway', sans-serif;
}

Adaptive Background Colors - Script Codes JS Codes

/* jshint debug: true, expr: true */
(function($){ /* Constants & defaults. */ var DATA_COLOR = 'data-ab-color'; var DATA_PARENT = 'data-ab-parent'; var DATA_CSS_BG = 'data-ab-css-background'; var EVENT_CF = 'ab-color-found'; var DEFAULTS = { selector: '[data-adaptive-background]', parent: null, exclude: [ 'rgb(0,0,0)', 'rgb(255,255,255)' ], normalizeTextColor: false, normalizedTextColors: { light: "#fff", dark: "#000" }, lumaClasses: { light: "ab-light", dark: "ab-dark" } }; // Include RGBaster - https://github.com/briangonzalez/rgbaster.js /* jshint ignore:start */ !function(n){"use strict";var t=function(){return document.createElement("canvas").getContext("2d")},e=function(n,e){var a=new Image,o=n.src||n;"data:"!==o.substring(0,5)&&(a.crossOrigin="Anonymous"),a.onload=function(){var n=t("2d");n.drawImage(a,0,0);var o=n.getImageData(0,0,a.width,a.height);e&&e(o.data)},a.src=o},a=function(n){return["rgb(",n,")"].join("")},o=function(n){return n.map(function(n){return a(n.name)})},r=5,i=10,c={};c.colors=function(n,t){t=t||{};var c=t.exclude||[],u=t.paletteSize||i;e(n,function(e){for(var i=n.width*n.height||e.length,m={},s="",d=[],f={dominant:{name:"",count:0},palette:Array.apply(null,new Array(u)).map(Boolean).map(function(){return{name:"0,0,0",count:0}})},l=0;i>l;){if(d[0]=e[l],d[1]=e[l+1],d[2]=e[l+2],s=d.join(","),m[s]=s in m?m[s]+1:1,-1===c.indexOf(a(s))){var g=m[s];g>f.dominant.count?(f.dominant.name=s,f.dominant.count=g):f.palette.some(function(n){return g>n.count?(n.name=s,n.count=g,!0):void 0})}l+=4*r}if(t.success){var p=o(f.palette);t.success({dominant:a(f.dominant.name),secondary:p[0],palette:p})}})},n.RGBaster=n.RGBaster||c}(window); /* jshint ignore:end */ /* Main function declaration. */ $.adaptiveBackground = { run: function( options ){ var opts = $.extend({}, DEFAULTS, options); /* Loop over each element, waiting for it to load then finding its color, and triggering the color found event when color has been found. */ $( opts.selector ).each(function(index, el){ var $this = $(this); /* Small helper functions which applies colors, attrs, triggers events, etc. */ var handleColors = function () { var img = useCSSBackground() ? getCSSBackground() : $this[0]; RGBaster.colors(img, { paletteSize: 20, exclude: opts.exclude, success: function(colors) { $this.attr(DATA_COLOR, colors.dominant); $this.trigger(EVENT_CF, { color: colors.dominant, palette: colors.palette }); } }); }; var useCSSBackground = function(){ var attr = $this.attr( DATA_CSS_BG ); return (typeof attr !== typeof undefined && attr !== false); }; var getCSSBackground = function(){ var str = $this.css('background-image'); var regex = /\(([^)]+)\)/; var match = regex.exec(str)[1].replace(/"/g, '') return match; }; /* Subscribe to our color-found event. */ $this.on( EVENT_CF, function(ev, data){ // Try to find the parent. var $parent; if ( opts.parent && $this.parents( opts.parent ).length ) { $parent = $this.parents( opts.parent ); } else if ( $this.attr( DATA_PARENT ) && $this.parents( $this.attr( DATA_PARENT ) ).length ){ $parent = $this.parents( $this.attr( DATA_PARENT ) ); } else if ( useCSSBackground() ){ $parent = $this; } else if (opts.parent) { $parent = $this.parents( opts.parent ); } else { $parent = $this.parent(); } $parent.css({ backgroundColor: data.color }); // Helper function to calculate yiq - http://en.wikipedia.org/wiki/YIQ var getYIQ = function(color){ var rgb = color.match(/\d+/g); return ((rgb[0]*299)+(rgb[1]*587)+(rgb[2]*114))/1000; }; var getNormalizedTextColor = function (color){ return getYIQ(color) >= 128 ? opts.normalizedTextColors.dark : opts.normalizedTextColors.light; }; var getLumaClass = function (color){ return getYIQ(color) <= 128 ? opts.lumaClasses.dark : opts.lumaClasses.light; }; // Normalize the text color based on luminance. if ( opts.normalizeTextColor ) $parent.css({ color: getNormalizedTextColor(data.color) }); // Add a class based on luminance. $parent.addClass( getLumaClass(data.color) ) .attr('data-ab-yaq', getYIQ(data.color)); opts.success && opts.success($this, data); }); /* Handle the colors. */ handleColors(); }); } };
})(jQuery);
Adaptive Background Colors - Script Codes
Adaptive Background Colors - Script Codes
Home Page Home
Developer Rich Wertz
Username richwertz
Uploaded January 29, 2023
Rating 3
Size 6,171 Kb
Views 6,072
Do you need developer help for Adaptive Background Colors?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Rich Wertz (richwertz) Script Codes
Name
Typing Text Effect
Video-background
Animated Menu Effect
Subtle Background Image Animation
Automatic-table-of-contents
A Pen by Rich Wertz
Hamburger Menu Animation
Content Container Animation
Image Slide In Effect
Shivering Text Effect for Navigation
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!