Develop Reference

How to update my die animation so that it starts from where it ended after each random roll?

I made a die-rolling animation based on switch statement. The die rotates from a start position (you see the front side - red, num 1) and ends up on a random side with the appropriate number on it from the animation.
I would like to make this animation more fluid upon re-rolls. The animation currently starts over suddenly from the original orientation on re-rolls, but I want it to start from the position it ended on its last roll
I tried to use CSS reverse to this animation just after click before next random number generation, but it didn't work.
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards reverse";
(the code is abbreviated on purpose):
var a = 1;
var cube = document.getElementById("cube");
var num = document.getElementsByClassName("num");
var kindaSpin;
var b; var c; var d; var randomNum; var randomNumStr;
function spin(){
/*RANDOM NUMBER*/
randomNum = Math.floor(Math.random() * 6) + 1;
randomNumStr = randomNum.toString();
for(i = 0; i < num.length; i++)
{num[i].style.animation = "";}
/*SWITCH*/
switch(randomNum) {
case 1:
kindaSpin = 'one';
a = "1";
break;
case 2:
kindaSpin = 'two';
a = "2";
break;
case 3:
kindaSpin = 'three';
a = "3";
break;
case 4:
kindaSpin = 'four';
a = "4";
break;
case 5:
kindaSpin = 'five';
a = "5";
break;
case 6:
kindaSpin = 'six';
a = "6";
break;
}
/*MOVE*/
cube.style.animationDirection = "normal";
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards";
/*NUMBER*/
setTimeout(() => { document.getElementById("num" + a).style.animation = "fadeIn 2s linear forwards";
; }, 2000); }
#import url('https://fonts.googleapis.com/css2?family=Cairo:wght#800&family=Indie+Flower&family=Teko:wght#500;600;700&display=swap');
:root {
--size: 50px;
--half-size: 25px;
--minus-half-size: -25px;
}
* {
box-sizing: border-box;
}
.content {
width: var(--size);
height: var(--size);
margin: 50px auto;
perspective: 1000px;
}
.cube {
position: relative;
transform-style:preserve-3d;
width: var(--size);
height: var(--size);
transform: rotateX(-20deg) rotateY(20deg);
}
/*CUBE SIDES*/
.face {
display: block;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--size);
width: var(--size);
color: aliceblue;
font-family: 'Teko', sans-serif;
}
.one{
background-color: rgba(255, 0, 0, 0.356);
transform: translateZ(var(--half-size)); /*front*/
}
.two {
background-color: rgba(0, 128, 0, 0.349);
transform: translateY(var(--minus-half-size)) rotateX(-270deg) ; /*top*/
}
.three {
background-color: rgba(0, 0, 255, 0.315);
transform: translateX(var(--half-size)) rotateY(90deg); /*right*/
}
.four {
background-color: rgba(255, 255, 0, 0.384);
transform: translateX(var(--minus-half-size)) rotateY(-90deg); /*left*/
}
.five {
background-color: rgba(128, 0, 128, 0.342);
transform: translateY(var(--half-size)) rotateX(270deg); /*bottom*/
}
.six {
background-color: rgba(255, 140, 0, 0.37);
transform: translateZ(var(--minus-half-size)) rotateY(180deg); /*back*/
}
/*NUMBER*/
.num {
position:absolute;
display: block;
opacity: 0%;
}
/*ANIMATION OF ROTATION*/
#keyframes one {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
}
#keyframes two {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
}
#keyframes three {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
}
#keyframes four {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(820deg);}
}
#keyframes five {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
}
#keyframes six {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
}
#keyframes fadeIn {
0%{opacity: 0%;}
100%{opacity: 100%;}
}
<div class="content" onclick="spin()">
<div class="cube" id="cube">
<div class="face one">
<div class="num" id="num1">1</div>
</div>
<div class="face two">
<div class="num" id="num2">2</div>
</div>
<div class="face three">
<div class="num" id="num3">3</div>
</div>
<div class="face four">
<div class="num" id="num4">4</div>
</div>
<div class="face five">
<div class="num" id="num5">5</div>
</div>
<div class="face six">
<div class="num" id="num6">6</div>
</div>
</div>
</div>
Here is how the die looks in the final version with gifs: https://cumclavi.cz/cube/ ...it takes some time to load.

