Develop Reference

Inline-block remove bottom space to add text

I have the below code to begin an animation for an acronym that makes the code transform to a vertical form. I'd like to have it where it will type the rest of the acronym out next to the letters on the button click. However doing so adds far to much space between all the type I want them to basically line up how they do before the button is pressed you can see what it currently does here:
var a = 0;
var b = 0;
var c = 0;
var d = 0;
var e = 0;
var f = 0;
var balance = 'alance';
var execution = 'xecution';
var teamwork = 'eamwork';
var training = 'raining';
var experience = 'xperience';
var results = 'esults';
var speed = 50;
function typeWriter() {
while (a < balance.length) {
document.getElementById("balance").innerHTML += balance.charAt(a);
a++;
setTimeout(typeWriter, speed);
}
while (b < execution.length) {
document.getElementById("execution").innerHTML += execution.charAt(b);
b++;
setTimeout(typeWriter, speed);
}
while (c < teamwork.length) {
document.getElementById("teamwork").innerHTML += teamwork.charAt(c);
c++;
setTimeout(typeWriter, speed);
}
while (d < training.length) {
document.getElementById("training").innerHTML += training.charAt(d);
d++;
setTimeout(typeWriter, speed);
}
while (e < experience.length) {
document.getElementById("experience").innerHTML += experience.charAt(e);
e++;
setTimeout(typeWriter, speed);
}
while (f < results.length) {
document.getElementById("results").innerHTML += results.charAt(f);
f++;
setTimeout(typeWriter, speed);
}
}
function scroller() {
var move = document.querySelectorAll(".move");
var fade = document.querySelectorAll(".fade");
for (var i = 0; i < move.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = move[i].getBoundingClientRect().top;
var elementVisible = 0;
if (elementTop < windowHeight - elementVisible) {
move[i].classList.add("active");
} else {
move[i].classList.remove("active");
}
}
for (var i = 0; i < fade.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = fade[i].getBoundingClientRect().top;
var elementVisible = 0;
if (elementTop < windowHeight - elementVisible) {
fade[i].classList.add("active");
} else {
fade[i].classList.remove("active");
}
}
}
window.addEventListener("scroll", scroller);
.move {
font-size: 105px;
position: relative;
}
.move.active {
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
}
.fade {
font-size: 105px;
position: relative;
}
.fade.active {
font-size: 105px;
position: relative;
animation: fader 2s ease 0s normal forwards;
}
.move.active span {
margin: 0px;
position: relative;
display: inline-block;
animation: rotate 5s ease 0s normal forwards;
}
#keyframes mover {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
}
}
#keyframes rotate {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
#keyframes fader {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
opacity: 0;
}
}
#keyframes typing {
0% {
width: 0%
}
100% {
width: 100%
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<CENTER>
<h2 class="fade">IT'S </h2>
<h2 class="move">
<span id="balance">B</span>
<span id="execution">E</span>
<span id="teamwork">T</span>
<span id="training">T</span>
<span id="experience">E</span>
<span id="results">R</span>
</h2>
<h2 class="fade">TOGETHER </h2>
</CENTER>
<button onclick="typeWriter()">Click me</button>
https://noahark.w3spaces.com/saved-from-Tryit-2022-04-29.html
Any and all help will be extremely appreciated.

In your particular example, the spacing is coming from the lengths of the words. When I undo the rotation caused by the animation, we can see this:
So, if you force the length of the word to be one character (regardless of how many characters are actually there), then you no longer have the spacing problem caused by the words' length.
.move span {
display: inline-block;
width: 1.5ch;
}
Although forcing the span's width works, it can feel a little naughty. We're now relying on nice overflow behaviour, and hopefully we don't need the true width of the element for anything else.
I found that I didn't have to force width if we start at the end rather than the beginning. By default (no transform applied), it is already arranged as a column of words exactly like what you want at the end of the animation.
Then, you apply the 90 degree rotation to get the horizontal "BETTER" text. The animation undoes the rotation, meaning you always get what you expect at the end.
const betterAcronym = document.querySelector('#better-acronym')
const revealButton = document.querySelector('#reveal-button')
const wait = (ms) => new Promise(resolve => setTimeout(resolve, ms))
const typeElement = async (element) => {
const word = element.dataset['word']
const start = element.textContent.length
for (let c = start; c < word.length; ++c) {
element.textContent += word[c]
await wait(100)
}
}
revealButton.addEventListener('click', async () => {
betterAcronym.classList.add('revealed')
await wait(2750) // length of the animation plus some
Array.from(betterAcronym.children).forEach(typeElement)
})
.acronym {
font-size: 1.25rem;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
transform: rotate(-90deg);
transform-origin: 0.5em 0.5em;
transition: transform 2.5s ease-in-out;
}
.acronym > li {
display: inline-block;
transform: rotate(90deg);
transform-origin: 0.5em 0.5em;
transition: transform 2.5s ease-in-out;
}
.acronym.revealed {
transform: rotate(0deg);
}
.acronym.revealed > li {
transform: rotate(0deg);
}
body {
overflow: hidden;
}
button {
font-size: 1.25rem;
}
<ol id="better-acronym" class="acronym">
<li data-word="balance">B</li>
<li data-word="execution">E</li>
<li data-word="teamwork">T</li>
<li data-word="training">T</li>
<li data-word="experience">E</li>
<li data-word="results">R</li>
</ol>
<button id="reveal-button">Reveal</button>

You just have to provide width: 73px to .move.active span. And after the animation ends adjust the parent height.
In the demo look for code comments. I've also fixed the typing effect code. View in full page mode.
const move = document.querySelector(".move");
const fade = document.querySelectorAll(".fade");
const words = ['balance', 'execution', 'teamwork', 'training', 'experience', 'results'];
let col = 1;
let row = 0;
const speed = 100;
function typeWriter() {
const e = document.getElementById(words[row]);
e.textContent += words[row][col];
col++;
if(col >= words[row].length){
col = 1;
row++;
}
if(row < words.length)
setTimeout(typeWriter, speed);
else
typeWriter = () => console.log('can not rerun the animation');
}
function scroller() {
var windowHeight = window.innerHeight;
var elementTop = move.getBoundingClientRect().top;
var elementVisible = 0;
if (elementTop < windowHeight - elementVisible) {
move.classList.add("active");
} else {
move.classList.remove("active");
}
for (var i = 0; i < fade.length; i++) {
var windowHeight = window.innerHeight;
var elementTop = fade[i].getBoundingClientRect().top;
var elementVisible = 0;
if (elementTop < windowHeight - elementVisible) {
fade[i].classList.add("active");
} else {
fade[i].classList.remove("active");
}
}
}
// adjust parent height after the animation ends
// change the calculation as per your requirements
move.onanimationend = (event)=>{
if(move === event.target) {
move.parentElement.style.height = move.parentElement.offsetHeight - move.offsetHeight + move.offsetWidth + - move.nextElementSibling.scrollHeight + 'px';
}
};
window.addEventListener("scroll", scroller);
center{ border: 1px dashed gray;}
.move {
font-size: 105px;
position: relative;
}
.move.active {
font-size: 105px;
position: relative;
animation: mover 5s ease 0s normal forwards;
/* we need exact width to adjust the parent's height */
width: fit-content;
}
.fade {
font-size: 105px;
position: relative;
}
.fade.active {
font-size: 105px;
position: relative;
animation: fader 2s ease 0s normal forwards;
}
.move.active span {
margin: 0px;
position: relative;
display: inline-block;
animation: rotate 5s ease 0s normal forwards;
/* specify width equal to one character in the font */
width: 73px;
}
#keyframes mover {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(-20%, 300px) skew(0deg) rotate(90deg);
}
}
#keyframes rotate {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
transform: scale(1) translate(0px, 0px) skew(0deg) rotate(-90deg);
}
}
#keyframes fader {
0.0% {
transform: scale(1) translate(-0px, 0) skew(0deg);
}
100% {
opacity: 0;
}
}
#keyframes typing {
0% {
width: 0%
}
100% {
width: 100%
}
}
button {
position: fixed;
top: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<CENTER>
<h2 class="fade">IT'S </h2>
<h2 class="move">
<span id="balance">B</span>
<span id="execution">E</span>
<span id="teamwork">T</span>
<span id="training">T</span>
<span id="experience">E</span>
<span id="results">R</span>
</h2>
<h2 class="fade">TOGETHER </h2>
</CENTER>
<button onclick="typeWriter()">Click me</button>
Adjust the calculations as per your requirements.

Confetti falling animation problem transparencies

Good evening all,
i added the confetti falling animation to my website.
The confetti are superimposed on my buttons and i can't click them, how can i make the confetti visible but transparent so that i can click what's underneath?
This is the code that i used:
<canvas id="my-canvas"></canvas>
<script src="assets/index.min.js"></script>
<script> var confettiSettings = { target: 'my-canvas' };
var confetti = new ConfettiGenerator(confettiSettings);
confetti.render();
</script>
<style>
#my-canvas
{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
z-index: 100000;
}
</style>

You can use the pointer-events CSS property to control some aspects of how the pointer interacts with an element. Setting pointer-events: none; will let pointer events (like hover and click) pass right through an element as though it wasn't there. Here's some documentation: pointer-events

here I hope this helps:
index.html
<div class="js-container container"></div>
index.css
#keyframes confetti-slow {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(25px, 105vh, 0) rotateX(360deg) rotateY(180deg); }
}
#keyframes confetti-medium {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(100px, 105vh, 0) rotateX(100deg) rotateY(360deg); }
}
#keyframes confetti-fast {
0% { transform: translate3d(0, 0, 0) rotateX(0) rotateY(0); }
100% { transform: translate3d(-50px, 105vh, 0) rotateX(10deg) rotateY(250deg); }
}
.container {
width: 100vw;
height: 100vh;
background: #f0f0f0;
}
.confetti-container {
perspective: 700px;
position: absolute;
overflow: hidden;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.confetti {
position: absolute;
z-index: 1;
top: -10px;
border-radius: 0%;
&--animation-slow {
animation: confetti-slow 2.25s linear 1 forwards;
}
&--animation-medium {
animation: confetti-medium 1.75s linear 1 forwards;
}
&--animation-fast {
animation: confetti-fast 1.25s linear 1 forwards;
}
}
script file
const Confettiful = function(el) {
this.el = el;
this.containerEl = null;
this.confettiFrequency = 3;
this.confettiColors = ['#fce18a', '#ff726d', '#b48def', '#f4306d'];
this.confettiAnimations = ['slow', 'medium', 'fast'];
this._setupElements();
this._renderConfetti();
};
Confettiful.prototype._setupElements = function() {
const containerEl = document.createElement('div');
const elPosition = this.el.style.position;
if (elPosition !== 'relative' || elPosition !== 'absolute') {
this.el.style.position = 'relative';
}
containerEl.classList.add('confetti-container');
this.el.appendChild(containerEl);
this.containerEl = containerEl;
};
Confettiful.prototype._renderConfetti = function() {
this.confettiInterval = setInterval(() => {
const confettiEl = document.createElement('div');
const confettiSize = (Math.floor(Math.random() * 3) + 7) + 'px';
const confettiBackground = this.confettiColors[Math.floor(Math.random() * this.confettiColors.length)];
const confettiLeft = (Math.floor(Math.random() * this.el.offsetWidth)) + 'px';
const confettiAnimation = this.confettiAnimations[Math.floor(Math.random() * this.confettiAnimations.length)];
confettiEl.classList.add('confetti', 'confetti--animation-' + confettiAnimation);
confettiEl.style.left = confettiLeft;
confettiEl.style.width = confettiSize;
confettiEl.style.height = confettiSize;
confettiEl.style.backgroundColor = confettiBackground;
confettiEl.removeTimeout = setTimeout(function() {
confettiEl.parentNode.removeChild(confettiEl);
}, 3000);
this.containerEl.appendChild(confettiEl);
}, 25);
};
window.confettiful = new Confettiful(document.querySelector('.js-container'));
Here is a link of a Codepen.io: https://codepen.io/jacobgunnarsson/pen/pbPwga

Add Animated Line in Mesh Animation

How could I add animated lines in this sample mesh animation?
HAML / HTML
%div.wrap
-300.times do
%div.c
CSS/SCSS
// best in chrome
$total: 300; // total particles
$orb-size: 100px;
$particle-size: 2px;
$time: 14s;
$base-hue: 0; // change for diff colors (180 is nice)
html, body {
height: 100%;
}
body {
background: black;
overflow: hidden; // no scrollbars..
}
.wrap {
position: relative;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform-style: preserve-3d;
perspective: 1000px;
animation: rotate $time infinite linear; // rotate orb
}
#keyframes rotate {
100% {
transform: rotateY(360deg) rotateX(360deg);
}
}
.c {
position: absolute;
width: $particle-size;
height: $particle-size;
border-radius: 50%;
opacity: 0;
}
#for $i from 1 through $total {
$z: (random(360) * 1deg); // random angle to rotateZ
$y: (random(360) * 1deg); // random to rotateX
$hue: ((40/$total * $i) + $base-hue); // set hue
.c:nth-child(#{$i}){ // grab the nth particle
animation: orbit#{$i} $time infinite;
animation-delay: ($i * .01s);
background-color: hsla($hue, 100%, 50%, 1);
}
#keyframes orbit#{$i}{
20% {
opacity: 1; // fade in
}
30% {
transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // form orb
}
80% {
transform: rotateZ(-$z) rotateY($y) translateX($orb-size) rotateZ($z); // hold orb state 30-80
opacity: 1; // hold opacity 20-80
}
100% {
transform: rotateZ(-$z) rotateY($y) translateX( ($orb-size * 3) ) rotateZ($z); // translateX * 3
}
}
}
https://codepen.io/natewiley/pen/GgONKy
Desired animation:

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

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!

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.

