How to fix animation glitch in mozilla firefox and edge? - javascript

When you click on the face of the cube, it turns this face to the user and the animation stops. When you click again, it smoothly returns to its original state. In Opera and Google Chrome , everything works fine. But in Mozilla and Edge there is a jump in the animation like on the gif below. What is the problem how to fix?
Here is the code for codpen and an example of correct work. https://codepen.io/RJDio/pen/rNVmaOo
Firefox
Edge
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
this.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
setTimeout(function() {
cube.classList.remove("animateTop");
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>

Related

Is there a way to make sure the hovered over element is then moved to be front and center?

I have this project where I was asked to recreate this object. Making it is no issue. The problem is, they also want it to stop when the user hovers over it. Now, this also isn't an issue, as :hover is pretty standard in CSS. The problem is, that when the user hovers over it, the face that stops is stopped exactly where it is.
What I want to know is if there is a way to make the face (or plane, in the case of the code) finish up the distance it needs to go to return to the center of the screen. So for example, say the user is in the ring mode (after clicking toggle shape on the site) and they hover over the number 3. What I want it to do is, if the face is to the left of the center, slowly move back to the right and then stop when it's in the center and vice-versa for if it's to the right. I'm somewhat new to CSS animations so I have no idea how to make this work.
Here is my code that I have so far:
body {
background-color: black;
/* font-family: 'Lucida Grande', Verdana, Arial; */
font-size: 12px;
/* background-image: -webkit-gradient(radial,
50% 500, 1,
50% 500, 400,
from(rgba(255, 255, 255, 0.3)),
to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat; */
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
vertical-align: middle;
line-height: 200px;
font-family: Times, serif;
font-size: 350%;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
/* ---------- ring styles ------------- */
.ring > .one {
-webkit-transform: translateZ(380px);
}
.ring > .two {
-webkit-transform: rotateY(30deg) translateZ(380px);
}
.ring > .three {
-webkit-transform: rotateY(60deg) translateZ(380px);
}
.ring > .four {
-webkit-transform: rotateY(90deg) translateZ(380px);
}
.ring > .five {
-webkit-transform: rotateY(120deg) translateZ(380px);
}
.ring > .six {
-webkit-transform: rotateY(150deg) translateZ(380px);
}
.ring > .seven {
-webkit-transform: rotateY(180deg) translateZ(380px);
}
.ring > .eight {
-webkit-transform: rotateY(210deg) translateZ(380px);
}
.ring > .nine {
-webkit-transform: rotateY(-120deg) translateZ(380px);
}
.ring > .ten {
-webkit-transform: rotateY(-90deg) translateZ(380px);
}
.ring > .eleven {
-webkit-transform: rotateY(300deg) translateZ(380px);
}
.ring > .twelve {
-webkit-transform: rotateY(330deg) translateZ(380px);
}
#shape:hover {
-webkit-animation-play-state: paused;
}
/* #shape.backfaces:hover .plane {
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
-webkit-transform: translate3d(100px,0,175px);
-webkit-transition-property: transform;
-webkit-transition-duration: 1s;
z-index: 2;
} */
<head>
<link rel="stylesheet" href="styles.css">
</head>
<div id="stage">
<div onclick="toggleShape()" id="shape" class="cube backfaces">
<div id="1" onmouseover="ringHoverOver(this)" class="plane one">$3M</div>
<div id="2" class="plane two">$175K</div>
<div id="3" class="plane three">2K</div>
<div id="4" class="plane four">Thousands</div>
<div id="5" class="plane five">30</div>
<div id="6" class="plane six">20+</div>
<div id="7" class="plane seven">25</div>
<div id="8" class="plane eight">Hundreds</div>
<div id="9" class="plane nine">Tens of Thousands</div>
<div id="10" class="plane ten">Dozens</div>
<div id="11" class="plane eleven">15+</div>
<div id="12" class="plane twelve">All </div>
</div>
</div>
<script type="text/javascript" charset="utf-8">
const startingInfo = {}
const shape = document.getElementById('shape');
function hasClassName(inElement, inClassName)
{
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
return regExp.test(inElement.className);
}
function addClassName(inElement, inClassName)
{
if (!hasClassName(inElement, inClassName))
inElement.className = [inElement.className, inClassName].join(' ');
}
function removeClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName)) {
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
var curClasses = inElement.className;
inElement.className = curClasses.replace(regExp, ' ');
}
}
function toggleShape()
{
if (hasClassName(shape, 'cube')) {
removeClassName(shape, 'cube');
addClassName(shape, 'ring');
const planes = document.querySelectorAll(".plane")
for (const plane of planes){
startingInfo[plane.id] = [plane.getBoundingClientRect()['x'], plane.getBoundingClientRect()['y']]
}
}
// Move the ring back in Z so it's not so in-your-face.
var stage = document.getElementById('stage');
if (hasClassName(shape, 'ring'))
stage.style.webkitTransform = 'translateZ(-200px)';
else
stage.style.webkitTransform = '';
}
// const ringHoverOver = (e) => {
// shape.style.webkitTransform = "translate3d(0,0,0)"
// }
</script>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Morphing Power Cubes</title>
<style type="text/css" media="screen">
body {
background-color: black;
color: white;
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
background-image: -webkit-gradient(radial,
50% 500, 1,
50% 500, 400,
from(rgba(255, 255, 255, 0.3)),
to(rgba(255, 255, 255, 0)));
background-repeat: no-repeat;
}
#container {
width: 100%;
height: 700px;
-webkit-perspective: 800; /* For compatibility with iPhone 3.0, we leave off the units here */
-webkit-perspective-origin: 50% 225px;
}
#stage {
width: 100%;
height: 100%;
-webkit-transition: -webkit-transform 2s;
-webkit-transform-style: preserve-3d;
}
#shape {
position: relative;
top: 160px;
margin: 0 auto;
height: 200px;
width: 200px;
-webkit-transform-style: preserve-3d;
}
.plane {
position: absolute;
height: 200px;
width: 200px;
border: 1px solid white;
-webkit-border-radius: 12px;
-webkit-box-sizing: border-box;
text-align: center;
font-family: Times, serif;
font-size: 124pt;
color: black;
background-color: rgba(255, 255, 255, 0.6);
-webkit-transition: -webkit-transform 2s, opacity 2s;
-webkit-backface-visibility: hidden;
}
#shape.backfaces .plane {
-webkit-backface-visibility: visible;
}
#shape {
-webkit-animation: spin 8s infinite linear;
}
#shape:hover {
-webkit-animation: spinhover 8s linear forwards;
}
#-webkit-keyframes spin {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-360deg); }
}
#-webkit-keyframes spinhover {
from { -webkit-transform: rotateY(-360deg); }
to { -webkit-transform: rotateY(0); }
}
/* ---------- cube styles ------------- */
.cube > .one {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(90deg) translateZ(100px);
}
.cube > .two {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) translateZ(100px);
}
.cube > .three {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(90deg) translateZ(100px);
}
.cube > .four {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(180deg) translateZ(100px);
}
.cube > .five {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateY(-90deg) translateZ(100px);
}
.cube > .six {
opacity: 0.5;
-webkit-transform: scale3d(1.2, 1.2, 1.2) rotateX(-90deg) translateZ(100px) rotate(180deg);
}
.cube > .seven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(90deg) translateZ(100px) rotate(180deg);
}
.cube > .eight {
-webkit-transform: scale3d(0.8, 0.8, 0.8) translateZ(100px);
}
.cube > .nine {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(90deg) translateZ(100px);
}
.cube > .ten {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(180deg) translateZ(100px);
}
.cube > .eleven {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateY(-90deg) translateZ(100px);
}
.cube > .twelve {
-webkit-transform: scale3d(0.8, 0.8, 0.8) rotateX(-90deg) translateZ(100px);
}
/* ---------- ring styles ------------- */
.ring > .one {
-webkit-transform: translateZ(380px);
}
.ring > .two {
-webkit-transform: rotateY(30deg) translateZ(380px);
}
.ring > .three {
-webkit-transform: rotateY(60deg) translateZ(380px);
}
.ring > .four {
-webkit-transform: rotateY(90deg) translateZ(380px);
}
.ring > .five {
-webkit-transform: rotateY(120deg) translateZ(380px);
}
.ring > .six {
-webkit-transform: rotateY(150deg) translateZ(380px);
}
.ring > .seven {
-webkit-transform: rotateY(180deg) translateZ(380px);
}
.ring > .eight {
-webkit-transform: rotateY(210deg) translateZ(380px);
}
.ring > .nine {
-webkit-transform: rotateY(-120deg) translateZ(380px);
}
.ring > .ten {
-webkit-transform: rotateY(-90deg) translateZ(380px);
}
.ring > .eleven {
-webkit-transform: rotateY(300deg) translateZ(380px);
}
.ring > .twelve {
-webkit-transform: rotateY(330deg) translateZ(380px);
}
.controls {
width: 80%;
margin: 0 auto;
padding: 5px 20px;
-webkit-border-radius: 12px;
background-color: rgba(255, 255, 255, 0.5);
}
.controls > div {
margin: 10px;
}
</style>
<script type="text/javascript" charset="utf-8">
function hasClassName(inElement, inClassName)
{
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)');
return regExp.test(inElement.className);
}
function addClassName(inElement, inClassName)
{
if (!hasClassName(inElement, inClassName))
inElement.className = [inElement.className, inClassName].join(' ');
}
function removeClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName)) {
var regExp = new RegExp('(?:^|\\s+)' + inClassName + '(?:\\s+|$)', 'g');
var curClasses = inElement.className;
inElement.className = curClasses.replace(regExp, ' ');
}
}
function toggleClassName(inElement, inClassName)
{
if (hasClassName(inElement, inClassName))
removeClassName(inElement, inClassName);
else
addClassName(inElement, inClassName);
}
function toggleShape()
{
var shape = document.getElementById('shape');
if (hasClassName(shape, 'ring')) {
removeClassName(shape, 'ring');
addClassName(shape, 'cube');
} else {
removeClassName(shape, 'cube');
addClassName(shape, 'ring');
}
// Move the ring back in Z so it's not so in-your-face.
var stage = document.getElementById('stage');
if (hasClassName(shape, 'ring'))
stage.style.webkitTransform = 'translateZ(-200px)';
else
stage.style.webkitTransform = '';
}
function toggleBackfaces()
{
var backfacesVisible = document.getElementById('backfaces').checked;
var shape = document.getElementById('shape');
if (backfacesVisible)
addClassName(shape, 'backfaces');
else
removeClassName(shape, 'backfaces');
}
</script>
</head>
<body>
<div class="controls">
<h1>Animations, Transitions and 3D Transforms</h1>
<p>This demo shows some more interesting content using 3D transforms, animations and transitions.
Note that you can still select the text on the the elements, even while they are rotating. Transforms elements remain
fully interactive.</p>
<p>Click Toggle Shape to switch between nested cubes and one big ring. Note how the planes move smoothly to their new locations,
even while the whole shape is rotating. You can even interrupt this transition by clicking again, and they move back smoothly.</p>
<p>Toggle the Backfaces Visible checkbox to turn backfaces on and off using <code>-webkit-backface-visibility</code>.</p>
<div><button onclick="toggleShape()">Toggle Shape</button></div>
<div><input type="checkbox" id="backfaces" onclick="toggleBackfaces()" checked><label for="backfaces">Backfaces visible</label></div>
</div>
<div id="container">
<div id="stage">
<div id="shape" class="cube backfaces">
<div class="plane one">1</div>
<div class="plane two">2</div>
<div class="plane three">3</div>
<div class="plane four">4</div>
<div class="plane five">5</div>
<div class="plane six">6</div>
<div class="plane seven">7</div>
<div class="plane eight">8</div>
<div class="plane nine">9</div>
<div class="plane ten">10</div>
<div class="plane eleven">11</div>
<div class="plane twelve">12</div>
</div>
</div>
</div>
</body>
</html>