I checked my problem once again... and found a little bit longer but valid solution.
I made #keyframes of every spin in reverse order and call it at begining of roll:
cube.style.animation = `${kindaSpin}-back 2500ms ease-in forwards`;
for
#keyframes one-back
...it also became advantege, because I will be able to create each animation different and make more fluent roll.
anyway. If there will be someone who can explain, why cube.style.animation = `${kindaSpin} 2500ms ease-in reverse forwards`; didnt work? Please write me in comments!
var a = 1;
var cube = document.getElementById("cube");
var num = document.getElementsByClassName("num");
var kindaSpin = "one";
var b; var c; var d; var randomNum; var randomNumStr;
function spin(){
cube.style.animation = kindaSpin + `-back 2500ms ease-in forwards`;
/*RANDOM NUMBER*/
setTimeout(() => {
randomNum = Math.floor(Math.random() * 6) + 1;
randomNumStr = randomNum.toString();
for(i = 0; i < num.length; i++)
{num[i].style.animation = "";}
/*SWITCH*/
switch(randomNum) {
case 1:
kindaSpin = 'one';
a = "1";
break;
case 2:
kindaSpin = 'two';
a = "2";
break;
case 3:
kindaSpin = 'three';
a = "3";
break;
case 4:
kindaSpin = 'four';
a = "4";
break;
case 5:
kindaSpin = 'five';
a = "5";
break;
case 6:
kindaSpin = 'six';
a = "6";
break;
}
/*MOVE*/
cube.style.animationDirection = "normal";
cube.style.animation = kindaSpin + " 2500ms ease-in-out forwards";},2500)
/*NUMBER*/
setTimeout(() => {
document.getElementById("num" + a).style.animation = "fadeIn 2s linear forwards";}, 5000);
}
#import url('https://fonts.googleapis.com/css2?family=Cairo:wght#800&family=Indie+Flower&family=Teko:wght#500;600;700&display=swap');
:root {
--size: 50px;
--half-size: 25px;
--minus-half-size: -25px;
}
* {
box-sizing: border-box;
}
.content {
width: var(--size);
height: var(--size);
margin: 50px auto;
perspective: 1000px;
}
.cube {
position: relative;
transform-style:preserve-3d;
width: var(--size);
height: var(--size);
transform: rotateX(-20deg) rotateY(20deg);
}
/*CUBE SIDES*/
.face {
display: block;
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
height: var(--size);
width: var(--size);
color: aliceblue;
font-family: 'Teko', sans-serif;
}
.one{
background-color: rgba(255, 0, 0, 0.356);
transform: translateZ(var(--half-size)); /*front*/
}
.two {
background-color: rgba(0, 128, 0, 0.349);
transform: translateY(var(--minus-half-size)) rotateX(-270deg) ; /*top*/
}
.three {
background-color: rgba(0, 0, 255, 0.315);
transform: translateX(var(--half-size)) rotateY(90deg); /*right*/
}
.four {
background-color: rgba(255, 255, 0, 0.384);
transform: translateX(var(--minus-half-size)) rotateY(-90deg); /*left*/
}
.five {
background-color: rgba(128, 0, 128, 0.342);
transform: translateY(var(--half-size)) rotateX(270deg); /*bottom*/
}
.six {
background-color: rgba(255, 140, 0, 0.37);
transform: translateZ(var(--minus-half-size)) rotateY(180deg); /*back*/
}
/*NUMBER*/
.num {
position:absolute;
display: block;
opacity: 0%;
}
/*ANIMATION OF ROTATION*/
#keyframes one {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
}
#keyframes one-back {
0% {transform: rotateX(700deg) rotateY(380deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes two {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
}
#keyframes two-back {
0% {transform: rotateX(610deg) rotateY(720deg) rotateZ(20deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes three {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
}
#keyframes three-back {
0% {transform: rotateX(700deg) rotateY(290deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes four {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(820deg);}
}
#keyframes four-back {
0% {transform: rotateX(700deg) rotateY(820deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes five {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
}
#keyframes five-back {
0% {transform: rotateX(790deg) rotateY(360deg) rotateZ(340deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes six {
0% {transform: rotateX(-20deg) rotateY(20deg);}
100% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
}
#keyframes six-back {
0% {transform: rotateX(700deg) rotateY(200deg) rotateZ(360deg);}
100% {transform: rotateX(-20deg) rotateY(20deg);}
}
#keyframes fadeIn {
0%{opacity: 0%;}
100%{opacity: 100%;}
}
<div class="content" onclick="spin()">
<div class="cube" id="cube">
<div class="face one">
<div class="num" id="num1">1</div>
</div>
<div class="face two">
<div class="num" id="num2">2</div>
</div>
<div class="face three">
<div class="num" id="num3">3</div>
</div>
<div class="face four">
<div class="num" id="num4">4</div>
</div>
<div class="face five">
<div class="num" id="num5">5</div>
</div>
<div class="face six">
<div class="num" id="num6">6</div>
</div>
</div>
</div>

Chaining Animista CSS animations with Javascript

I searched for how to chain Animista CSS animations with JavaScript to slide out a tab and slide in a new one. I couldn't find anything but I did find this post on chaining animations using Promises.

I modified the code to slide in and out a container for use in tabs.
// We can declare a generic helper method for one-time animationend listening
let hideElement = (el, animation) => {
return new Promise(resolve => {
const onAnimationEndCb = () => {
el.classList.remove('active', animation);
el.removeEventListener('animationend', onAnimationEndCb);
resolve();
}
el.classList.add(animation);
el.addEventListener('animationend', onAnimationEndCb)
});
}
let showElement = (el, animation) => {
return new Promise(resolve => {
const onAnimationEndCb = () => {
el.classList.remove(animation);
el.removeEventListener('animationend', onAnimationEndCb);
resolve();
}
el.classList.add('active', animation);
el.addEventListener('animationend', onAnimationEndCb)
});
}
let hide_box_one = async () => {
const el = document.getElementById('div_one');
await hideElement(el, 'slide-out-top');
}
let show_box_two = async () => {
const el = document.getElementById('div_two');
await showElement(el, 'slide-in-top');
}
let hide_box_two = async () => {
const el = document.getElementById('div_two');
await hideElement(el, 'slide-out-top');
}
let show_box_one = async () => {
const el = document.getElementById('div_one');
await showElement(el, 'slide-in-top');
}
let change_tabs = async () => {
await hide_box_one();
await show_box_two();
await hide_box_two();
await show_box_one();
await hide_box_one();
await show_box_two();
await hide_box_two();
await show_box_one();
await hide_box_one();
await show_box_two();
await hide_box_two();
await show_box_one();
}
const btn = document.getElementById('btn');
btn.onclick = function() {
change_tabs().then(() => console.log('tabs changed'));
};
#div_one {
width: 50px;
height: 50px;
border: 10px solid red;
display: none;
}
#div_one.active{
display:block;
}
#div_two {
width: 50px;
height: 50px;
border: 10px solid blue;
display: none;
}
#div_two.active{
display:block;
}
#btn{
margin-top:10px;
border: 2px solid black;
background: #fff;
padding: 15px;
}
.slide-in-top {
-webkit-animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
animation: slide-in-top 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}
.slide-out-top {
-webkit-animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
animation: slide-out-top 0.6s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}
/* ----------------------------------------------
* Generated by Animista on 2020-8-22 19:10:58
* Licensed under FreeBSD License.
* See http://animista.net/license for more info.
* w: http://animista.net, t: #cssanimista
* ---------------------------------------------- */
/**
* ----------------------------------------
* animation slide-in-top
* ----------------------------------------
*/
#-webkit-keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#keyframes slide-in-top {
0% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
}
#-webkit-keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
#keyframes slide-out-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
100% {
-webkit-transform: translateY(-1000px);
transform: translateY(-1000px);
opacity: 0;
}
}
<div id="div_one" class="active"></div>
<div id="div_two"></div>
<button id="btn" type="button">Next Tab</button>
enter code here

