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 = ".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(".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(".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=".7.2/jquery.min.js"></script>
<div class="animateVSS">
<img class="vsslogocover" src=".png" alt="Smiley face" width="282" height="283">
<span id="flip0" class="coin" style="display:inline-block;"></span>
<img class="blackdrop" src=".png" alt="Smiley face" width="192" height="192">
<canvas id="myCanvas" width="200" height="200"></canvas>
</div>

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!

• javascript
• jquery
• html
• css
• animation

• aren't css animations an option? :/ – Aureliano Far Suau Commented Feb 23, 2017 at 20:15

4 Answers 4

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>

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>

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%;
}

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.