Why is my 3d cube not rotating as expected?

I'm doing a 3d dice that rotates when you swipe its face. The problem is that it is acting really weird on some cases. For example, if you run the snippet and swipe left two times then swipe down, it does a crazy rotation...
Here is the code:
$(function() {
var X = 0,
Y = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate(what) {
switch (what) {
case "X":
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
break;
case "Y":
$(".cube").css("transform", "rotateY(" + Y +"deg) rotateX(" + X + "deg)");
break;
}
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
Y -= 90;
rotate("Y");
});
$(".thirdDimension").on("swiperight", function(e){
Y += 90;
rotate("Y");
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate("X");
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate("X");
});
});
* {
box-sizing: border-box;
}
html, body {
height: 100%;
font-family: sans-serif;
}
.tableContainer, .vcenter {
height: 100%;
width: 100%;
}
.tableContainer {
display: table;
}
.vcenter {
height: 100%;
display: table-cell;
vertical-align: middle;
}
.thirdDimension {
perspective: 500px;
perspective-origin: 50% 100px;
}
.cube {
margin: 0 auto;
position: relative;
width: 200px;
height: 200px;
transform-style: preserve-3d;
}
.cube div {
position: absolute;
width: 200px;
height: 200px;
box-shadow: inset 0 0 30px black;
font-size: 72pt;
padding-top: 35px;
text-align: center;
background-color: black;
}
.right {
transform: rotateY(-270deg) translateX(100px);
transform-origin: top right;
}
.left {
transform: rotateY(270deg) translateX(-100px);
transform-origin: center left;
}
.up {
transform: rotateX(90deg) translateY(-100px);
transform-origin: top center;
}
.down {
transform: rotateX(-90deg) translateY(100px);
transform-origin: bottom center;
}
.front {
transform: translateZ(100px);
}
.back {
transform: translateZ(-100px) rotateY(180deg);
}
.cube {
-webkit-transition: .3s all linear;
cursor: pointer;
}
.cube div:after {
display: block;
position: absolute;
width: 100px;
height: 100px;
content: "";
border: 1px solid;
}
.front:after {
top: 0;
right: 0;
background-color: green;
}
.back:after {
bottom: 0;
right: 0;
background-color: blue;
}
.right:after {
top: 0;
left: 0;
background-color: red;
}
.left:after {
bottom: 0;
left: 0;
background-color: DarkOrange;
}
.up:after {
right: 0;
bottom: 0;
background-color: white;
}
.down:after {
bottom: 0;
left: 0;
background-color: yellow;
}
#debug {
position: fixed;
background-color: cyan;
overflow: auto;
height: 50px;
width: 100%;
}
/*
.cube {
animation: linear 5s rotate infinite;
}
#-webkit-keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
}
100% {
transform: rotateX(360deg) rotateY(720deg);
}
}
*/
<script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<div id='debug'></div>
<div class='tableContainer'>
<div class='vcenter'>
<div class='thirdDimension'>
<div class='cube'>
<div class='up'></div>
<div class='front'></div>
<div class='right'></div>
<div class='left'></div>
<div class='back'></div>
<div class='down'></div>
</div>
</div>
</div>
</div>
EDIT: This link: http://greensock.com/forums/topic/7811-3d-rotation-fixed-axsis/ says that the order of the rotations matter. I changed my code slightly but it keeps rotating unexpectedly...

