A Pen by Andrey Shchekin

Developer
Andrey Shchekin
Size
2,336 Kb
Views
12,144
  1. A Pen by Andrey Shchekin Previews
  2. A Pen by Andrey Shchekin HTML Codes
  3. A Pen by Andrey Shchekin CSS Codes
  4. A Pen by Andrey Shchekin JS Codes

How do I make an a pen by andrey shchekin?

What is a a pen by andrey shchekin? How do you make a a pen by andrey shchekin? This script and codes were developed by Andrey Shchekin on 15 November 2022, Tuesday.

A Pen by Andrey Shchekin Previews
IQ Test

A Pen by Andrey Shchekin - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Andrey Shchekin</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Andrey Shchekin - Script Codes CSS Codes

html, body { margin: 0; padding: 0; height: 100%; width: 100%;
}
canvas.main { position: absolute; opacity: 0.5; top: 0; left: 0;
}
canvas.trail { position: absolute; top: 0; left: 0; opacity: 0.5;
}

A Pen by Andrey Shchekin - Script Codes JS Codes

$(function() { var width = window.innerWidth; var height = window.innerHeight; var radius = 20; var spheres = [ { x: 0, y: 0, vx: 4, vy: 4, color: '#4684EE' }, { x: 30, y: 0, vx: 3, vy: 6, color: '#DC3912' }, { x: 60, y: 0, vx: 2, vy: 8, color: '#FF9900' }, { x: 90, y: 0, vx: 1, vy: 10, color: '#008000' } ]; var drawSphere = function(canvas, x, y, color) { var context = canvas.getContext('2d'); context.beginPath(); context.arc(x, y, radius, 0, 2 * Math.PI, false); context.fillStyle = color; context.fill(); }; spheres.forEach(function(sphere, index) { var trail = $('<canvas></canvas>').addClass('trail').appendTo($('.container'))[0]; trail.width = width; trail.height = height; /*var main = $('<canvas></canvas>').addClass('main') .appendTo($('.container'))[0]; main.width = radius * 2; main.height = radius * 2; drawSphere(main, radius, radius, sphere.color);*/ sphere.canvas = { /*main: main,*/ trail: trail }; }); var drawAndMove = function drawAndMove() { spheres.forEach(function(sphere) { if (sphere.stopped) return; /*sphere.canvas.main.style.webkitTransform = 'translateX(' + (sphere.x - radius) + 'px) translateY(' + (height - sphere.y - radius) + 'px)';*/ drawSphere(sphere.canvas.trail, sphere.x, height - sphere.y, sphere.color); sphere.vy -= 0.05; if (sphere.y + sphere.vy < 0) { sphere.vy = -(3/4*sphere.vy); return; } if (sphere.x + sphere.vx > width) { sphere.stopped = true; return; } sphere.x += sphere.vx; sphere.y += sphere.vy; }); window.requestAnimationFrame(drawAndMove); } drawAndMove();
});
A Pen by Andrey Shchekin - Script Codes
A Pen by Andrey Shchekin - Script Codes
Home Page Home
Developer Andrey Shchekin
Username ashmind
Uploaded November 15, 2022
Rating 3
Size 2,336 Kb
Views 12,144
Do you need developer help for A Pen by Andrey Shchekin?

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!

Andrey Shchekin (ashmind) Script Codes
Name
Click to Shutdown
Wait what
Code Loader
Simple CORS test UI
Diamond-Square Terrain II
Text Effect 2.1
Labyrinth 1
TV Fall
Hexagons
CSS
Create amazing marketing copy 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!