Section Overlapping Transition Animation

I Have Section Overlapping Like This.
function forPageOne() {
document.getElementById('home').style.zIndex = 200;
document.getElementById('about').style.zIndex = -200;
}
function forPageTwo() {
document.getElementById('home').style.zIndex = -200;
document.getElementById('about').style.zIndex = 200;
}
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
"
class="page1 home"
id="home"
></section>
<section
style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
"
class="page2 about"
id="about"
></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>
If I Click One Button The Section Is Just Overlapping and I Do Not Need This Just Happen.I need to add the Animation part, one section into another section
And I have no idea how to do this.
If You Can Help with this my problem, I am so thankful About That.
Thank You..!
Example - https://animista.net/play/basic/flip-scale/flip-scale-up-ver
I need to add animation like this when my section is overlapping
You can add a class with the animations on click.
const page1 = document.getElementById('home');
const page2 = document.getElementById('about');
function forPageOne() {
page1.style.zIndex = 200;
page2.style.zIndex = -200;
page1.classList.add("animated");
page2.classList.remove("animated");
}
function forPageTwo() {
page1.style.zIndex = -200;
page2.style.zIndex = 200;
page1.classList.remove("animated");
page2.classList.add("animated");
}
#-webkit-keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
#keyframes flip-scale-up-ver {
0% {
-webkit-transform: scale(1) rotateY(0);
transform: scale(1) rotateY(0);
}
50% {
-webkit-transform: scale(2.5) rotateY(90deg);
transform: scale(2.5) rotateY(90deg);
}
100% {
-webkit-transform: scale(1) rotateY(180deg);
transform: scale(1) rotateY(180deg);
}
}
.animated {
-webkit-animation: flip-scale-up-ver 0.5s linear both;
animation: flip-scale-up-ver 0.5s linear both;
}
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #144ddc;
left: 300px;
" class="page1 home" id="home"></section>
<section style="
position: absolute;
width: 60vh;
height: 60vh;
background-color: #dcc114;
left: 300px;
" class="page2 about" id="about"></section>
<button onclick="forPageOne()">For Page One</button>
<button onclick="forPageTwo()">For Page Two</button>