How to translate element to act like a odometer

I've got code:
<div class="wrap2" id="wrap" data-num="0">
<span>0</span><span>1</span>...
CSS:
.wrap2[data-num="0"] {
transfom:translate(0, 0);
}
.wrap2[data-num="1"] {
transform:translate(0, -30px);
}
https://jsfiddle.net/9t4zsuov/2/
But i want to act like a odometer - numbers have to roll only to top, not bottom. Any ideas, how to do that ?

As #codyThompsonDev said, a rollover area is the best way to implement this. Something I think he missed though, is what happens when you go from a rollover number to a non-rollover number.
For example, let's say that the odometer randomly tries to roll to 4, then 3, then 1. The first time, it can roll to 4 no problem. The second time, it has to roll to "13", in the rollover zone. But then, it tries to roll to "11" which is also in the rollover zone, causing it to roll backwards.
To achieve this effect under those circumstances, you must snap the dial back out of the rollover zone, then roll forward again. I would implement this using window.requestAnimationFrame().
I've made a fiddle to demonstrate this: https://jsfiddle.net/tprobinson/8k125fmz/67/
Add the debugBackground class to dupa2 to see the rollover effect visually.
I would recommend generating the CSS classes with a preprocessor like Sass, as writing them by hand can be error prone as well.
document.getElementById("rand").addEventListener("click", randomize);
const debug = document.getElementById("debug");
const dupa = document.getElementById("cipa");
let animationInProgress = null
function setDebug(num) {
debug.textContent = 'Number is really: ' + num
}
function animateOdometer(newNum) {
// Add the smooth class and set the number to let it roll.
dupa.classList.add('smooth')
setDebug(newNum)
dupa.dataset.num = newNum
// In 1000 ms, remove the smooth class
animationInProgress = window.setTimeout(() => {
dupa.classList.remove('smooth')
animationInProgress = null
}, 1000)
}
function randomize() {
let oldNum = Number.parseInt(dupa.dataset.num)
if (oldNum === undefined || oldNum === null) {
oldNum = 0
}
let newNum = Math.floor(Math.random() * 9) + 0;
// If an animation is already in progress, cancel it
if (animationInProgress) {
window.clearTimeout(animationInProgress)
dupa.classList.remove('smooth')
animationInProgress = null
}
// If the new number is before our old number
// we have to force a roll forwards
if (newNum < oldNum) {
newNum += 10
}
if (oldNum > 9) {
// The dial was already rolled over. We need to
// snap the dial back before rolling again.
// Wait for a frame so we can snap the dial back
dupa.dataset.num = oldNum - 10
setDebug(oldNum - 10)
dupa.classList.remove('smooth')
window.requestAnimationFrame(() => {
// Wait for one frame to let the snapback happen
window.requestAnimationFrame(() => {
// Then roll forward
animateOdometer(newNum)
})
})
return
}
// Roll the dial
animateOdometer(newNum)
}
#rand,
#debug {
margin-top: 50px;
}
.dupa1 {
height: 30px;
width: 30px;
border: 1px solid #000;
overflow: hidden;
}
.dupa2.smooth {
transition: all 1s ease;
}
.dupa2 span {
height: 30px;
width: 30px;
display: block;
text-align: center;
line-height: 30px;
}
.dupa2.debugBackground {
background: linear-gradient(to bottom, #ffffff 0%, #ffffff 50%, #207cca 51%, #207cca 100%);
}
.dupa2[data-num="0"] {
transform: translate(0, 0);
}
.dupa2[data-num="1"] {
transform: translate(0, -30px);
}
.dupa2[data-num="2"] {
transform: translate(0, -60px);
}
.dupa2[data-num="3"] {
transform: translate(0, -90px);
}
.dupa2[data-num="4"] {
transform: translate(0, -120px);
}
.dupa2[data-num="5"] {
transform: translate(0, -150px);
}
.dupa2[data-num="6"] {
transform: translate(0, -180px);
}
.dupa2[data-num="7"] {
transform: translate(0, -210px);
}
.dupa2[data-num="8"] {
transform: translate(0, -240px);
}
.dupa2[data-num="9"] {
transform: translate(0, -270px);
}
.dupa2[data-num="10"] {
transform: translate(0, -300px);
}
.dupa2[data-num="11"] {
transform: translate(0, -330px);
}
.dupa2[data-num="12"] {
transform: translate(0, -360px);
}
.dupa2[data-num="13"] {
transform: translate(0, -390px);
}
.dupa2[data-num="14"] {
transform: translate(0, -420px);
}
.dupa2[data-num="15"] {
transform: translate(0, -450px);
}
.dupa2[data-num="16"] {
transform: translate(0, -480px);
}
.dupa2[data-num="17"] {
transform: translate(0, -510px);
}
.dupa2[data-num="18"] {
transform: translate(0, -540px);
}
.dupa2[data-num="19"] {
transform: translate(0, -570px);
}
<div class="dupa1">
<div class="dupa2" id="cipa" data-num="0">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<div id="debug">
Number is really: 0
</div>
<button id="rand">rand</button>

You can use two sets of numbers and a little bit of extra javascript to achieve this effect.
If the new number is less than the current number, use a second set of numbers (digits 0-9) that are farther down. As the css animation transitions from the first set of numbers to the second, it will appear as if the odometer is "rolling over".
When the animation completes, switch back to the first set of numbers without animating (no transition class).
I've made a working example based off of your original jsfiddle.
NOTE: This makes use of the .classList property of DOM elements, and the tranistionend event. You may have to add vendor prefixes (i.e. webkitTransitionEnd) and implement your own version of .classList, depending on what browsers you need to support.
document.getElementById("rand").addEventListener("click", randomize);
document.getElementById("cipa").addEventListener("transitionend", transitionEnd);
function randomize() {
setNumber(Math.floor(Math.random() * 9));
}
function setNumber(newNumber) {
let dupa = document.getElementById("cipa");
// assumes dupa.dataset.num always be a valid int
let selected = parseInt(dupa.dataset.num);
if (newNumber === selected) return; // if same as existing, don't do anything
// if the new number is less than the old number
// use the second set of numbers to avoid moving "backwards"
if (newNumber < selected) dupa.classList.add("rolledover");
// animate to the new position
dupa.classList.add("transitioning");
dupa.dataset.num = "" + newNumber;
}
function transitionEnd() {
let dupa = document.getElementById("cipa");
// don't animate
dupa.classList.remove("transitioning");
dupa.classList.remove("rolledover");
}
#rand {
margin-top: 50px;
}
.dupa1 {
height: 30px;
width: 30px;
border: 1px solid #000;
overflow: hidden;
}
.dupa2.transitioning {
transition: all 1s ease;
}
.dupa2 span {
height: 30px;
width: 30px;
display: block;
text-align: center;
line-height: 30px;
}
.dupa2[data-num="0"] {
transform: translate(0, 0);
}
.dupa2[data-num="1"] {
transform: translate(0, -30px);
}
.dupa2[data-num="2"] {
transform: translate(0, -60px);
}
.dupa2[data-num="3"] {
transform: translate(0, -90px);
}
.dupa2[data-num="4"] {
transform: translate(0, -120px);
}
.dupa2[data-num="5"] {
transform: translate(0, -150px);
}
.dupa2[data-num="6"] {
transform: translate(0, -180px);
}
.dupa2[data-num="7"] {
transform: translate(0, -210px);
}
.dupa2[data-num="8"] {
transform: translate(0, -240px);
}
.dupa2[data-num="9"] {
transform: translate(0, -270px);
}
.rolledover.dupa2[data-num="0"] {
transform: translate(0, -300px);
}
.rolledover.dupa2[data-num="1"] {
transform: translate(0, -330px);
}
.rolledover.dupa2[data-num="2"] {
transform: translate(0, -360px);
}
.rolledover.dupa2[data-num="3"] {
transform: translate(0, -390px);
}
.rolledover.dupa2[data-num="4"] {
transform: translate(0, -420px);
}
.rolledover.dupa2[data-num="5"] {
transform: translate(0, -450px);
}
.rolledover.dupa2[data-num="6"] {
transform: translate(0, -480px);
}
.rolledover.dupa2[data-num="7"] {
transform: translate(0, -510px);
}
.rolledover.dupa2[data-num="8"] {
transform: translate(0, -540px);
}
.rolledover.dupa2[data-num="9"] {
transform: translate(0, -570px);
}
<div class="dupa1">
<div class="dupa2" id="cipa" data-num="0">
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
<span>0</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span>7</span>
<span>8</span>
<span>9</span>
</div>
</div>
<button id="rand">rand</button>

