Design - Orbs

design-orbs.markdown

Design - Orbs

Randomly generated circles and directions animations! I wanted a nice scenery to look at as a title page - I google translated Design into Japanese so it's probably wrong but Japanese letters look amazing so :/

A Pen by Ben Sheppard on CodePen.

License.

index.html

<div class="headercontent">

<div class="circle sunset"></div>
<div class="circle coolice"></div>
<div class="circle timber"></div>
<div class="circle pig"></div>
<div class="circle friday"></div>
	
<h1>設計</h1>
</div>

script.js

// THE IDEA IS TO MAKE A CIRCLE LOOK A BIT MORE 3D THAN JUST A FLAT CIRCLE DRAGGING ACROSS THE SCREEN - THAT WOULD BE BORING AS HECK

style.less

.makeRandom(@min: 0, @max: @min+1, @int: 0) { 
  .checkInt() {
    @getNum: `Math.random() * (@{max} - @{min} + @{int})`;
    @base: unit(`@{int} == 1 ? Math.floor(@{getNum}) : @{getNum}`);
  }
  .checkInt();
  @randNum: @base + @min;
} 

 
.makeRandom2(@min2: 0, @max2: @min2+1, @int2: 0) { 
  .checkInt2() {
    @getNum2: `Math.random() * (@{max2} - @{min2} + @{int2})`;
    @base2: unit(`@{int2} == 1 ? Math.floor(@{getNum2}) : @{getNum2}`);
  }
  .checkInt2();
  @randNum2: @base2 + @min2;
}


.circle{
	left: 0;
	border-radius: 50%;
	overflow: hidden;
	position: absolute;
	z-index: 0;
	animation-direction:alternate;
	&:after{
		content:'';
		/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.2+100 */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 40%, rgba(255,255,255,0.2) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,0) 40%,rgba(255,255,255,0.2) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,255,255,0) 40%,rgba(255,255,255,0.2) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#33ffffff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
		position: absolute;
		top:0;
		left:0;
		bottom:0;
		right:0;
	}
	&.sunset{
		.makeRandom(10, 20);
		width: @randNum*1vh;
		height: @randNum*1vh;
		top: @randNum*-1vh;
		background: #00d2ff;
		background: #FF5F6D;
		background: -webkit-linear-gradient(-45deg, #FFC371, #FF5F6D);
		background: linear-gradient(-45deg, #FFC371, #FF5F6D);
		animation: orb1 30s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
		.makeRandom2(0.5, 0.9);
		opacity: @randNum2;
	}
	&.coolice{
		background: #4CA1AF;  /* fallback for old browsers */
		background: -webkit-linear-gradient(-45deg, #C4E0E5, #4CA1AF);  /* Chrome 10-25, Safari 5.1-6 */
		background: linear-gradient(-45deg, #C4E0E5, #4CA1AF); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
		.makeRandom(5, 20);
		width: @randNum*1vh;
		height: @randNum*1vh;
		top: @randNum*-1vh;
		animation: orb2 26s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
		.makeRandom2(0.5, 0.9);
		opacity: @randNum2;
	}
	&.timber{
		background: #fc00ff;
		background: -webkit-linear-gradient(45deg, #00dbde, #fc00ff);
		background: linear-gradient(45deg, #00dbde, #fc00ff);
		.makeRandom(15, 30);
		width: @randNum*1vh;
		height: @randNum*1vh;
		top: @randNum*-1vh;
		animation: orb3 43s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
		.makeRandom2(0.5, 0.9);
		opacity: @randNum2;
	}
	&.pig{
		background: #ee9ca7;
		background: -webkit-linear-gradient(to right, #ffdde1, #ee9ca7); 
		background: linear-gradient(to right, #ffdde1, #ee9ca7);
		.makeRandom(2, 40);
		width: @randNum*1vh;
		height: @randNum*1vh;
		top: @randNum*-1vh;
		animation: orb4 32s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
		.makeRandom2(0.5, 0.9);
		opacity: @randNum2;
	}
	&.friday{
  	background: #83a4d4;
		background: -webkit-linear-gradient(84deg, #b6fbff, #83a4d4); 
		background: linear-gradient(84deg, #b6fbff, #83a4d4);
		.makeRandom(2, 10);
		width: @randNum*1vh;
		height: @randNum*1vh;
		top: @randNum*-1vh;
		animation: orb5 40s cubic-bezier(0.27, 0.96, 0.58, 1) alternate infinite;
		.makeRandom2(0.5, 0.9);
		opacity: @randNum2;
	}
}
   
body{
	background: #f6f6f6;
	margin: 0;
	padding: 0;
}
h1{
	line-height: 100vh;
	text-align: center;
	font-size: 40vh;
	margin: 0;
	font-family: arial;
	z-index: 10;
	position: relative;
}


@keyframes orb1 {
	0%   { transform: translatey(150vh) translatex(0vw);  }
	.makeRandom(0, 150);
	.makeRandom2(0, 150);
	100%   { transform: translatey(@randNum*-1vh) translatex(@randNum2*1vw); }
}

@keyframes orb2 {
	0%   { transform: translatey(0vh) translatex(60vw);  }
	.makeRandom(140, 60);
	.makeRandom2(0, 200);
	100%   { transform: translatey(@randNum*1vh) translatex(@randNum2*1vw); }
}

@keyframes orb3 {
	0%   { transform: translatey(70vh) translatex(70vw);  }
	.makeRandom(40, 70);
	100%   { transform: translatey(@randNum*1vh) translatex(50vw); }
}
   
@keyframes orb4 {
	0%   { transform: translatey(50vh) translatex(10vw);  }
	.makeRandom(20, 80);
	.makeRandom2(0, 40);
	100%   { transform: translatey(@randNum*1vh) translatex(@randNum2*1vw); }
}

@keyframes orb5 {
	0%   { transform: translatey(80vh) translatex(80vw);  }
	.makeRandom(60, 120);
	.makeRandom2(0, 100);
	100%   { transform: translatey(@randNum*1vh) translatex(@randNum2*1vw); }
}



.headercontent{
	height: 100vh;
	overflow: hidden;
	position: fixed;
	top:0;
	left: 0;
	right: 0;
	width: 100vw;
	z-index: 1;
}