How to make a smooth transition of a 3d cube animation when you click on one of the faces?

I need to make sure that when you click on one of the faces, the cube rotates smoothly with this face and the animation stops. And when you close the face, the size gradually decreased and the animation continued. Maybe someone did something similar and share an example?
Now done only for the TOP. But how to make a smooth animation I can’t imagine.
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
let closeBtn = document.querySelector('.closeLink');
cube.addEventListener('mouseover', function(){
cube.style.animationPlayState = "paused";
});
cube.addEventListener('mouseout', function(){
cube.style.animationPlayState = "running";
});
side1.addEventListener('click', function(){
cube.classList.remove("animatCube");
cube.classList.add("animateTop");
});
closeBtn.addEventListener('click', function(){
cube.classList.remove("animateTop");
cube.classList.add("animatCube");
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube">
<div class="slide" id="side1"><a class="closeLink" href="">x</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>
When clicking on a face, you can use getComputedStyle(cube).getPropertyValue("transform") to get the current state of transform when clicking on the face.
Then, you appy it in transform property to set that state, remove the animation, add the class to show the face (animateTop) and finally remove the inline transform you just set for the class to take effect.
When going back to normal, you remove inline stopped animation, some the cube animation will happen. After 5 seconds, the animateTop will be removed, then only the animation will continue to run.
I also created two variables for better control: open to check when the face is open or closed. And changing to check when it is transitioning to open or closed.
let open = false;
let changing = false;
document.addEventListener("DOMContentLoaded", function() {
let cube = document.querySelector('#D3Cube');
let side1 = document.querySelector('#side1');
side1.addEventListener('click', function() {
if (changing) {
return;
}
if (!open && !changing) {
open = true;
changing = true;
cube.classList.add('open')
var compTransform = getComputedStyle(cube).getPropertyValue("transform");
cube.style.transform = compTransform;
cube.style.animation = 'none';
cube.classList.add("animateTop");
setTimeout(function() {
cube.classList.remove('closed')
cube.style.removeProperty('transform');
}, 50);
setTimeout(function() {
changing = false;
}, 1640);
} else if (open && !changing) {
open = false;
changing = true;
cube.classList.remove('open')
setTimeout(function() {
cube.classList.remove("animateTop");
cube.classList.add('closed')
changing = false;
}, 4999);
cube.style.removeProperty('animation');
}
});
});
#wrapD3Cube {
width: 500px;
height: 500px;
margin: 200px auto;
}
#D3Cube {
width: 300px;
height: 300px;
top: 50px;
transform-style: preserve-3d;
margin: auto;
position: relative;
transform-style: preserve-3d;
transition: 1.64s;
}
#D3Cube.closed:hover {
animation-play-state: paused;
transition: animation 0s;
}
.closeLink {
color: #f7f7f7;
background-color: #333;
font-size: 20px;
}
.animatCube{
animation: cube 5s linear infinite;
transform: rotateX(-22deg) rotateY(-38deg) rotateZ(0deg);
}
.animateTop{
transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg) scale3d(1.5, 1, 1.5);
}
#keyframes cube {
100% { transform: rotateX(-22deg) rotateY(-398deg) rotateZ(0deg); }
}
#D3Cube > div {
position: absolute;
transition: all 0.5s linear;
width: 300px;
height: 300px;
float: left;
overflow: hidden;
opacity: 0.85;
}
#side1 {
transform: rotatex(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: purple;
backface-visibility:hidden;
}
#side2 {
transform: rotateY(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ffaf1c;
backface-visibility:hidden;
}
#side3 {
transform: translateX(0px) translateY(0px) translateZ(150px);
background-color: #58d568;
backface-visibility:hidden;
}
#side4 {
transform: rotateY(90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #ed3030;
backface-visibility:hidden;
}
#side5 {
transform: rotateY(180deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #1c5ffe;
backface-visibility:hidden;
}
#side6 {
transform: rotateX(-90deg) translateX(0px) translateY(0px) translateZ(150px);
background-color: #f2f215;
backface-visibility:hidden;
}
<div id="wrapD3Cube">
<div id="D3Cube" class="animatCube closed">
<div class="slide" id="side1"><a class="closeLink" href="">X</a></div>
<div class="slide" id="side2">2</div>
<div class="slide" id="side3">3</div>
<div class="slide" id="side4">4</div>
<div class="slide" id="side5">5</div>
<div class="slide" id="side6">6</div>
</div>
</div>

