cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <!-- Each '.color-changing' element will reacieve basic css for its transition and starting color. Everything else color rlated happens in JavaScript -->

<div class="color-changing circle">
	<span class="text">3</span>
</div>
<div class="color-changing color-changing--delay1 circle">
	<span class="text">2</span>
</div>
<div class="color-changing color-changing--delay2 circle">
	<span class="text">1</span>
</div>
            
          
!
            
              $radius: 180px;
html {
	height: 90%;
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: hsl(0, 0%, 50%);
}
.circle {
	display: inline-block;
	width: $radius;
	height: $radius;
	margin-left: $radius/20;
	margin-right: $radius/20;
	text-align: center;
	border-radius: 50%;
}
.circle .text {
	display: block;
	position: relative;
	top: -9%;
	font-size: $radius;
	font-weight: bold;
	font-family: Georgia, serif;
	font-variant-numeric: lining-nums;
}
.color-changing {
	background-color: hsl(0, 0%, 100%); // starting color
	transition: background-color 1.5s ease, color 1.5s ease;
}
.color-changing--delay1 {
	transition-delay: all 0.333s;
}
.color-changing--delay2 {
	transition-delay: all 0.666s;
}

            
          
!
            
              const colorFormat = {
	'hsl' : (hue, saturation, lightness) => 'hsl('+hue+', '+saturation+'%, '+lightness+'%)'
	// colorFromat.hsl() returns a string formated as css hsl color out of
	// three inputed numbers: hue, saturation and lightness
}

const distribution = {
	'linear' :     (min, max) => Math.floor(Math.random() * (max - min + 1)) + min,
	'triangular' : (min, max) => Math.floor(Math.abs(Math.random() - Math.random()) * (max - min + 1)) + min
	// distribution functions returns an integer between an given minimum and maximum,
	// using the selected interpolation method
}

const cssPropertiesObject = (propertyObjectArray) => {
	const jQueryCSS = { }
	propertyObjectArray.forEach(
		property => {
			switch(property.propertyValue) {
				case 'random-color-hsl':
					// random-hsl gives a randomized hsl color css property value
					!property.hue[2]        ? property.hue[2]        = 'linear' : null
					!property.saturation[2] ? property.saturation[2] = 'linear' : null
					!property.lightness[2]  ? property.lightness[2]  = 'linear' : null
					// distribution defaults to linear if not defined
					jQueryCSS[property.propertyName] = colorFormat.hsl(
						// and then each color component is randomized
						distribution[property.hue[2]       ]( property.hue[0],        property.hue[1]        ),
						distribution[property.saturation[2]]( property.saturation[0], property.saturation[1] ),
						distribution[property.lightness[2] ]( property.lightness[0],  property.lightness[1]  )
					)
					break;
				default:
					jQueryCSS[property.propertyName] = property.propertyValue
					// if no case is matched, then the propertyValue
					// is immediately assigned to its key
			}
		}
	)
	return jQueryCSS
}
// cssPropertiesObject() returns an usable jQuery .css() object.
// It takes as input an array of special objects with custom keys
// and parses each special object into a single key/value pair
// that is assigned into the returned object.

function loopChangeCSS(selector, interval) {
	const propertyObjectArray = Array.from(arguments).splice(2, arguments.length)
	function changeCSS(element) {
		$(element).css(cssPropertiesObject(propertyObjectArray))
	}
	$(selector).each(function() {
		changeCSS($(this))
		setInterval( ()=>changeCSS($(this)), interval)
	})
}
// loopChangeCSS() changes defined css properties of each element
// that matches a given jQuery selector once immediately
// and then again at a set interval

loopChangeCSS(
	'.color-changing',
	1750,
	{
		'propertyName' : 'background-color',
		'propertyValue' : 'random-color-hsl',
		'hue' : [0, 360, 'linear'],
		'saturation' : [50, 100, 'triangular'],
		'lightness' : [75, 95, 'linear']
		}, {
		'propertyName' : 'color',
		'propertyValue' : 'random-color-hsl',
		'hue' : [0, 360, 'linear'],
		'saturation' : [90, 100, 'linear'],
		'lightness' : [15, 25, 'linear']
	}
)

            
          
!
999px
Loading ..................

Console