Canvas Portal Animation

Developer
Ali Klein
Size
4,951 Kb
Views
40,460
  1. Canvas Portal Animation Previews
  2. Canvas Portal Animation HTML Codes
  3. Canvas Portal Animation CSS Codes
  4. Canvas Portal Animation JS Codes

How do I make an canvas portal animation?

Responsive animation practice with canvas.. What is a canvas portal animation? How do you make a canvas portal animation? This script and codes were developed by Ali Klein on 11 July 2022, Monday.

Canvas Portal Animation Previews
IQ Test

Canvas Portal Animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Portal Animation </title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="wrapper"> <h2>CLICK IT</h2> <div id="triangle"></div> <div id="circle" class="animate"></div> <canvas id="portal" class="animate"></canvas> <img class="animate" src="http://aliklein.com/headset-animation/images/sony-vr.png" /> <svg version="1.1" xmlns="http://www.w3.org/2000/svg"> <filter id="blur"> <feGaussianBlur stdDeviation="10" /> </filter> </svg> <div id="beam" class="animate"></div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Canvas Portal Animation - Script Codes CSS Codes

body { margin: 0; background: #999999;
}
#wrapper { position: relative; overflow: hidden; height: 100vh;
}
#wrapper h2 { font-family: sans-serif; color: #fff; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 10px; margin: 0;
}
#wrapper #triangle { position: absolute; left: 130px; top: calc(50% - 1px); -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0; height: 0; border-style: solid; border-width: 10px 0 10px 10px; border-color: transparent transparent transparent #fff;
}
#wrapper #circle { position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 0; height: 6vw; border-radius: 50%; background: black;
}
#wrapper #circle.animate { -webkit-animation: portal 4s ease-out forwards; animation: portal 4s ease-out forwards;
}
#wrapper #beam { position: absolute; left: 50%; top: 50%; width: 40vw; height: 100vw; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); opacity: 0; -webkit-clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); /* ff3.6+ */ background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #4de1ff), color-stop(39%, rgba(77, 225, 255, 0.35)), color-stop(51%, rgba(77, 225, 255, 0)), color-stop(64%, rgba(77, 225, 255, 0.25)), color-stop(100%, #4de1ff)); /* safari4+,chrome */ background: -webkit-linear-gradient(45deg, #4de1ff 0%, rgba(77, 225, 255, 0.35) 39%, rgba(77, 225, 255, 0) 51%, rgba(77, 225, 255, 0.25) 64%, #4de1ff 100%); /* safari5.1+,chrome10+ */ /* opera 11.10+ */ /* ie10+ */ background: linear-gradient(45deg, #4de1ff 0%, rgba(77, 225, 255, 0.35) 39%, rgba(77, 225, 255, 0) 51%, rgba(77, 225, 255, 0.25) 64%, #4de1ff 100%); /* w3c */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4de1ff', endColorstr='#4de1ff',GradientType=1 ); -webkit-transition: all 3s ease-out; transition: all 3s ease-out;
}
#wrapper #beam.animate { -webkit-animation: lightBeam 4s ease-out forwards; animation: lightBeam 4s ease-out forwards;
}
#wrapper canvas { position: absolute; -webkit-transform: rotate(-30deg); transform: rotate(-30deg); opacity: 0; cursor: pointer;
}
#wrapper canvas.animate { left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%) rotate(-30deg); transform: translate(-50%, -50%) rotate(-30deg); -webkit-animation: lightSwirl 5s ease-out forwards; animation: lightSwirl 5s ease-out forwards;
}
#wrapper img { opacity: 0; pointer-events: none; -webkit-filter: url(#blur); filter: url(#blur); -webkit-filter: blur(10px); filter: blur(10px); filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='10'); position: absolute; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 15vw;
}
#wrapper img.animate { -webkit-animation: headset 4s ease-out forwards; animation: headset 4s ease-out forwards;
}
@-webkit-keyframes portal { 0% { width: 0; height: 0; } 100% { width: 16vw; height: 6vw; }
}
@keyframes portal { 0% { width: 0; height: 0; } 100% { width: 16vw; height: 6vw; }
}
@-webkit-keyframes lightSwirl { 0% { opacity: 0; width: 0; } 25% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: 1; width: 100%; }
}
@keyframes lightSwirl { 0% { opacity: 0; width: 0; } 25% { opacity: .4; } 50% { opacity: 1; } 100% { opacity: 1; width: 100%; }
}
@-webkit-keyframes headset { 0% { opacity: 0; width: 0; top: 65%; } 25% { opacity: 0; width: 0; } 35% { opacity: 1; } 70% { filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); } 97% { top: 30%; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); } 100% { opacity: 1; width: 15vw; top: 50%; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); }
}
@keyframes headset { 0% { opacity: 0; width: 0; top: 65%; } 25% { opacity: 0; width: 0; } 35% { opacity: 1; } 70% { filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); } 97% { top: 30%; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); } 100% { opacity: 1; width: 15vw; top: 50%; filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius='0'); -webkit-filter: blur(0px); filter: blur(0px); }
}
@-webkit-keyframes lightBeam { 0% { opacity: 0; -webkit-clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); } 20% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; -webkit-clip-path: polygon(0 0, 100% 0, 60% 50%, 40% 50%); clip-path: polygon(0 0, 100% 0, 60% 50%, 40% 50%); }
}
@keyframes lightBeam { 0% { opacity: 0; -webkit-clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); clip-path: polygon(45% 0, 55% 0, 55% 50%, 45% 50%); } 20% { opacity: 1; } 95% { opacity: 1; } 100% { opacity: 0; -webkit-clip-path: polygon(0 0, 100% 0, 60% 50%, 40% 50%); clip-path: polygon(0 0, 100% 0, 60% 50%, 40% 50%); }
}