How to control 3D CSS cube with controls

I'm trying to control the cube with arrows (up, down, left, right arrow controls). The problem i'm having is nothing is going on when i press the arrows i'm not sure if it's a Javascript issue or CSS keyframe issue. Another problem i'm having is that once the cube rotates i cant get it to rotate in the same direction when the key is pressed again or keep it in state. No JQuery please. This is what i have tried:
window.addEventListener('load', function(){
let rotate = document.querySelectorAll('.rotate');
let container = document.querySelector('.container');
function rotLeft (key) {
element.animate(rotateLeft);
}
function rotRight (key) {
element.animate(rotateRight);
}
function rotUp (key) {
element.animate(rotateUp);
}
function rotDown (key) {
element.animate(rotateDown);
}
if (key.keyCode == "37"){
rotLeft();
}
else if (key.keyCode == "39"){
rotRight();
}
else if (key.keyCode == "38"){
rotUp();
}
else if (key.keyCode == "40"){
rotDown();
}
});
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
html, body {
height: 100%;
}
.side,
.container {
width: 160px;
height: 160px;
}
.side {
position: absolute;
height: 160px;
width: 160px;
border: 2px solid white;
}
.back {
transform: translateZ(-80px);
background-color: gold;
}
.left {
transform: translateX(-80px) rotateY(90deg);
background-color: gold;
}
.right {
transform: translateX(80px) rotateY(90deg);
background-color: gold;
}
.top {
transform: translateY(-80px) rotateX(90deg);
background-color: gold;
}
.bottom {
transform: translateY(80px) rotateX(90deg);
background-color: gold;
}
.front {
transform: translateZ(80px);
background-color: gold;
}
.container {
transform-style: preserve-3d;
}
.animate {
position: fixed;
top: 10px;
color: wheat;
display: flex;
}
.rotate {
padding: 30px;
background-color: lightgrey;
margin: 5px;
cursor: pointer;
border-radius: 50%;
color: black;
}
.rotateCube {
animation-duration: 1s;
animation-name: rotateLeft;
}
#keyframes rotateLeft {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,1,0,90deg);
}
}
#keyframes rotateRight {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
#keyframes rotateUp {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(1,0,0,90deg);
}
}
#keyframes rotateDown {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
<div id="rotateCube" class="cube">
<div class="back side">back</div>
<div class="left side">left</div>
<div class="right side">r</div>
<div class="top side">t</div>
<div class="bottom side">b</div>
<div class="front side">Front</div>
</div>
Thanks
In order to catch an arrow key event you need to use:
document.onkeydown = function(e) {
e = e || window.event;
console.log("keyCode is: " + e.keyCode);
};
I've added the code to the functions in order to rotate the cube (I've just added the class already defined in the css with js). This is the result:
let cube = document.getElementById("rotateCube");
function rotLeft() {
resetCube()
cube.className += " " + "show-left";
}
function rotRight() {
resetCube()
cube.className += " " + "show-right";
}
function rotUp() {
resetCube()
cube.className += " " + "show-top";
}
function rotDown() {
resetCube()
cube.className += " " + "show-bottom";
}
function resetCube() {
cube.className = "cube";
}
document.onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == "37") {
rotLeft();
} else if (e.keyCode == "39") {
rotRight();
} else if (e.keyCode == "38") {
rotUp();
} else if (e.keyCode == "40") {
rotDown();
}
};
.cube {
width: 200px;
height: 200px;
position: relative;
transform-style: preserve-3d;
transform: translateZ(-100px);
transition: transform 1s;
}
.cube.show-front { transform: translateZ(-100px) rotateY( 0deg); }
.cube.show-right { transform: translateZ(-100px) rotateY( 90deg); }
.cube.show-back { transform: translateZ(-100px) rotateY(-180deg); }
.cube.show-left { transform: translateZ(-100px) rotateY( -90deg); }
.cube.show-top { transform: translateZ(-100px) rotateX( -90deg); }
.cube.show-bottom { transform: translateZ(-100px) rotateX( 90deg); }
html, body {
height: 100%;
}
.side,
.container {
width: 160px;
height: 160px;
}
.side {
position: absolute;
height: 160px;
width: 160px;
border: 2px solid white;
}
.back {
transform: translateZ(-80px);
background-color: gold;
}
.left {
transform: translateX(-80px) rotateY(90deg);
background-color: gold;
}
.right {
transform: translateX(80px) rotateY(90deg);
background-color: gold;
}
.top {
transform: translateY(-80px) rotateX(90deg);
background-color: gold;
}
.bottom {
transform: translateY(80px) rotateX(90deg);
background-color: gold;
}
.front {
transform: translateZ(80px);
background-color: gold;
}
.container {
transform-style: preserve-3d;
}
.animate {
position: fixed;
top: 10px;
color: wheat;
display: flex;
}
.rotate {
padding: 30px;
background-color: lightgrey;
margin: 5px;
cursor: pointer;
border-radius: 50%;
color: black;
}
.rotateCube {
animation-duration: 1s;
animation-name: rotateLeft;
}
#keyframes rotateLeft {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,1,0,90deg);
}
}
#keyframes rotateRight {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
#keyframes rotateUp {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(1,0,0,90deg);
}
}
#keyframes rotateDown {
0% {
transform: rotate3d(0);
}
100% {
transform: rotate3d(0,-1,0,-90deg);
}
}
<div id="rotateCube" class="cube">
<div class="back side">back</div>
<div class="left side">left</div>
<div class="right side">r</div>
<div class="top side">t</div>
<div class="bottom side">b</div>
<div class="front side">Front</div>
</div>

