HTML5 Canvas Animated Background Part 2

Developer
Html5andblog
Size
3,154 Kb
Views
64,768
  1. HTML5 Canvas Animated Background Part 2 Previews
  2. HTML5 Canvas Animated Background Part 2 HTML Codes
  3. HTML5 Canvas Animated Background Part 2 CSS Codes
  4. HTML5 Canvas Animated Background Part 2 JS Codes

How do I make an html5 canvas animated background part 2?

What is a html5 canvas animated background part 2? How do you make a html5 canvas animated background part 2? This script and codes were developed by Html5andblog on 24 August 2022, Wednesday.

HTML5 Canvas Animated Background Part 2 Previews
IQ Test

HTML5 Canvas Animated Background Part 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>HTML5 Canvas Animated Background Part 2</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Lobster'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas>
<div id="container"> <h1 class="title">Website Title</h1> <div class="content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent porttitor est id arcu varius, et posuere tortor scelerisque. Vestibulum augue erat, interdum in tempor ut, fringilla a tellus. Cras sit amet scelerisque lectus, a auctor erat. Proin mi magna, placerat vel ullamcorper et, aliquam in augue. Nam ultricies sodales venenatis. Curabitur congue sapien in consequat imperdiet. Etiam vestibulum suscipit ipsum, ut congue justo mattis sit amet. Integer fermentum vulputate mi nec tincidunt. Mauris vestibulum, tortor eget porta vulputate, purus arcu blandit lacus, ac volutpat sapien libero in tortor. Nam congue viverra tellus eu ultricies.</p> <p>Proin gravida, nibh vel egestas sodales, lectus purus porta odio, eget convallis nisi odio in ex. Sed laoreet est leo, a dapibus velit imperdiet volutpat. Ut sed aliquam risus. Nullam a quam ante. Duis eros velit, porta non porttitor in, porta a dolor. Aliquam aliquam magna ac vulputate consectetur. Donec quis suscipit nisl, quis mollis leo. Integer urna elit, consectetur a maximus id, suscipit eu diam.</p> <p>In eget dolor ornare magna feugiat cursus sed in lorem. Duis egestas ligula sit amet ipsum cursus pellentesque. Phasellus vulputate mauris a neque sollicitudin, ut cursus enim consectetur. Nunc eu purus eu justo pharetra tincidunt quis vitae libero. Sed et augue congue, consectetur nisi a, molestie tellus. Vestibulum bibendum magna sed erat ornare posuere. Donec accumsan eros et tincidunt pharetra. Nam elementum congue gravida. Quisque mi nisi, auctor sed placerat et, facilisis non nunc. Nulla facilisi.</p> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/ocanvas/2.8.1/ocanvas.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

HTML5 Canvas Animated Background Part 2 - Script Codes CSS Codes

body {
margin: 0;
}
body * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body, #canvas, #container {
width: 100%;
height: 100%;
}
#canvas {
position: fixed;
z-index: -1;
top: 0;
left: 0;
}
#container {
max-width: 960px;
width: 90%;
height: auto;
margin: 0 auto 1em;
}
.title {
color: #fff;
font-family: 'Lobster', cursive;
font-size: 3.5em;
text-align: center;
}
.content {
width: 100%;
background-color: rgba(255,255,255,.9);
padding: 0.1em 1em;
font-family: 'Open Sans', sans-serif;
}

HTML5 Canvas Animated Background Part 2 - Script Codes JS Codes

jQuery(document).ready(function($){
var windowXArray = [], windowYArray = [];
for (var i = 0; i < $(window).innerWidth(); i++) { windowXArray.push(i);
}
for (var i = 0; i < $(window).innerHeight(); i++) { windowYArray.push(i);
}
function randomPlacement(array) { var placement = array[Math.floor(Math.random()*array.length)]; return placement;
}
var canvas = oCanvas.create({ canvas: '#canvas', background: '#2c3e50', fps: 60
});
setInterval(function(){
var rectangle = canvas.display.ellipse({ x: randomPlacement(windowXArray), y: randomPlacement(windowYArray), origin: { x: 'center', y: 'center' }, radius: 0, fill: '#27ae60', opacity: 1
});
canvas.addChild(rectangle);
rectangle.animate({ radius: 10, opacity: 0
}, { duration: '1000', easing: 'linear', callback: function () {	this.remove();	}
});
}, 100);
$(window).resize(function(){
canvas.width = $(window).innerWidth();
canvas.height = $(window).innerHeight();
});
$(window).resize();
});
HTML5 Canvas Animated Background Part 2 - Script Codes
HTML5 Canvas Animated Background Part 2 - Script Codes
Home Page Home
Developer Html5andblog
Username html5andblog
Uploaded August 24, 2022
Rating 3
Size 3,154 Kb
Views 64,768
Do you need developer help for HTML5 Canvas Animated Background Part 2?

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!

Html5andblog (html5andblog) Script Codes
Name
Snow Flurry - Wordpress and jQuery Plugin
Bubbling Text Effect
Detect Image Orientation with JavaScript
HTML5 Canvas Animated Background Part 1
Particles JS Background
Letter by Letter JS Basic Example
Snow Flurry Version 2
HTML5 Video Color Filter Effect
A Pen by html5andblog
Animated CSS Background - Moves with Cursor
Create amazing captions 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!