Thank you a lot.
But I stuck in another problem similar, but with array.
I've made a fiddle for better view to the problem: https://jsfiddle.net/zr2dLbge/
<div class="wrap" id="wrap"></div>
.wrap{
border:1px solid #000;
display: inline-block;
height:30px;
border-right: none;
}
.numbers{
width:30px;
height:30px;
display:inline-block;
overflow: hidden;
border-right: 1px solid #000;
}
.numbers span{
display: block;
width:30px;
height:30px;
line-height: 30px;
text-align: center;
}
.numbers[data-num="0"] div{
transform: translate(0, 0);
transition: all 1s ease;
}
.numbers[data-num="1"] div{
transform: translate(0, -30px);
transition: all 1s ease;
}
.numbers[data-num="2"] div{
transform: translate(0, -60px);
transition: all 1s ease;
}
.numbers[data-num="3"] div{
transform: translate(0, -90px);
transition: all 1s ease;
}
.numbers[data-num="4"] div{
transform: translate(0, -120px);
transition: all 1s ease;
}
.numbers[data-num="5"] div{
transform: translate(0, -150px);
transition: all 1s ease;
}
.numbers[data-num="6"] div{
transform: translate(0, -180px);
transition: all 1s ease;
}
.numbers[data-num="7"] div{
transform: translate(0, -210px);
transition: all 1s ease;
}
.numbers[data-num="8"] div{
transform: translate(0, -240px);
transition: all 1s ease;
}
.numbers[data-num="9"] div{
transform: translate(0, -270px);
transition: all 1s ease;
}
let arr = [];
var numbers = 1234561234;
const wrap = document.getElementById("wrap");
function toArray (val) {
return (val).toString().split('');
}
arr = toArray(numbers);
for (let i = 0; i < arr.length; i++) {
div = document.createElement('div'),
div.className = "numbers";
div.dataset.num = arr[i];
div.dataset.x = i;
div.innerHTML = "<div><span>0</span><span>1</span><span>2</span><span>3</span><span>4</span><span>5</span><span>6</span><span>7</span><span>8</span><span>9</span></div>"
wrap.appendChild(div);
}
setInterval(function(){
arr.forEach( (k) => {
arr[k] = Math.floor(Math.random() * 9) + 0;
})
for (let i = 0; i < arr.length; i++) {
document.querySelector('.numbers[data-x="'+i+'"]').dataset.num = arr[i];
}
}, 1000);
unfortunately window.requestAnimationFrame() doesn't work for me in this case