Animation glitches on website

I made a small scale experiment where I was testing an animation that would happen when you repeatedly hit the yellow square, in the jsfiddle below:
http://jsfiddle.net/aritro33/v86tE/5/
However, I am trying to move the animation seen in that jsfiddle to the jsfiddle here when you hit the compose/post circle/button. The animation would be applied to the posts. This is the jsfiddle:
I am having problems however, and after the 3+ times hitting the compose and post button, the animation falls apart.
Any ideas how to put the same animation seen in the first jsfiddle in the second jsfiddle for the posts?
Thanks so much to anyone who can help!
HTML for second experiment:
<div id="compose"><span id="firstspan">Compose</span>
<span id="fourthspan">Post</span>
</div>
<span id="noposts">- No Posts Yet -</span>
<div id="composeheader">
<input type="text" id="secondspan" value="Write Header Here:" />
</div>
<div id="thecolor"></div>
<div class="bubble">
<input type="text" id="thehex" value="#2AC0A3" />
</div>
<div id="body"><span id="thirdspan" contenteditable="true">Write context text here:</span>
</div>
<ul id="allposts"></ul>
CSS for second experiment:
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
body {
background-color: #2D3E50;
}
#compose {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
left: 100px;
top: 40px;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#compose:hover {
background-color: #219B86;
color: #EBF1F1;
}
#firstspan {
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 22px;
top: 75px;
}
#composeheader {
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 175px;
left: 365px;
color: white;
}
#secondspan {
color: white;
font-family:'Roboto';
font-size: 40px;
position: relative;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
left: 15px;
top: 10px;
}
#body {
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 365px;
bottom: 275px;
padding: 20px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
#thirdspan {
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
.thirdspan2{
color: black;
font-family:'Roboto';
outline: 0px solid transparent;
}
#thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
position: relative;
left: 365px;
bottom: 315px;
}
.bubble {
position: relative;
left: 440px;
bottom: 365px;
width: 145px;
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: -15px;
top: 15px;
}
#thehex {
font-family:'Roboto';
font-size: 20px;
height: 30px;
width: 115px;
background-color: white;
position: relative;
border: 0px none;
outline: 0px solid transparent;
top: 10px;
left: 28px;
}
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
#noposts {
color: white;
font-size: 39px;
font-family:'Roboto';
position: relative;
left: 440px;
bottom: 100px;
}
#fourthspan {
color: #2c3e50;
font-family:'Roboto';
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
}
ul#allposts li{
min-height: 140px;
width: 500px;
position: relative;
left: 239px;
bottom: 432px;
}
.thecolor2{
height: 50px;
width: 50px;
border-radius: 100px;
background-color: #2AC0A3;
position: relative;
bottom: 591px;
left: 325px;
}
ul{
list-style-type: none;
}
.composeheader2{
height: 80px;
width: 500px;
background-color:#2AC0A3;
position: relative;
bottom: 581px;
left: 325px;
color: white;
}
.secondspan2{
color: white;
font-family:'Roboto';
font-size: 40px;
background-color: #2AC0A3;
border: 1px solid #2AC0A3;
position: relative;
left: 17px;
top: 13px;
}
.body2{
min-height: 80px;
overflow: hidden;
width: 500px;
background-color: #C6EEE6;
position: relative;
left: 325px;
bottom: 371px;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
JS for second experiment:
var clicktwice = false;
var color;
var forrgb;
var finalrgb2;
var myheader;
//198 238 230
//rgb(42, 192, 163) #2AC0A3
//rgb(198, 238, 230) #C6EEE6
//+156, +46, +67
$('#fourthspan').hide();
$('#thecolor').hide();
$('.bubble').hide();
$('#composeheader').hide();
$('#body').hide();
$('#compose').click(function () {
setInterval(function () {
$('#noposts').fadeTo(10, 0);
}, 3000);
});
$("#thehex").keyup(function () {
color = $("#thehex").val();
forrgb = $("#thehex").val();
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
forrgb = $('#thehex').val().replace('#', '');
var reg = forrgb.length === 3 ? forrgb[0] + forrgb[0] + forrgb[1] + forrgb[1] + forrgb[2] + forrgb[2] : forrgb;
var conv = reg.match(/.{2}/g);
var r = parseInt(conv[0], 16);
r = r + 156;
var g = parseInt(conv[1], 16);
g = g + 46;
var b = parseInt(conv[2], 16);
b = b + 67;
var rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
var finalrgb = ('rgb(' + rgb + ')');
finalrgb2 = finalrgb;
$("#body").css("background-color", finalrgb);
});
$('#compose').click(function () {
if (clicktwice === false) {
color = "#2AC0A3";
finalrgb2 = "rgb(198, 238, 230)";
$("#secondspan").val("Write Header Here:");
$('#thirdspan').text("Write context text here:");
$('#thehex').val(color);
$("#thecolor").css("background-color", color);
$("#secondspan").css("background-color", color);
$("#secondspan").css("border-color", color);
$("#composeheader").css("background-color", color);
$("#body").css("background-color", finalrgb2);
$('#thecolor').fadeTo(0, 1);
$('#body').fadeTo(0,1);
$('.bubble').fadeTo(0,1);
$('#composeheader').fadeTo(0, 1);
$('#firstspan').hide();
$('#fourthspan').show();
$('#thecolor').show();
$('.bubble').show();
$('#composeheader').show();
$('#body').show();
$(".composeheader2").animate({
bottom: '-=248px'
}, 400);
$(".body2").animate({
bottom:'-=248px'
}, 400);
$(".thecolor2").animate({
bottom:'-=245px'
}, 400);
$('#thecolor').addClass('box animated bounceInDown');
$('.bubble').addClass('box animated bounceInDown');
$('#composeheader').addClass('box animated bounceInDown');
$('#body').addClass('box animated bounceInDown');
clicktwice = true;
} else if (clicktwice === true) {
myheader = $("#secondspan").val();
$('.bubble').fadeTo(300, 0);
$('#firstspan').show();
$('#fourthspan').hide();
clicktwice = false;
var thestream = document.getElementById('allposts');
var oneofpost = document.createElement('li');
var thecolor2 = document.createElement('div');
thecolor2.className = "thecolor2";
var composeheader2 = document.createElement('div');
composeheader2.className = "composeheader2";
var secondspan2 = document.createElement('span');
secondspan2.className = "secondspan2";
var body2 = document.createElement('div');
body2.className = "body2";
var thirdspan2 = document.createElement('span');
thirdspan2.className = "thirdspan2";
var bodytext = $('#thirdspan').html();
thirdspan2.innerHTML = bodytext;
body2.style.backgroundColor = finalrgb2;
secondspan2.innerHTML = myheader;
thecolor2.style.backgroundColor = color;
composeheader2.style.backgroundColor = color;
secondspan2.style.backgroundColor = color;
secondspan2.style.borderColor = color;
$('#thecolor').fadeTo(0, 0);
$('#body').fadeTo(0, 0);
$('#composeheader').fadeTo(0, 0);
thestream.appendChild(body2);
thestream.appendChild(thecolor2);
thestream.appendChild(composeheader2);
composeheader2.appendChild(secondspan2);
body2.appendChild(thirdspan2);
$('#thecolor').removeClass('box animated bounceInDown');
$('.bubble').removeClass('box animated bounceInDown');
$('#composeheader').removeClass('box animated bounceInDown');
$('#body').removeClass('box animated bounceInDown');
}
});
I've cleaned this up A LOT, the code should be much easier to read and follow now:
HTML
<script id="empty-message" type="html/template">
<div class="message new box animated bounceInDown">
<div class="thecolor"></div>
<div class="bubble">
<input type="text" class="hexcolor" value="#2AC0A3" />
</div>
<div class="composeheader">
<input type="text" value="Write Header Here:" />
</div>
<div class="body">
<span contenteditable="true">Write context text here:</span>
</div>
</div>
</script>
<div id="message-actions">
<span class="compose">Compose</span>
<span class="post">Post</span>
</div>
<div id="no-posts">- No Posts Yet -</div>
<div id="all-posts"></div>
JavaScript
var getRGB = function(color) {
var rgb = color.replace('#', '');
rgb = rgb.length === 3 ? rgb[0] + rgb[0] + rgb[1] + rgb[1] + rgb[2] + rgb[2] : rgb;
var conv = rgb.match(/.{2}/g);
var r = parseInt(conv[0], 16) + 156;
var g = parseInt(conv[1], 16); + 46;
var b = parseInt(conv[2], 16); + 67;
rgb = r + ',' + g + ',' + b;
rgb = rgb.replace(/NaN/g, ' ... ');
rgb = ('rgb(' + rgb + ')');
return rgb;
};
$(document).ready(function() {
$('#all-posts').on('keyup', '.message.new .hexcolor', function () {
var color = $(this).val();
$(".message.new .thecolor, .message.new .composeheader").css("background-color", color);
$(".message.new .body").css("background-color", getRGB(color));
});
$('#message-actions').click(function () {
if ($('.compose').is(':visible')) {
$('#all-posts').prepend($('#empty-message').html());
} else {
var $message = $('#all-posts .message:first').removeClass('new box animated bounceInDown');
$message.find('.composeheader > input').attr('readonly', true);
$message.find('.body > span').attr('contenteditable', false);
}
$('#no-posts').hide();
$('.compose, .post').toggle();
});
});
CSS
#import url(http://fonts.googleapis.com/css?family=Roboto:100);
/* css for animation */
.animated {
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
-ms-animation-duration: 1s;
-o-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-ms-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
}
.animated.hinge {
-webkit-animation-duration: 2s;
-moz-animation-duration: 2s;
-ms-animation-duration: 2s;
-o-animation-duration: 2s;
animation-duration: 2s;
}
#-webkit-keyframes bounceInDown {
0% {
-webkit-transform: translateY(-2000px);
}
60% {
-webkit-transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInDown {
0% {
-moz-transform: translateY(-2000px);
}
60% {
-moz-transform: translateY(30px);
}
80% {
-moz-transform: translateY(-10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInDown {
0% {
-ms-transform: translateY(-2000px);
}
60% {
-ms-transform: translateY(30px);
}
80% {
-ms-transform: translateY(-10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInDown {
0% {
-o-transform: translateY(-2000px);
}
60% {
-o-transform: translateY(30px);
}
80% {
-o-transform: translateY(-10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInDown {
0% {
transform: translateY(-2000px);
}
60% {
transform: translateY(30px);
}
80% {
transform: translateY(-10px)
}
100% {
transform: translateY()
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
-moz-animation-name: bounceInDown;
-ms-animation-name: bounceInDown;
-o-animation-name: bounceInDown;
animation-name: bounceInDown;
}
#-webkit-keyframes bounceInUp {
0% {
-webkit-transform: translateY(2000px);
}
60% {
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px)
}
100% {
-webkit-transform: translateY()
}
}
#-moz-keyframes bounceInUp {
0% {
-moz-transform: translateY(2000px);
}
60% {
-moz-transform: translateY(-30px);
}
80% {
-moz-transform: translateY(10px)
}
100% {
-moz-transform: translateY()
}
}
#-ms-keyframes bounceInUp {
0% {
-ms-transform: translateY(2000px);
}
60% {
-ms-transform: translateY(-30px);
}
80% {
-ms-transform: translateY(10px)
}
100% {
-ms-transform: translateY()
}
}
#-o-keyframes bounceInUp {
0% {
-o-transform: translateY(2000px);
}
60% {
-o-transform: translateY(-30px);
}
80% {
-o-transform: translateY(10px)
}
100% {
-o-transform: translateY()
}
}
#keyframes bounceInUp {
0% {
transform: translateY(2000px);
}
60% {
transform: translateY(-30px);
}
80% {
transform: translateY(10px)
}
100% {
transform: translateY()
}
}
.bounceInUp {
-webkit-animation-name: bounceInUp;
-moz-animation-name: bounceInUp;
-ms-animation-name: bounceInUp;
-o-animation-name: bounceInUp;
animation-name: bounceInUp;
}
/* page */
body {
background-color: #2D3E50;
font-family:'Roboto';
min-width: 960px;
}
/* message compose */
.message {
margin-top: 40px;
}
.composeheader {
background-color:#2AC0A3;
color: white;
padding: 10px 15px;
clear: both;
}
.composeheader INPUT {
color: white;
font-size: 40px;
background-color: transparent;
border-width: 0;
font-family: 'Roboto';
}
.body {
min-height: 80px;
overflow: hidden;
padding: 20px;
background-color: #C6EEE6;
-moz-box-sizing: border-box;
box-sizing: border-box;
-ms-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
.body > span {
color: black;
outline: 0px solid transparent;
}
.thecolor {
height: 50px;
width: 50px;
background-color: #2AC0A3;
border-radius: 100px;
float: left;
margin-bottom: 10px;
}
.bubble { display: none; }
.message.new .bubble {
height: 50px;
padding: 0px;
background: #FFFFFF;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
float: left;
margin-left: 20px;
display: block;
}
.bubble:after {
content:'';
position: absolute;
border-style: solid;
border-width: 10px 15px 10px 0;
border-color: transparent #FFFFFF;
display: block;
width: 0;
z-index: 1;
left: 55px;
top: 15px;
}
.hexcolor {
font-size: 20px;
height: 30px;
width: 100px;
background-color: transparent;
border-width: 0px;
margin: 10px 5px
}
/* compose button */
#message-actions {
height: 215px;
width: 215px;
background-color: #EBF1F1;
border-radius: 150px;
position: relative;
color: #2c3e50;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
transition: all 0.15s linear;
float: left;
margin: 40px 100px 10px;
}
#message-actions:hover {
background-color: #219B86;
color: #EBF1F1;
}
#no-posts {
color: white;
font-size: 39px;
float: left;
margin-top: 120px;
}
.compose {
font-size: 39px;
position: relative;
left: 22px;
top: 75px;
}
.post {
color: #2c3e50;
font-size: 39px;
position: relative;
left: 70px;
top: 75px;
display: none;
}
/* messages */
#all-posts {
min-height: 140px;
width: 500px;
float: left;
}
jsFiddle Demo
Use meaningful names for your ids and css classes, it makes the code much easier to follow and understand what is going on. Styles such as "firstspan" mean nothing and means you have to keep looking back at the markup to figure out context.
I've cleaned this up as best I can, I'm not good with CSS3 or the animation stuff, I'll leave it to you to fix that up. I think this should be working exactly as you expect now, messages slide down and are added to the stack top down.
EDIT 2:
I changed a lot of the ID selectors to use and refactored the code to make it much simpler. You were also setting the ID on the newly created elements which were all the same, this is wrong and will cause you issues further down the line (ID's should be unique per page).
I cleaned up the JS, combining multiple statements which did the same thing with different selectors. You were using a lot of standard JavaScript getElementById type calls, I changed these create the DOM elements using jQuery instead.
I used an html/template script declaration to create the new elements, it's much cleaner than using jQuery to built up your new DOM elements. Also, your compose and post elements were essentially the same thing. Don't repeat CSS styles, either combine multiple selectors, or just re-use the same structure as I have done. Hopefully the changes make sense.

Categories