Canvas Portal Animation - Script Codes JS Codes

var c = document.getElementById('portal'), ctx = c.getContext('2d'), cw = c.width = window.innerWidth,	ch = c.height = window.innerHeight, rand = function(a, b) { return ~~ ((Math.random() * (b - a + 1)) + a); }, dToR = function(degrees) { return degrees * (Math.PI / 180); }, circle = { x: (cw / 2), y: (ch / 2), radius: (cw / 15), speed: 7, rotation: 0, angleStart: 270, angleEnd: 90, hue: 195, thickness: 8, blur: 25 }, particles = [], particleMax = 100, updateCircle = function() { if (circle.rotation < 360) {	circle.rotation += circle.speed; } else {	circle.rotation = 0; } }, renderCircle = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation)); ctx.beginPath(); ctx.arc(0, 0, circle.radius, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = circle.thickness; ctx.strokeStyle = gradient1; ctx.stroke(); ctx.restore(); }, renderCircle2 = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation + 100)); ctx.beginPath(); ctx.arc(0, 0, circle.radius + 15, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = circle.thickness; ctx.strokeStyle = gradient1; ctx.stroke(); ctx.restore(); }, renderCircle3 = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation + 200)); ctx.beginPath(); ctx.arc(0, 0, circle.radius - 15, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = circle.thickness; ctx.strokeStyle = gradient1; ctx.stroke(); ctx.restore(); }, renderCircleBorder = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation)); ctx.beginPath(); ctx.arc(0, 0, circle.radius + (circle.thickness/5), dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = 5; ctx.strokeStyle = gradient2; ctx.stroke(); ctx.restore(); }, renderCircleBorder2 = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation + 100)); ctx.beginPath(); ctx.arc(0, 0, circle.radius + 15, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = 5; ctx.strokeStyle = gradient2; ctx.stroke(); ctx.restore(); }, renderCircleBorder3 = function() { ctx.save(); ctx.translate(circle.x, circle.y); ctx.transform(1,0,1,1,0,0); ctx.rotate(dToR(circle.rotation + 200)); ctx.beginPath(); ctx.arc(0, 0, circle.radius - 15, dToR(circle.angleStart), dToR(circle.angleEnd), true); ctx.lineWidth = 5; ctx.strokeStyle = gradient2; ctx.stroke(); ctx.restore(); }, clear = function(){ ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = 'rgba(0, 0, 0, .1)'; ctx.fillRect(0, 0, cw, ch); ctx.globalCompositeOperation = 'lighter'; }, loop = function() { clear(); updateCircle(); renderCircle(); renderCircle2(); renderCircle3(); renderCircleBorder(); renderCircleBorder2(); renderCircleBorder3(); }, resize = function() { clear(); c.width = window.innerWidth, c.height = window.innerHeight, circle.x = window.innerWidth/2, circle.y = window.innerHeight/2, circle.radius = window.innerWidth/15; updateCircle(); renderCircle(); renderCircle2(); renderCircle3(); renderCircleBorder(); renderCircleBorder2(); renderCircleBorder3(); }
ctx.shadowBlur = circle.blur;
ctx.shadowColor = 'hsla('+ circle.hue +', 80%, 60%, 1)';
ctx.lineCap = 'round'
var gradient1 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient1.addColorStop(0, 'hsla('+ circle.hue +', 60%, 50%, .25)');
gradient1.addColorStop(1, 'hsla('+ circle.hue +', 60%, 50%, 0)');
var gradient2 = ctx.createLinearGradient(0, -circle.radius, 0, circle.radius);
gradient2.addColorStop(0, 'hsla('+ circle.hue +', 100%, 50%, 0)');
gradient2.addColorStop(.1, 'hsla('+ circle.hue +', 100%, 100%, .7)');
gradient2.addColorStop(1, 'hsla('+ circle.hue +', 100%, 50%, 0)');
setInterval(loop, 7);
$(window).resize(resize); setTimeout(function(){ circle.speed = 2.5; }, 4000);
$('canvas').click(function() { var self = $(this), $circle = $('#circle'), $headset = $('img'), $beam = $('#beam'), animate = 'animate'; circle.speed = 7; self.removeClass(animate); $circle.removeClass(animate); $headset.removeClass(animate); $beam.removeClass(animate); setTimeout(function(){ self.addClass(animate); $circle.addClass(animate); $headset.addClass(animate); $beam.addClass(animate); setTimeout(function(){ circle.speed = 2.5; }, 4000); }, 250);
});
Canvas Portal Animation - Script Codes
Canvas Portal Animation - Script Codes
Home Page Home
Developer Ali Klein
Username AliKlein
Uploaded July 11, 2022
Rating 3
Size 4,951 Kb
Views 40,460
Do you need developer help for Canvas Portal Animation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Ali Klein (AliKlein) Script Codes
Name
Wobbly Button Snap SVG Morph
Greensock Animated Donut Chart
Vertical Scrolling Pagination
Youtube API Multiple Videos
CSS Motion Path Airplane
Animate text script path.
Paper.js Play
Momentum Scrolling
SVG Morph Bounce
David Bowie SVG Morph
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!