How to make my logo JS animation scale like image logo on website?

Question

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!

Answer 1

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> 

Answer 2

Not exactly an expert here but I tried to mess around with your codes. From what I see is that all the css parameters in the code are fixed pixels which makes the elements be not responsive to screen size.

You have to make the parent div fixed pixel (or responsive if you'd like) and then set all the child elements be responsive to the parent. This can be 100% of the parent's width.

Thus in this way when the screen size shrinks, you needn't worry about the elements getting disrupted. They will be all encapsulated in the parent div.

This is not exactly the perfect code you require but it will give you a good idea of what is happening here.

CSS

.animateVSS{
  position:relative;
  width:100px;
  height:100px;
}
.vsslogocover{
  position:absolute;
  z-index:2;
  width:100%;
}

.blackdrop{
  position:absolute;
  width:100%;
}

#myCanvas{
    background:black;
    position:absolute;
    z-index;4;
    width:100%;
    height:100%;
    border-radius:50%;
}

.coin {
  background-image: url("http://portalpacific.net/jsfid/vss-animated-front-logo1.png");
  background-size:contain;
  border-radius: 50%;
  position: absolute;
  width:100%;
  -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: contain;
  content: '';
  height: 70px;
  left: 0;
  position: absolute;
  top: 0;
  width: 70px;
  margin-top:15px;
  margin-left:15px;
  border-radius:100%;
}

HTML

<div class="animateVSS">
<img class="vsslogocover" src="http://portalpacific.net/jsfid/VSS%20Bazooka%20Logo%20animation%20cover%20logo%20border.png" alt="Smiley face">
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src="http://portalpacific.net/jsfid/bg2.png" alt="Smiley face">
<canvas id="myCanvas"></canvas>
</div>

Answer 3

You're setting an explicit width and working with explicit pixel values and coordinates. That's going to make it tricky. Try working all the coordinates as a percentage of the width, and then you can dynamically detect the width (or set it outside the class) and everything should scale. It's not a quick fix, but it's not very complicated either.

Answer 4

I tweaked your css a bit to make use of percentage wherever possible, Just replace your CSS with this one and you will see that your logo is now responsive. You can tweak the percentage to make it wider or smaller to your liking:

rotate();
setInterval(rotate, 8000);

#myCanvas{
  position:relative;
    background:black;
    position:absolute;
    z-index;4;
    margin-top:-190px;
    margin-left:-190px;
    border-radius:100%;
}

    .animateVSS {
    position: relative;
    width: 20%;
    max-width: 282px;
    max-height: 283px;
    padding-top: 20%;
    display: inline-block;
}
    .vsslogocover {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: auto;
    max-width: 282px;
    max-height: 283px;
    top: 0;
}
    .coin {
    height: 70%;
    max-height: 182px;
    width: 66%;
    max-width: 185px;
    margin-top: 16%;
    margin-left: 17%;
    top: 0;
    position: absolute;
    background-image: url(http://portalpacific.net/jsfid/vss-animated-front-logo1.png);
    background-size: 100% 100%;
    border-radius: 100%;
    -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: '';
    left: 0;
    position: absolute;
    margin-top: 1px;
    -webkit-transform: translateZ(-5px);
    -o-transform: translateZ(-5px);
    transform: translateZ(-5px);
    border-radius: 100%;
    height: 100%;
    max-height: 182px;
    width: 100%;
    max-width: 185px;
    top: 0;
}
    .blackdrop {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: auto;
    max-width: 282px;
    max-height: 283px;
    top: 0;
}
    #myCanvas {
    background: black;
    position: absolute;
    margin-left: 17%;
    border-radius: 100%;
    top: 0;
    width: 70%;
    max-width: 200px;
    max-height: 200px;
    height: auto;
    margin-top: 17%;
}