Menu
I spent a bunch of time creating this really cool Logo animation our my site! The logo animation i made is the same size as the logo image and I can apply it to the site easily.
The problem is the logo on my site is set to start scaling down once the screen width reaches a certain point. It's set with a max width but also set to scale to the size of its parent div. My animation does not do this... I realized I need to figure this out before applying my logo animation to my site. Since it does not act in the same way... And i really dont wana use css scaling and media queries because that would be a mess.
Here my animation.
// Create an array to store our particles
var particles = [];
// The amount of particles to render
var particleCount = 10;
// The maximum velocity in each direction
var maxVelocity = 3;
// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;
// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 400;
var canvasHeight = 400;
// Create an image object (only need one instance)
var imageObj = new Image();
// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
particles.forEach(function(particle) {
particle.setImage(imageObj);
});
};
// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.freeiconspng.com/uploads/misc-cloud-smoke-element-png-by-dbszabo1-on-deviantart-19.png";
// A function to create a particle object.
function Particle(context) {
// Set the initial x and y positions
this.x = 0;
this.y = 0;
// Set the initial velocity
this.xVelocity = 0;
this.yVelocity = 0;
// Set the radius
this.radius = 5;
// Store the context which will be used to draw the particle
this.context = context;
// The function to draw the particle on the canvas.
this.draw = function() {
// If an image is set draw it
if(this.image){
this.context.drawImage(this.image, this.x-228, this.y-228);
// If the image is being rendered do not draw the circle so break out of the draw function
return;
}
// Draw the circle as before, with the addition of using the position and the radius from this object.
};
// Update the particle.
this.update = function() {
// Update the position of the particle with the addition of the velocity.
this.x += this.xVelocity;
this.y += this.yVelocity;
// Check if has crossed the right edge
if (this.x >= canvasWidth) {
this.xVelocity = -this.xVelocity;
this.x = canvasWidth;
}
// Check if has crossed the left edge
else if (this.x <= 0) {
this.xVelocity = -this.xVelocity;
this.x = 0;
}
// Check if has crossed the bottom edge
if (this.y >= canvasHeight) {
this.yVelocity = -this.yVelocity;
this.y = canvasHeight;
}
// Check if has crossed the top edge
else if (this.y <= 0) {
this.yVelocity = -this.yVelocity;
this.y = 0;
}
};
// A function to set the position of the particle.
this.setPosition = function(x, y) {
this.x = x;
this.y = y;
};
// Function to set the velocity.
this.setVelocity = function(x, y) {
this.xVelocity = x;
this.yVelocity = y;
};
this.setImage = function(image){
this.image = image;
}
}
// A function to generate a random number between 2 values
function generateRandom(min, max){
return Math.random() * (max - min) + min;
}
// The canvas context if it is defined.
var context;
// Initialise the scene and set the context if possible
function init() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
// Set the context variable so it can be re-used
context = canvas.getContext('2d');
// Create the particles and set their initial positions and velocities
for(var i=0; i < particleCount; ++i){
var particle = new Particle(context);
// Set the position to be inside the canvas bounds
particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
// Set the initial velocity to be either random and either negative or positive
particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
particles.push(particle);
}
}
else {
alert("Please use a modern browser");
}
}
// The function to draw the scene
function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,1014,611);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
// Update the scene
function update() {
particles.forEach(function(particle) {
particle.update();
});
}
// Initialize the scene
init();
// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
setInterval(function() {
// Update the scene befoe drawing
update();
// Draw the scene
draw();
}, 1000 / targetFPS);
}
var deg = [0, 0, 0, 0];
rotate = function() {
for (var i = 0; i < 3; ++i) {
deg[i] += 180 * 3;
if (Math.random() > 8)
deg[i] += 180;
$('#flip' + i).css({
'-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
'-o-transform': 'rotateY(' + deg[i] + 'deg)',
'transform': 'rotateY(' + deg[i] + 'deg)'
});
}
};
rotate();
setInterval(rotate, 8000);.animateVSS{
width:282px;
height:283px;
position:relative;
margin-top:20px;
margin-left:100px;
}
.vsslogocover{
position:absolute;
z-index:2;
}
.blackdrop{
position:relative;
top:-189px;
margin-left:44px;
opacity:0;
}
#myCanvas{
position:relative;
background:black;
position:absolute;
z-index;4;
margin-top:-190px;
margin-left:-190px;
border-radius:100%;
}
.coin {
background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
background-size: 100% 100%;
border-radius: 100%;
height: 182px;
position: relative;
width:185px;
-webkit-transition: 1.8s ease-in-out;
-o-transition: 1.8s ease-in-out;
transition: 1.8s ease-in-out;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
margin-top:50px;
margin-left:48px;
z-index:1;
background-color: black;
}
.coin:before {
background-color: black;
background-image: url("http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png");
background-size: 100% 100%;
content: '';
height: 182px;
left: 0;
position: absolute;
top: 0;
width: 185px;
margin-top:1px;
-webkit-transform: translateZ(-5px);
-o-transform: translateZ(-5px);
transform: translateZ(-5px);
border-radius:100%;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div class="animateVSS">
<img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png" alt="Smiley face" width="282" height="283">
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" alt="Smiley face" width="192" height="192">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>Here's a JSFiddle also.
Thanks for any help!
601
Code has been Updated. It uses the canvas effect and it is responsive and uses css3 animation as well. I tried to make the animation show both front and back of coin at the start and end of the animation :) Cheers!
https://jsfiddle.net/BenjaminGraham/rudngfq9/
// Create an array to store our particles
var particles = [];
// The amount of particles to render
var particleCount = 10;
// The maximum velocity in each direction
var maxVelocity = 3;
// The target frames per second (how often do we want to update / redraw the scene)
var targetFPS = 33;
// Set the dimensions of the canvas as variables so they can be used.
var canvasWidth = 400;
var canvasHeight = 400;
// Create an image object (only need one instance)
var imageObj = new Image();
// Once the image has been downloaded then set the image on all of the particles
imageObj.onload = function() {
particles.forEach(function(particle) {
particle.setImage(imageObj);
});
};
// Once the callback is arranged then set the source of the image
imageObj.src = "http://www.freeiconspng.com/uploads/misc-cloud-smoke-element-png-by-dbszabo1-on-deviantart-19.png";
// A function to create a particle object.
function Particle(context) {
// Set the initial x and y positions
this.x = 0;
this.y = 0;
// Set the initial velocity
this.xVelocity = 0;
this.yVelocity = 0;
// Set the radius
this.radius = 5;
// Store the context which will be used to draw the particle
this.context = context;
// The function to draw the particle on the canvas.
this.draw = function() {
// If an image is set draw it
if(this.image){
this.context.drawImage(this.image, this.x-228, this.y-228);
// If the image is being rendered do not draw the circle so break out of the draw function
return;
}
// Draw the circle as before, with the addition of using the position and the radius from this object.
};
// Update the particle.
this.update = function() {
// Update the position of the particle with the addition of the velocity.
this.x += this.xVelocity;
this.y += this.yVelocity;
// Check if has crossed the right edge
if (this.x >= canvasWidth) {
this.xVelocity = -this.xVelocity;
this.x = canvasWidth;
}
// Check if has crossed the left edge
else if (this.x <= 0) {
this.xVelocity = -this.xVelocity;
this.x = 0;
}
// Check if has crossed the bottom edge
if (this.y >= canvasHeight) {
this.yVelocity = -this.yVelocity;
this.y = canvasHeight;
}
// Check if has crossed the top edge
else if (this.y <= 0) {
this.yVelocity = -this.yVelocity;
this.y = 0;
}
};
// A function to set the position of the particle.
this.setPosition = function(x, y) {
this.x = x;
this.y = y;
};
// Function to set the velocity.
this.setVelocity = function(x, y) {
this.xVelocity = x;
this.yVelocity = y;
};
this.setImage = function(image){
this.image = image;
}
}
// A function to generate a random number between 2 values
function generateRandom(min, max){
return Math.random() * (max - min) + min;
}
// The canvas context if it is defined.
var context;
// Initialise the scene and set the context if possible
function init() {
var canvas = document.getElementById('myCanvas');
if (canvas.getContext) {
// Set the context variable so it can be re-used
context = canvas.getContext('2d');
// Create the particles and set their initial positions and velocities
for(var i=0; i < particleCount; ++i){
var particle = new Particle(context);
// Set the position to be inside the canvas bounds
particle.setPosition(generateRandom(0, canvasWidth), generateRandom(0, canvasHeight));
// Set the initial velocity to be either random and either negative or positive
particle.setVelocity(generateRandom(-maxVelocity, maxVelocity), generateRandom(-maxVelocity, maxVelocity));
particles.push(particle);
}
}
else {
alert("Please use a modern browser");
}
}
// The function to draw the scene
function draw() {
// Clear the drawing surface and fill it with a black background
//context.fillStyle = "rgba(0, 0, 0, 0.5)";
//context.fillRect(0, 0, 400, 400);
context.clearRect(0,0,1014,611);
// Go through all of the particles and draw them.
particles.forEach(function(particle) {
particle.draw();
});
}
// Update the scene
function update() {
particles.forEach(function(particle) {
particle.update();
});
}
// Initialize the scene
init();
// If the context is set then we can draw the scene (if not then the browser does not support canvas)
if (context) {
setInterval(function() {
// Update the scene befoe drawing
update();
// Draw the scene
draw();
}, 1000 / targetFPS);
}
var deg = [0, 0, 0, 0];
rotate = function() {
for (var i = 0; i < 3; ++i) {
deg[i] += 180 * 3;
if (Math.random() > 8)
deg[i] += 180;
$('#flip' + i).css({
'-webkit-transform': 'rotateY(' + deg[i] + 'deg)',
'-o-transform': 'rotateY(' + deg[i] + 'deg)',
'transform': 'rotateY(' + deg[i] + 'deg)'
});
}
};
rotate();
setInterval(rotate, 8000);.animateVSS {
width: 282px;
height: 283px;
position: relative;
}
.vsslogocover {
position: absolute;
z-index: 2;
}
.blackdrop {
position: relative;
opacity: 0;
}
#myCanvas {
position: absolute;
background: black;
z-index;
4;
top: 17.5%;
left: 17.5%;
bottom: 0;
border-radius: 100%;
}
.coin {
background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
background-size: 100% 100%;
border-radius: 100%;
height: 65%;
width: 65%;
top: 17.5%;
left: 17.5%;
position: relative;
-webkit-transition: 1.8s ease-in-out;
-o-transition: 1.8s ease-in-out;
transition: 1.8s ease-in-out;
-webkit-transform-style: preserve-3d;
-o-transform-style: preserve-3d;
transform-style: preserve-3d;
z-index: 1;
background-color: black;
}
.coin:before {
background-color: black;
background-image: url("http://portalpacific.net/jsfid/vss22-animated-back-logo-185x1821.png");
background-size: 100% 100%;
content: '';
height: 100%;
width: 100%;
left: 0%;
position: absolute;
top: 0%;
-webkit-transform: translateZ(-5px);
-o-transform: translateZ(-5px);
transform: translateZ(-5px);
border-radius: 100%;
}
#flip0 {
-webkit-animation-name: Logo;
animation-name: Logo;
-webkit-animation-duration: 5s;
animation-duration: 5s;
-webkit-animation-iteration-count: infinite;
/* Safari 4.0 - 8.0 */
animation-iteration-count: infinite;
}
@keyframes Logo {
0% {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
25% {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
50% {
transform: rotateY(900deg);
-webkit-transform: rotateY(900deg);
}
75% {
transform: rotateY(900deg);
-webkit-transform: rotateY(900deg);
}
100% {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
}
}
@media screen and (max-width:767px) {
.animateVSS {
width: 180px;
height: 180px;
}
}
@media screen and (min-width:768px) {
.animateVSS {
width: 280px;
height: 280px;
}
#myCanvas {
width: 180px;
height: 180px;
top: 17.5%;
left: 17.5%;
}
}<div class="animateVSS">
<img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png" alt="Smiley face" width="100%" height="100%">
<span id="flip0" class="coin" style="display:inline-block;">
</span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" alt="Smiley face" width="100%" height="100%">
<canvas id="myCanvas" width="120%" height="120%"></canvas>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