pull variable from css with js

I'm trying to get an action to occur when one clicks on an image, however only when the image is at full opacity
function func() {
if ($('.Absolute-Center').css('opacity') == 1) {
alert("it works");
}
}
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 20s linear;
}
img.Absolute-Center:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 20s linear;
}
<img src="picture.png" class="Absolute-Center" onclick="func()" />

Try using transitionend event , .addClass() , .removeClass() ; removing :hover from css
function func(e) {
if ($(this).css("opacity") == 1) {
alert("it works");
$(this).removeClass("clicked")
}
};
$(".Absolute-Center").on({
"click": function() {
$(this).addClass("clicked")
},
"transitionend": func
})
.Absolute-Center {
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
img.Absolute-Center {
opacity: 0.05;
filter: alpha(opacity=5);
transition: opacity 20s linear;
}
img.Absolute-Center.clicked {
opacity: 1;
filter: alpha(opacity=100);
transition: opacity 20s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<img src="http://lorempixel.com/50/50" class="Absolute-Center" />

This should help improve understanding and should be easily adaptable to do exactly what you want.
$(function() {
$('img').on('click', function() {
var alpha = $(this).css('opacity');
$("#msg").text((alpha == 1) ? "full" : alpha);
}).on('transitionend', function() {
var alpha = $(this).css('opacity');
if (alpha == 1) {
$("#msg2").fadeIn().delay(700).fadeOut();
} else {
$("#msg3").fadeIn().delay(700).fadeOut();
}
});
});
img {
border: 1px solid #000;
}
img {
opacity: 0.05;
filter: alpha(opacity=5);
-webkit-transition: opacity 5s linear;
}
img:hover {
opacity: 1;
filter: alpha(opacity=100);
-webkit-transition: opacity 5s linear;
}
#msg2, #msg3 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<img src="picture.png" />
<div>Last clicked at opacity: <span id="msg"></span>
</div>
<div id="msg2">End of fade-IN transition</div>
<div id="msg3">End of fade-OUT transition</div>

appear image selecte div one by one

I have InsertProduct.aspx page that user can upload 6 image in this page for their product...
I want at first in page be 1 div that I define on it fileupload control when users click on Selectimage they can upload their first image when they upload their first image then appear second DIV that they can upload their second image when they upload second image third div will appear and they can select third image it will goes up to 6 image
users can upload 6 image and they can delete their uploaded image...
how I can do it?
Best regards
Neda

You could use one of the many file upload jQuery plugins, but I think the easiest way to implement this is to use HTML5 FileReader.
Please have a look at this jsFiddle. (The demo here at SO is not working because I haven't found the ajax echo service here yet. Maybe I'll fix this later.)
The code is not perfect but it should help you getting started.
You could improve/check the following:
Upload the images immediately. At the moment they're uploaded with an upload all button.
Handling of removing images needs to be improved. No server images are removed, just the currently selected image will be removed.
Initial loading of the previously uploaded server images not implemented.
Uploading takes pretty long in the fiddle, not sure if my files where too large. But you could probably check if binary json is better/faster then base64 encoded images.
CSS styling can be improved.
(function () {
var $app = $('#uploadApp');
var formTemplate = function (id, handler) {
$(document).on('change', '#file_' + id, handler);
var $tmpl = $('<div/>').addClass('productPane').append([
$('<h1/>').text('Image ' + id),
$('<div/>').addClass('imageContainer'),
$('<input type="file"/>').attr('id', 'file_' + id)]);
return $tmpl.clone();
};
// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
var rest = this.slice((to || from) + 1 || this.length);
this.length = from < 0 ? this.length + from : from;
return this.push.apply(this, rest);
};
var uploader = {
imageCount: 0,
MAX_IMAGES: 6,
images: [],
init: function () {
this.addForm();
$('#uploadAll').click(this.uploadAll.bind(this));
},
addForm: function () {
this.imageCount++;
$app.append(formTemplate(this.imageCount,
$.proxy(this.upload, this)));
},
uploadAll: function () {
if (this.images.length == 0) return; // nothing to upload
var json_obj = {
json: $.toJSON(this.images),
delay: 1
};
Pace.track(function () {
$.ajax({
async: true,
cache: false,
type: 'POST',
url: 'http://jsfiddle.net/echo/json/',
//jsonp: "callback",
data: json_obj,
dataType: 'json', //'jsonp',
success: function (data) {
console.log(data, 'images uploaded');
// just a test to show which images are uploaded
$('#debug').append('<h2>Uploaded images</h2>');
$.each(data, function (index, image) {
$('#debug').append($('<img/>')
.attr('src', image).width(50));
});
}
});
});
},
upload: function (evt) {
//console.log(evt);
evt.preventDefault();
var that = this;
var files = evt.target.files; // FileList object
var curIndex = $(evt.target).attr('id').split('_')[1]
var $productPane = $(evt.target).closest('.productPane');
// files is a FileList of File objects. List some properties.
// var output = [];
//for (var i = 0, f; f = files[i]; i++) {
f = files[0];
var reader = new FileReader();
reader.onload = function (evt) {
var img = new Image();
img.src = evt.target.result;
img.width = 100;
this.images[curIndex - 1] = evt.target.result;;
var $curImg = $productPane.find('.imageContainer').html($(img));
$productPane.append($('<button/>').text('remove')
.click(function () {
$curImg.empty(); // remove image
that.images.remove(curIndex - 1); // delete image from array
f = null; // clear current file object
$('#file_' + curIndex).val(''); // clear file input
$(this).remove(); // delete remove button
}));
}.bind(this);
reader.readAsDataURL(f);
if (this.imageCount < this.MAX_IMAGES && $(evt.target).attr('id').split('_')[1] == this.imageCount) {
// we can add one more image and user clicked on last input
//console.log(this.imageCount);
this.addForm();
}
// if you need file parameters here are some example properties
/*output.push(escape(f.name), '(', f.type || 'n/a', ') - ',
f.size, ' bytes, last modified: ',
f.lastModifiedDate.toLocaleDateString());*/
//}
//$('#debug').append(output);
}
};
uploader.init();
})();
.productPane {
float: left;
width: 200px;
height: 250px;
}
.productPane h1 {
font-size: 1.1em;
}
/*pacejs template follows here -- flash theme */
/* This is a compiled file, you should be editing the file in the templates directory */
.pace {
-webkit-pointer-events: none;
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.pace-inactive {
display: none;
}
.pace .pace-progress {
background: #2299dd;
position: fixed;
z-index: 2000;
top: 0;
right: 100%;
width: 100%;
height: 2px;
}
.pace .pace-progress-inner {
display: block;
position: absolute;
right: 0px;
width: 100px;
height: 100%;
box-shadow: 0 0 10px #2299dd, 0 0 5px #2299dd;
opacity: 1.0;
-webkit-transform: rotate(3deg) translate(0px, -4px);
-moz-transform: rotate(3deg) translate(0px, -4px);
-ms-transform: rotate(3deg) translate(0px, -4px);
-o-transform: rotate(3deg) translate(0px, -4px);
transform: rotate(3deg) translate(0px, -4px);
}
.pace .pace-activity {
display: block;
position: fixed;
z-index: 2000;
top: 15px;
right: 15px;
width: 14px;
height: 14px;
border: solid 2px transparent;
border-top-color: #2299dd;
border-left-color: #2299dd;
border-radius: 10px;
-webkit-animation: pace-spinner 400ms linear infinite;
-moz-animation: pace-spinner 400ms linear infinite;
-ms-animation: pace-spinner 400ms linear infinite;
-o-animation: pace-spinner 400ms linear infinite;
animation: pace-spinner 400ms linear infinite;
}
#-webkit-keyframes pace-spinner {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-moz-keyframes pace-spinner {
0% {
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-moz-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-o-keyframes pace-spinner {
0% {
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#-ms-keyframes pace-spinner {
0% {
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes pace-spinner {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://jquery-json.googlecode.com/files/jquery.json-2.2.min.js"></script>
<div id="uploadApp">
<button id="uploadAll">Upload images</button>
<br/>
</div>
<div id="debug"></div>
<script>
window.paceOptions = {
//minTime: 2000,
//ghostTime:500,
//startOnPageLoad:false,
//target: '.test1'
}
</script>
<script src="https://raw.github.com/HubSpot/pace/master/pace.js"></script>