Farbenspiel

Das Farbenspiel ist zwar eine Spielerei mit überschaubarer Programmierung, aber das CSS hierfür ist das Interessante daran. Sehr gern arbeite ich mit den Pseudoelementen :before und :after.
Es ist erkennbar, dass ich im JavaScript immer mit der Zuweisung EventListener arbeite, was man sich grundsätzlich angewöhnen sollte.

Wenn Ihr Anregungen oder Kommentare zum Farbspiel oder zur Programmierung habt, seid so nett und kontaktiert mich unter: Kontakt

Kopiert Euch gerne den Code und probiert es aus: Code

RGBA Steuerung:

Rot:

Grün:

Blau:

Alpha/Transparents

Code


HTML:

<div class="kreis-aussen">
	<div id="k_02" class="kreis-2">	
	</div>
</div>

<div class="steuerung">
	RGBA Steuerung:
	<p>
		Rot:<br>
		<output id="output_r" for="color_r"></output>
		<input type="range" id="color_r" 
		name="color_r" min="0" max="255" 
		step="1.0" value="0">
	</p>
	<p>
		Grün:<br>
		<output id="output_g" for="color_g"></output>
		<input type="range" id="color_g" 
		name="color_g" min="0" max="255" 
		step="1.0" value="255">
	</p>
	<p>
		Blau:<br>
		<output id="output_b" for="color_b"></output>
		<input type="range" id="color_b" 
		name="color_b" min="0" max="255" 
		step="1.0" value="70">
	</p>
	<p>
		Alpha/Transparents<br>
		<output id="output_a" for="color_a"></output>
		<input type="range" id="color_a" 
		name="color_a" min="0" max="1" 
		step=".1" value="1">
	</p>
</div>



CSS:

.kreis-aussen{
	position:relative;
	z-index:10;
	width:250px;
	height:250px;
	background-color:transparent;
	border-radius:50%;
	overflow:hidden;
	margin:35% 0;
	animation: spinn 28s infinite;
	animation-timing-function: linear;
}

@keyframes spinn {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(360deg);
  }
}
	
	.kreis-aussen:before, .kreis-aussen:after {
		content: ' ';
		position: absolute;
		z-index: 20;
		width: 247px;
		height: 10px;
		background-color: black;
		border: 1px solid black;
	}
	.kreis-aussen:before{
		left: 0px;
		top: 119px;
		-moz-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	.kreis-aussen:after{
		right: 0px;
		bottom: 118px;
		-moz-transform: rotate(-45deg);
		-ms-transform: rotate(-45deg);
		-o-transform: rotate(-45deg);
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	
.kreis-2{
	width:200px;
	height:200px;
	background-color:black;
	border-radius:50%;
	border-top:25px solid    rgba(0,225,70,1);
	border-right:25px solid  rgba(0,255,70,1);
	border-bottom:25px solid rgba(0,255,70,1);
	border-left:25px solid   rgba(0,255,70,1);
}


/* START::: Regler anpassen */
.steuerung{
	margin-left:100px;
}

.steuerung p{
	border-bottom: 1px dotted var(--white);
    padding-bottom: 10px;
}

output{
	display:inline-block;
	width:40px;
	height:25px;
	line-height:25px;
	border:1px solid var(--skillflow-base-font-color);
	padding:4px;
}

input[type="range"]{
	width:300px;
}

/* ENDE::: Regler anpassen */



JavaScript:

// Array für die RGBA - Werte setzen 
let colors = new Array;
	colors['r'] = '0';
	colors['g'] = '255';
	colors['b'] = '70';
	colors['a'] = '1';

let cont 	= 0;
let slider 	= '';

while(slider = document.querySelectorAll('input[type="range"]')[cont]){
	// Hole den letzten Buchstabe aus der 
	// Slider-ID (r,g,b oder a)
	let prefix  = slider.id.replace('color_', '');
	
	// ID für den jeweiligen Output zusammenbauen 
	let output_id = '#output_'+prefix;
	
	// Output zuweisen und den Wert vom 
	// jeweiligen Slirer zuweisen
	let myOutput = document.querySelector(output_id);
	myOutput.innerText = slider.value; // Initial
	
	// Dem jeweiligen Slider eventListener zuweisen
	slider.addEventListener('input', function () {
		writeSliderValueToOutput(prefix);
	});
	
	cont++;
}

function writeSliderValueToOutput(prefix){	
	// ID f&uunl;r den jeweiligen Output zusammenbauen
	// prefix => r,g,b oder a
	let outputId = '#output_'+prefix;
	
	// Value des Sliders merken
	let colorValue = document.querySelector('#color_'+prefix).value;
	
	// Value von Slider dem jeweiligem Output zuweisen
	document.querySelector(outputId).innerText = colorValue; 
	
	// RGBA dem Array übergeben
	if(prefix == 'r'){
		colors[prefix] = colorValue;
	}
	if(prefix == 'g'){
		colors[prefix] = colorValue;
	}
	if(prefix == 'b'){
		colors[prefix] = colorValue;
	}
	if(prefix == 'a'){
		colors[prefix] = colorValue;
	}
}

let countBorders = 1;
function changeBorder(){
	
	// Auf das Element verweisen
	const borderElem = document.querySelector('.kreis-2');
	
	// Counter zurücksetzen
	if(countBorders > 4){
		countBorders = 1;
	}
	
	// Den Border die Farbe zuweisen 
	if( countBorders === 1 ){
		borderElem.style.borderTopColor = 
		'rgba('+colors["r"]+
		','+colors["g"]+','+colors["b"]+','+colors["a"]+')';
	}	
	if( countBorders === 2 ){
		borderElem.style.borderLeftColor = 
		'rgba('+colors["r"]+
		','+colors["g"]+','+colors["b"]+','+colors["a"]+')';
	}
	if( countBorders === 3 ){
		borderElem.style.borderBottomColor = 
		'rgba('+colors["r"]+
		','+colors["g"]+','+colors["b"]+','+colors["a"]+')';
	}
	if( countBorders === 4 ){
		borderElem.style.borderRightColor = 
		'rgba('+colors["r"]+
		','+colors["g"]+','+colors["b"]+','+colors["a"]+')';
	}
		
	++countBorders;
}

// Aufruf und Interval setzen nach 2 Sec.
changeBorder();
const borderInterval = setInterval(changeBorder,2000); 

// SetInterval killen
window.addEventListener("pagehide", function(){
	clearInterval(borderInterval);
});