1. Neon Bubbles
Moving and animating neons bubbles.
HTML Code Of Neon Bubbles Effect
CSS Code Of Neon Bubbles Effect
body {
background: hsl(235,60%,13%); /*#051a41;*/
margin: 0;
overflow: hidden;
}JavaScript Code Of Neon Bubbles Effect
(function() {
"use strict";
// Canvas things
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
canvasWidth = canvas.width = window.innerWidth,
canvasHeight = canvas.height = window.innerHeight;
// Mouse things
var mouseX,
mouseY,
pop = false,
attract = false;
// Check if mouse event is over a bubble
var mouseOver = function(x, y, radius) {
var diffX = mouseX - x;
var diffY = mouseY - y;
if (diffX < radius && diffX > (radius * -1) && diffY < radius && diffY > (radius * -1)) {
return true;
}
return false;
}
// Used for randomizing everything
var randomNum = function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
};
// Used for changing settings with a random number
var changeSettings = function(setting, min, max, prob) {
var chance = randomNum(0, prob);
if(setting < min || chance === 1) {
return 1;
} else if (setting > max || chance === 2) {
return -1;
} else {
return 0;
}
};
// Bubble config
var bubbles = [], // Holds all the bubbles as objects
count = 0, // Bubble count
maxCount = 10, // Max bubbles to render on start
maxSize = 100,
minSize = 5,
minSpeed = 5,
maxSpeed = 10,
bgcolor = 'hsl(235,60%,13%)', // Canvas bg
colors = [ // Color palette
{ color1 : '#fa4c2b', color2 : '#6aff6e'},
{ color1 : '#ffff82', color2 : '#ffce72'},
{ color1 : '#fa4c2b', color2 : '#0bfcff'}
];
// Bubble constructor
var Bubble = function(x, y, size) {
this.id = count+1;
this.x = x || randomNum(0, canvasWidth);
this.y = y || randomNum(0, canvasHeight);
this.radius = size || randomNum(minSize, maxSize);
this.color = colors[randomNum(0,colors.length-1)];
this.speed = randomNum(minSpeed, maxSpeed)/10;
this.speedBackup = this.speed;
this.directionX = randomNum(-1,1) || 1;
this.directionY = randomNum(-1,1) || 1;
this.flicker = 0;
count++; // Number bubbles
bubbles[count] = this; // Add to main object
};
// When popping a bubble
Bubble.prototype.destroy = function() {
// Generate number of smaller bubbles based on radius
var popCount = this.radius/10 > 0 ? this.radius/10 : 2;
// Generate smaller bubbles, size based on radius
for(var i = 0; i < popCount; i++) {
new Bubble(this.x, this.y, randomNum(this.radius/4,this.radius/2));
}
// Make popped bubble smaller and change color
this.radius = randomNum(this.radius/4,this.radius/2);
this.color = colors[randomNum(0,colors.length-1)];
};
// Bubble drawing animation
Bubble.prototype.draw = function() {
// Change direction randomly, default to same direction
this.directionX = changeSettings(this.x, 0, canvasWidth, 500) || this.directionX;
this.directionY = changeSettings(this.y, 0, canvasHeight, 500) || this.directionY;
// Reset speed
this.speed = this.speedBackup;
// If mouse is held down & bubble is within 200px of mouse
if (attract === true && mouseOver(this.x,this.y,200)) {
var moveTowardMouse = randomNum(0,15); // Chance of being attracted by mouse
if(moveTowardMouse === 5){
this.directionX = mouseX - this.x > 0 ? 1 : -1;
} else if (moveTowardMouse === 1) {
this.directionY = mouseY - this.y > 0 ? 1 : -1;
}
this.speed = 1.25; // Speed up
}
// Move bubbles
this.x += this.speed * this.directionX;
this.y += this.speed * this.directionY;
// Change radius
this.radius += changeSettings(this.radius, minSize, maxSize, 15);
// Draw the bubbles
ctx.save();
ctx.globalCompositeOperation = 'color-dodge';
ctx.beginPath();
var gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius);
gradient.addColorStop(0, this.color.color1);
gradient.addColorStop(0.5, this.color.color2);
gradient.addColorStop(1, 'rgba(250,76,43,0)');
ctx.arc(this.x, this.y, this.radius, 0, Math.PI*2, true);
ctx.fillStyle = gradient;
ctx.fill();
ctx.closePath();
ctx.restore();
// Pop bubbles if mouse coords match
if(pop === true && mouseOver(this.x,this.y,this.radius)) {
bubbles[this.id].destroy();
pop = false;
}
};
// Create initial bubbles
for (var i = 0; i < maxCount; i++) {
new Bubble();
}
// Call animation
var animate = function() {
// Clear canvas and fill with background color
ctx.fillStyle = bgcolor;
ctx.fillRect(0, 0, canvasWidth, canvasHeight);
// Draw bubbles
for (var i = 1; i <= count; i++) {
bubbles[i].draw();
}
requestAnimationFrame(animate);
};
requestAnimationFrame(animate);
// Click to add new bubble
canvas.addEventListener('click',function(e){
new Bubble(e.pageX, e.pageY);
});
// Sets mouse coords for popping bubbles
canvas.addEventListener('contextmenu',function(e){
mouseX = e.pageX;
mouseY = e.pageY;
pop = true;
e.preventDefault();
});
// Attract bubbles
var startAttracting;
canvas.addEventListener('mousedown',function(e){
mouseX = e.pageX;
mouseY = e.pageY;
// Wait 0.5s before attracting bubbles
clearTimeout(startAttracting);
startAttracting = setTimeout(function(){
return attract = true;
}, 500);
});
// If mouse held down, update coords as the mouse moves
canvas.addEventListener('mousemove',function(e){
if(attract) {
mouseX = e.pageX;
mouseY = e.pageY;
}
});
// Clear attract
canvas.addEventListener('mouseup',function(e){
clearTimeout(startAttracting);
attract = false;
});
// Resize canvas with window resize
var resizing;
window.addEventListener('resize', function(){
clearTimeout(resizing);
resizing = setTimeout(function(){
canvasWidth = canvas.width = window.innerWidth;
canvasHeight = canvas.height = window.innerHeight;
}, 500);
});
}());2. Rainbow Bird
A rainbow bird is a beautiful flying bird with different colors effects.
HTML
CSS
BODY {
overflow: hidden;
background: #000;
}
.svg {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
&--rays {
width: 100%;
height: 100%;
}
&--bird {
top: -60px;
left: -30px;
width: 280px;
height: 280px;
}
}
.stop-color {
stop-color: crimson;
animation: colors 3s linear infinite;
&--2 {
animation-delay: -1s;
}
&--3 {
animation-delay: -.5s;
}
&--4 {
animation-delay: -2s;
}
&--5 {
animation-delay: -2.5s;
}
&--6 {
animation-delay: -1.5s;
}
}
@keyframes colors {
0% {
stop-color: maroon;
}
10% {
stop-color: crimson;
}
20% {
stop-color: orangered;
}
30% {
stop-color: gold;
}
40% {
stop-color: yellowgreen;
}
50% {
stop-color: skyblue;
}
60% {
stop-color: steelblue;
}
70% {
stop-color: slateblue;
}
80% {
stop-color: darkviolet;
}
90% {
stop-color: purple;
}
}
.svg--bird {
animation: up-down 1.68s infinite ease-out;
}
@keyframes up-down {
50% {
transform: translate(0, 30px);
}
}
.c-rays {
stroke: hsl(0, 0, .9);
stroke-width: 100%;
stroke-dasharray: 5%;
animation: rotate 20s linear infinite;
transform-origin: 50% 50%;
}
@keyframes rotate {
100% {
transform: rotate(360deg);
}
}3. Butterflies Drink Dark Matter/ Circular Ball Motion
HTML
CSS
$side: 15em;
$half-side: $side/2;
$wing-width: $side * .8;
$wing-height: $side * .4;
$wing-offset: ($side - $wing-width)/2;
$wing-angle: 40;
$wing-angle-1: #{-90 + $wing-angle}deg;
$wing-angle-2: #{-90 - $wing-angle}deg;
$wing-time: .7s;
$wing-time-step: $wing-time/6;
$depth: 2em;
$shadow-width: 2em;
BODY {
perspective: 1000px;
perspective-origin: center center;
overflow: hidden;
font-size: 14px;
background: #000;
background-image: linear-gradient(
to right,
hsla(0, 0%, 100%, .025) 50%,
transparent 30%
);
background-size: 2rem 100%;
}
.container {
width: $side;
height: $side;
transform-style: preserve-3d;
animation: rotate 15s infinite linear;
}
.cube {
position: absolute;
width: $side;
height: $side;
// outline: 2px solid gold;
transform-style: preserve-3d;
&--2 {
transform: rotateX(135deg) rotateY(135deg);
}
&--3 {
// display: none;
transform: rotateX(135deg) rotateZ(135deg);
}
}
.side {
position: absolute;
width: $side;
height: $side;
transform-style: preserve-3d;
}
.spot {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
width: 45%;
height: 45%;
// border: 1px dashed white;
box-shadow: 0 0 35px 25px black inset;
border-radius: 50%;
transform-style: preserve-3d;
&::before, &::after {
content: "";
display: block;
position: absolute;
top: 50%;
left: 50%;
margin-top: -$wing-height/2;
margin-left: -$wing-width/2;
width: $wing-width;
height: $wing-height;
box-sizing: border-box;
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 16'%3E%3Cpath d='M13 11.3L15.2 9c.6.2 1.6.8 2.4 1.4-1 .6-2.3 1.5-3.5 2-1.3.6-2.7 2-3.5 3 .2-1 1-2.8 2.2-4zm-8.6.3c-1.5-2.2-3-5-3.7-7L6.5 12l-2-.4zM12.6 8c2-.6 3.2-4.4 4.8-3l.5.7-3 2.8c-1 .8-1.8 1.7-2.5 2.4-1 1-1.7 2.2-2 3.3 0-1.2.7-2.6 1.2-4l1-2.3zm-7 1c0-.6 0-1.3-.2-2.5 1 .6 3 1.7 3.4 2.4v1c0 1.8.3 3.6.6 4.7l-4-5c0-.2 0-.4.2-.7zm-.3-3c-.6-2-2-4.5-2.7-6C4 .6 6 1.8 7.6 3v2.4c-.2.7-.2 1.5-.2 2L5.4 6zm-.6 6c.8 0 1.7.3 2.2.5l2.5 3.2c-.4 0-.7 0-1-.2-1-.2-2.5-1.6-3.8-3.5zm13-2l-2-1.3L18 6.3c.4 1 .2 2.4-.2 3.7zM11 16c.8-1 2.2-2.5 3.5-3 1-.5 2-1 3-1.7-.5 1-1 2-1.4 2.5-1 1.4-3 2-5 2zm-.8-10.4c.6 1 1 1.7 1.2 2.4h.5l-.8 2.2c-.6 1.2-1 2.6-1.3 4-.4-1.3-.6-2.8-.6-4.3 0-1.7.4-3.3.8-4.4zM4.7 6C5 7.7 5 8.7 5 9L.2 3C0 1.8 0 .8.4.4.8 0 1.2 0 1.8 0c.7 1.2 2.3 4 3 6zm3 1.6c0-1.7 0-3.5.3-4.2.7.5 1.3 1 1.8 1.7-.4 1-.7 2-1 3.5l-1-1z'/%3E%3C/svg%3E");
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center bottom;
animation: wing $wing-time infinite;
// animation: bg-size 10s infinite;
}
&::before {
transform: rotateX($wing-angle-1) translateY(-50%);
color: gold;
}
&::after {
transform: rotateX($wing-angle-2) translateY(-50%);
color: teal;
}
&--top {
&::before,
&::after {
background: linear-gradient(
to bottom,
indigo 10%,
teal,
gold,
red
);
animation-delay: -$wing-time-step;
}
}
&--bottom {
&::before,
&::after {
background: linear-gradient(
to top,
indigo 10%,
teal,
gold,
red
);
animation-delay: -$wing-time-step*2;
}
}
&--left {
&::before,
&::after {
background: linear-gradient(
to bottom,
indigo 10%,
crimson,
gold,
lawngreen,
teal
);
animation-delay: -$wing-time-step*3;
}
}
&--right {
&::before,
&::after {
background: linear-gradient(
to top,
indigo,
crimson,
gold,
lawngreen,
teal 90%
);
animation-delay: -$wing-time-step*4;
}
}
&--back {
&::before,
&::after {
background: linear-gradient(
to top,
teal,
darkgreen,
lawngreen,
gold,
orangered,
red 90%
);
animation-delay: -$wing-time-step*5;
}
}
&--front {
&::before,
&::after {
background: linear-gradient(
to bottom,
teal 10%,
darkgreen,
lawngreen,
gold,
orangered,
red
);
animation-delay: -$wing-time-step*6;
}
}
}
.side--back {
transform: translateZ(-$half-side) rotateY(180deg);
}
.side--left {
transform: translateX(-$half-side) rotateY(-90deg);
}
.side--right {
transform: translateX($half-side) rotateY(90deg);
}
.side--top {
transform: translateY(-$half-side) rotateX(90deg);
}
.side--bottom {
transform: translateY($half-side) rotateX(-90deg);
}
.side--front {
transform: translateZ($half-side);
}
@keyframes rotate {
100% {
transform: rotateX(360deg) rotateY(720deg) rotateZ(360deg);
}
}
@keyframes wing {
50% {
transform: rotateX(-90deg) translateY(-50%);
}
}
@keyframes bg-size {
0% {
background-size: 100% 100%;
background-position: 0 50%;
}
50% {
background-size: 100% 200%;
background-position: 0 0%;
}
100% {
background-size: 100% 100%;
background-position: 0 50%;
}
}
// Helpers
HTML, BODY {
height: 100%;
}
BODY {
display: flex;
justify-content: center;
align-items: center;
}
.wings-src {
position: absolute;
bottom: 10px;
right: 10px;
opacity: .075;
font: 12px/1.4 Tahoma, sans-serif;
text-align: right;
transition: .4s all;
color: #FFF;
&:hover {
opacity: .5;
}
A {
color: inherit
}
}
0 Comments
Welcome! Please Comment Without Any Hesitation.
Thank You