🐝 & 🌹

.markdown

🐝 & 🌹

🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝🌹🐝

A Pen by Corey Wofford on CodePen.

License.

index.html

<div class="scene"></div>

<div class="info">click to add more <span>🐝</span>'s</div>

script.js

console.clear();

const scene = document.querySelectorAll('.scene')[0];
let maxFlowers = window.innerWidth * .01;
let colors = ['crimson', '#3498db', '#e67e22', '#f1c40f', '#9b59b6'];
let bees = [];

const randomInRange = (min, max) => Math.floor((Math.random() * (max - min + 1)) + min);

class Flower {
	constructor(x, height, color) {
		this.x = x;
		this.height = height;
		this.color = color;
		this.el;
		this.create();
	}
	
	create() {
		this.el = document.createElement('div');
		this.el.classList.add('scene__flower');
		this.el.style.left = `${this.x}%`;
		this.el.style.height = `${this.height}vmin`;
		
		let flowerHead = document.createElement('div');
		flowerHead.classList.add('scene__flower__head');
		flowerHead.style.background = this.color;
		
		this.el.appendChild(flowerHead);
		scene.appendChild(this.el);
	}
}


class Bee {
	constructor(x, y, cursorX, size) {
		this.x = x;
		this.y = y;
		this.size = size;
		this.cursorX = cursorX;
		this.moving = true;
		this.el;
		this.create();
	}
	
	create() {
		let head = document.createElement('div');
		head.classList.add('bee__head');
		this.el = document.createElement('div');
		this.el.appendChild(head);
		this.el.classList.add('bee');
		// Math.random() < 0.5 ? this.el.classList.add('bee--left') : this.el.classList.add('bee--right');
		this.el.style.width = `${this.size}px`;
		this.el.style.height = `${this.size*.7}px`;
		this.el.style.top = `${this.y}px`;
		this.el.style.left = `${this.x}px`;
		document.body.appendChild(this.el);
		
		this.fly();
		this.loop();
	}
	
	fly() {
		const self = this;
		let flowers = document.querySelectorAll('.flower');
		let target = flowers[Math.floor(Math.random() * flowers.length)];
		let targetHead = target.querySelectorAll('.flowerhead')[0];
		let targetLeft = targetHead.offsetLeft + target.offsetLeft,
				targetTop = targetHead.offsetTop + target.offsetTop,
				targetRight = targetLeft + targetHead.offsetWidth,
				targetBot = targetTop + targetHead.offsetHeight;
		
		let moveTo = {};
		moveTo.x = randomInRange(targetLeft, targetRight) - this.size / 2;
		moveTo.y = randomInRange(targetTop, targetBot) - this.size / 2;
		
		console.log(moveTo.x);
		console.log(this.cursorX);
		if (moveTo.x > this.cursorX) this.el.classList.add('bee--right');
		
		TweenMax.to(this.el, 4, {
			left: moveTo.x,
			top: moveTo.y,
			ease: Power4.easeOut,
			onComplete: function() {
				self.moving = false;
			}
		});
	}
	
	loop() {
		setTimeout(() => {
			this.loop();
		}, 1000);
		if (this.moving) return;
		Math.random() < 0.5 ? this.el.classList.add('bee--right') : this.el.classList.remove('bee--right');
	}
}


/* create flowers */
document.addEventListener("DOMContentLoaded", function() {
	for (let i = 0; i < maxFlowers; i++) {
		let x = randomInRange(0, 100);
		let height = randomInRange(15, 25);
		let color = colors[Math.floor(Math.random() * colors.length)];
		let flower = new Flower(x, height, color);
	}
	
	/* add some bees for demonstration */
	let i = 0;
	const createStartingBees = () => {
		let size = randomInRange(20, 100);
		let x = randomInRange(0, window.innerWidth);
		let y = randomInRange(0, window.innerHeight / 2);
		let bee = new Bee((x - size / 2), (y - size / 2), x, size);
		bees.push(bee);
		
		setTimeout(() => {
			i++;
			if (i < 6) createStartingBees();
		}, 250);
	}
	setTimeout(() => {
		createStartingBees();
	}, 250);
});


/* add some 🐝 */
document.addEventListener('click', function(e) {
	let size = randomInRange(20, 100);
	let bee = new Bee((e.clientX - size / 2), (e.clientY - size / 2), e.clientX, size);
	bees.push(bee);
});