First: Settings the transform different ways for either "X" or "Y" was causing the massive spinning. I changed them both to:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg)");
If believe you wish for the cube to always spin in the direction of the swipe. Continue reading if so or if not , all you needed to change was the above code.
Second: When you spin the cube you are changing the orientation. The x-axis is never messed up but the y-axis and z-axis are switching without you really noticing.
Now you can to add rotateZ to the mix:
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
I have changed the code here in this CodePen to provide an example. I have not completed it because I have revealed the issue, but do not have the time to perfect it.
$(function() {
var X = 0,
Y = 0,
Z = 0;
var hammertime = new Hammer($(".thirdDimension")[0], {domEvents: true});
hammertime.get('swipe').set({ direction: Hammer.DIRECTION_ALL });
function rotate() {
$(".cube").css("transform", "rotateX(" + X + "deg) rotateY(" + Y +"deg) rotateZ(" + Z + "deg)");
$("#debug").html($("#debug").html() + $(".cube").attr("style") + "<br>").scrollTop($("#debug")[0].scrollHeight);
}
$(".thirdDimension").on("swipeleft", function(e){
//Y -= 90;
check(-90);
rotate();
});
$(".thirdDimension").on("swiperight", function(e){
//Y += 90;
check(90);
rotate();
});
$(".thirdDimension").on("swipeup", function(e){
X += 90;
rotate();
});
$(".thirdDimension").on("swipedown", function(e){
X -= 90;
rotate();
});
function check(num) {
var temp = Math.abs(X % 360);
switch (temp) {
case 0:
console.log(temp);
Y += num;
break;
case 90:
console.log(temp);
Z -= num
break;
case 180:
console.log(temp);
Y -= num;
break;
case 270:
console.log(temp);
Z -= num;
break;
}
}
});
You need to check the y-axis (Math.abs(Y % 360))) and possibly the z-axis and rotate either the y-axis and z-axis (+- 90) accordingly.
This mostly works, but needs fine tuning in determining the correct axis to rotate. Good luck.

Your problem is more how you have conceptualized rotation than any coding mistakes.
If you rotateY(90), then rotateX(90) - then by the time you get to rotateX(90), your X axis has rotated by 90 degrees, so it is no longer left to right, but into/out of screen. So your thing will look like it's doing a 2d rotate in that particular instance.
And to take it further, if the user now swipes left to right, they are actually swiping along the Z axis, and you need to rotate Z.
To fix this, you need to keep track of the rotation you have done and map the user interface to the cube in a more dynamic way. Swiping left to right doesn't always mean rotate Y, it means rotate along the axis that is currently oriented left to right.
I suggest you find a rubik's cube or similar, and label the sides per axis (e.g. Red side is X axis), simulate the swiping, and then that should make things more clear, as you'll see those axis move around the cube.