/* remove the 🐝 */
window.addEventListener('resize', function() {
	bees.forEach((bee, i) => {
		bee.el.remove();
		bees.splice(i, 1);
	});
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

style.scss

$green: #27ae60;
$blue: lightblue;
$sky-blue: #CFFFFF;

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	width: 100%;
	height: 100%;
  font-size: 18px;
}

body {
  width: 100%;
  height: 100%;
  display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	user-select: none;
}


.info {
	position: fixed;
	z-index: -1;
	color: darken($blue, 10%);
	font-size: 2rem;
	
	span {
		opacity: .2;
	}
}

.scene {
	width: 100%;
	height: 100%;
	background: $blue;
	z-index: -2;
	box-shadow: inset 0 -1rem 0 $green;
	
	&__flower {
		position: absolute;
		margin: auto;
		bottom: 0;
		left: 0;
		background: $green;
		width: 1vmin;
		height: 20vmin;
		
		&__head {
			position: absolute;
			bottom: 100%;
			width: 600%;
			height: 80%;
			background: crimson;
			border-top-right-radius: 50%;
			border-top-left-radius: 50%;
			border-bottom-right-radius: 35% 40%;
			border-bottom-left-radius: 35% 40%;
			box-shadow: inset 0 -20vmin 20vmin rgba(0,0,0,.4);
			
			left: calc(-300% + .5vmin);
			
			&:before, &:after {
				content: '';
				position: absolute;
				bottom: -5%;
				width: 100%;
				height: 120%;
				border-top-right-radius: 50%;
				border-top-left-radius: 50%;
				border-bottom-right-radius: 35% 40%;
				border-bottom-left-radius: 35% 40%;
				background: darken(crimson, 20%);
				background: inherit;
				transform-origin: 50% 100%;
			}
			
			&:before {
				left: -25%;
				transform: rotate(-10deg);
			}
			
			&:after {
				right: -25%;
				transform: rotate(10deg);
			}
		}
	}
}


.bee {
	width: 200px;
	height: 200px * .7;
	
	background: gold;
	border-radius: 50%;
	position: absolute;
	background-image: linear-gradient(90deg, transparent 50%, rgba(0,0,0,1) 50%);
	background-size: 25% 25%;
	
	&--right {
		transform: scaleX(-1);
	}
	
	&:before, &:after {
		content: '';
		position: absolute;
		margin: auto;
		opacity: .6;
	}
	
	&:before {
		width: 40%;
		padding-top: 80%;
		background: $sky-blue;
		border-radius: 10000px;
		bottom: 90%;
		left: 0;
		right: 10%;
		transform: rotate(20deg);
		transform-origin: 50% 100%;
		z-index: -1;
		animation: flap .1s linear infinite alternate;
	}
	
	&:after {
		width: 40%;
		padding-top: 80%;
		background: $sky-blue;
		border-radius: 10000px;
		bottom: 90%;
		left: 10%;
		right: 0;
		transform: rotate(20deg);
		transform-origin: 50% 100%;
		animation: flap1 .1s linear infinite alternate;
	}
	
	@keyframes flap {
		from {transform: rotate(20deg);}
		to {transform: rotate(-25deg);}
	}
	@keyframes flap1 {
		from {transform: rotate(35deg);}
		to {transform: rotate(-10deg);}
	}
	
	&__head {
		position: absolute;
		margin: auto;
		width: 50%;
		padding-top: 50%;
		background: #000;
		top: 50%;
		left: -30%;
		transform: translateY(-50%);
		border-radius: 50%;
		
		&:before, &:after {
			content: '';
			position: absolute;
			margin: auto;
		}
		
		&:before {
			width: 40%;
			padding-top: 40%;
			top: 50%;
			left: 15%;
			transform: translateY(-50%);
			border-radius: 50%;
			background: radial-gradient(circle, rgba(0,0,0,1) 40%, rgba(255,255,255,1) 50%);
		}
		
		&:after {
			width: 5%;
			padding-top: 40%;
			background: #000;
			border-radius: none;
			bottom: 90%;
			left: 0;
			right: 0;
			transform: rotate(20deg);
			transform-origin: 0 100%;
		}
	}
}