I am creating a split-flap. It works fine in Chrome, but in firefox, during the second rotation period, it is not smooth as in chrome. How can I fix it?
let baseDiv, lowerDiv, middleDiv, upperDiv;
document.addEventListener("DOMContentLoaded",()=>{
baseDiv = document.getElementById("base");
lowerDiv = document.getElementById("lower");
middleDiv = document.getElementById("middle");
upperDiv = document.getElementById("upper");
});
let backward = () => {
lowerDiv.classList.add("rotate0to90");
}
let forward = () => {
upperDiv.classList.add("rotate0to_90");
}
let upperHandler = () => {
upperDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "lowerHalfCard-after zIndex4 rotate90to0 transform0to90"
}
let lowerHandler = () => {
lowerDiv.classList.replace("zIndex4", "zIndex2");
middleDiv.innerHTML=baseDiv.innerHTML;
middleDiv.className = "upperHalfCard-after zIndex4 rotate_90to0 transform0to_90";
}
let middleHandler = () => {
upperDiv.innerHTML=baseDiv.innerHTML;
lowerDiv.innerHTML=baseDiv.innerHTML;
upperDiv.className = "upperHalfCard-after zIndex4";
lowerDiv.className = "lowerHalfCard-after zIndex2";
middleDiv.className = "hide";
}
.fullCard,
.lowerHalfCard,
.upperHalfCard,
.fullCard-after,
.lowerHalfCard-after,
.upperHalfCard-after {
background-color: inherit;
border-radius: 10px;
height: 100%;
width: 100%;
position: absolute;
align-items: center;
display: flex;
justify-content: center;
vertical-align: middle;
}
.fullCard-after::after,
.upperHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard-after::after {
content: "";
display: block;
position: absolute;
height: 4px;
background-color: inherit;
width: 100%;
top: calc(50% - 2px);
}
.lowerHalfCard,
.lowerHalfCard-after {
clip-path: polygon(0% 50%, 100% 50%, 100% 100%, 0% 100%);
}
.upperHalfCard,
.upperHalfCard-after {
clip-path: polygon(0% 0%, 100% 0%, 100% 50%, 0% 50%);
}
.splitFlap {
background-color: black;
box-sizing: border-box;
border-radius: 10px;
width: 100px;
height: 150px;
position: relative;
}
.rotate0to90 {
animation-name: r0to90;
}
.rotate90to0 {
animation-name: r90to0;
}
.rotate0to_90 {
animation-name: r0to_90;
}
.rotate_90to0 {
animation-name: r_90to0;
}
.rotate0to90,
.rotate90to0,
.rotate0to_90,
.rotate_90to0 {
animation-duration: 0.3s;
animation-fill-mode: forwards;
}
#keyframes r0to90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(90deg);
}
}
#keyframes r90to0 {
from {
transform: rotateX(90deg);
}
to {
transform: rotateX(0deg);
}
}
#keyframes r0to_90 {
from {
transform: rotateX(0deg);
}
to {
transform: rotateX(-90deg);
}
}
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
}
}
.transform0to_90 {
transform: rotateX(-90deg);
}
.transform0to90 {
transform: rotateX(90deg);
}
.hide {
display: none
}
.zIndex2 {
z-index: 2;
}
.zIndex4 {
z-index: 4;
}
.zIndex10 {
z-index: 10;
}
.blue {
background-color: blue
}
.green {
background-color: green
}
.red {
background-color: red
}
.orange {
background-color: orange
}
<div class="splitFlap">
<div id="base" class="fullCard-after zIndex2">
<img src="img/1_100.png">
</div>
<div class="upperHalfCard-after zIndex4" id="upper" onAnimationEnd="upperHandler()">
<img src="img/0_100.png">
</div>
<div id="middle" class="hide" onAnimationEnd="middleHandler()">
</div>
<div class="lowerHalfCard-after zIndex2" id="lower" onAnimationEnd="lowerHandler()">
<img src="img/0_100.png">
</div>
</div>
<p>
<button onClick="forward()">
+
</button>
<button onClick="backward()">
-
</button>
</p>
After several tries, I have made it work properly by adding the following CSS attribute to the splitFlap class
transform-style: preserve-3d;
Use the -moz- extension before all your transitions in CSS. That will make sure Mozilla "understands" it.
Example:
#keyframes r_90to0 {
from {
transform: rotateX(-90deg);
-moz-transform: rotateX(-90deg);
}
to {
transform: rotateX(0deg);
-moz-transform: rotateX(0deg);
}
}
Related
I have a responsive menu bar that has a dropdown list which is named three. However, I cannot make its format same with the other title and it moves once it is being hovered. Is there any way that the format title of three be the same as one, two, four and five? And when it is being hovered, is it possible that its position be in a fixed place? Please help. I already tried inline but it doesn't work either. And kindly run the snippet in full screen.
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.11.0.js'></script>
<link href="https://getbootstrap.com/docs/4.1/dist/css/bootstrap.min.css" rel="stylesheet" />
<link rel = "icon" href = "https://cdn.iconscout.com/icon/free/png-256/data-fiveence-46-1170621.png" type = "image/x-icon">
</head>
<style>
#import url('https://fonts.googleapis.com/css?family=Abel&display=swap');
{
box-sizing: border-box;
}
.strips {
min-height: 100vh;
text-align: center;
overflow: hidden;
color: white;
}
.strips__strip {
will-change: width, left, z-index, height;
position: absolute;
width: 20%;
min-height: 100vh;
overflow: hidden;
cursor: pointer;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip:nth-child(1) {
left: 0;
}
.strips__strip:nth-child(2) {
left: 20vw;
}
.strips__strip:nth-child(3) {
left: 40vw;
}
.strips__strip:nth-child(4) {
left: 60vw;
}
.strips__strip:nth-child(5) {
left: 80vw;
}
.strips__strip:nth-child(1) .strip__content {
background:#29363B;
transform: translate3d(-100%, 0, 0);
animation-name: strip1;
animation-delay: 0.1s;
}
.strips__strip:nth-child(2) .strip__content {
background: #EA495F;
transform: translate3d(0, 100%, 0);
animation-name: strip2;
animation-delay: 0.2s;
}
.strips__strip:nth-child(3) .strip__content {
background: #F4837D;
transform: translate3d(0, -100%, 0);
animation-name: strip3;
animation-delay: 0.3s;
}
.strips__strip:nth-child(4) .strip__content {
background: #FAA664;
transform: translate3d(0, 100%, 0);
animation-name: strip4;
animation-delay: 0.4s;
}
.strips__strip:nth-child(5) .strip__content {
background: #99B998;
transform: translate3d(100%, 0, 0);
animation-name: strip5;
animation-delay: 0.5s;
}
#media screen and (max-width: 760px) {
.strips__strip {
min-height: 20vh;
}
.strips__strip:nth-child(1) {
top: 0;
left: 0;
width: 100%;
}
.strips__strip:nth-child(2) {
top: 20vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(3) {
top: 40vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(4) {
top: 60vh;
left: 0;
width: 100%;
}
.strips__strip:nth-child(5) {
top: 80vh;
left: 0;
width: 100%;
}
}
.strips .strip__content {
animation-duration: 1s;
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
animation-fill-mode: both;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-decoration: none;
}
.strips .strip__content:hover:before {
transform: skew(-30deg) scale(3) translate(0, 0);
opacity: 0.1;
}
.strips .strip__content:before {
<!-- content: ""; -->
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: white;
opacity: 0.05;
transform-origin: center center;
transform: skew(-30deg) scaleY(1) translate(0, 0);
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips .strip__inner-text {
will-change: transform, opacity;
position: absolute;
z-index: 5;
top: 50%;
left: 50%;
width: 70%;
transform: translate(-50%, -50%) scale(0.5);
opacity: 0;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
.strips__strip--expanded {
width: 100%;
top: 0 !important;
left: 0 !important;
z-index: 3;
cursor: default;
}
#media screen and (max-width: 760px) {
.strips__strip--expanded {
min-height: 100vh;
}
}
.strips__strip--expanded .strip__content:hover:before {
transform: skew(-30deg) scale(1) translate(0, 0);
opacity: 0.05;
}
.strips__strip--expanded .strip__title {
opacity: 0;
}
.strips__strip--expanded .strip__inner-text {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.strip__title {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 2vw;
color: white;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
#media screen and (max-width: 760px) {
.strip__title {
font-size: 28px;
}
}
.strip__close {
position: absolute;
right: 3vw;
top: 3vw;
opacity: 0;
z-index: 10;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
cursor: pointer;
transition-delay: 0.5s;
}
.strip__close--show {
opacity: 1;
}
#keyframes strip1 {
0% {
transform: translate3d(-100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip2 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip3 {
0% {
transform: translate3d(0, -100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip4 {
0% {
transform: translate3d(0, 100%, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
#keyframes strip5 {
0% {
transform: translate3d(100%, 0, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
body {
font-family: 'Abel', sans-serif;
-webkit-font-smoothing: antialiased;
text-rendering: geometricPrecision;
line-height: 1.5;
}
h1, h2 {
font-weight: 300;
}
.fa {
font-size: 30px;
color: white;
}
h2 {
font-size: 36px;
margin: 0 0 16px;
}
p {
margin: 0 0 16px;
}
p {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent 5px
);
background-repeat: repeat-x;
background-size: 100%;
color: #000;
padding-left: 10px;
text-decoration: none;
}
p:hover {
background:
linear-gradient(
to right,
var(--mainColor) 0%,
var(--mainColor) 5px,
transparent
);
}
:root {
--mainColor: white;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: relative;
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
</style>
<body>
<section class="strips">
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="one()">one</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">two</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<p class="strip__title" style="margin-left:-15px">three</p>
<div class="dropdown-menu">
<a class="dropdown-item" onclick="sdct()">two</a>
<a class="dropdown-item" onclick="four()">four</a>
</div>
</li>
</ul>
</div>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="#">four</a>
</div>
</article>
<article class="strips__strip">
<div class="strip__content">
<p class="strip__title" onclick="">five</a>
</div>
</article>
<i class="fa fa-close strip__close"></i>
</section>
</body>
</html>
.navbar-nav {
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
width: 100%; /* add a width */
padding-left: 0;
margin-bottom: 0;
list-style: none;
}
.navbar-nav li:hover>.dropdown-menu {
display: block;
margin: 0;
position: absolute; /*position is changes (relative --> absolute)*/
z-index: 2;
width: 100%;
font-size: 1.5vw;
transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}
I'm still a beginner in javascript and CSS,
I have a bookmark heart icon I want to show alert depending if the icon checked or unchecked.
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});
#yellow: #FFAC33;
#gray: #CCC;
#red: #E86C6C;
button#favorite {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
}
#keyframes favorite {
.favorite;
}
#-webkit-keyframes favorite {
.favorite;
}
#keyframes favoriteHollow {
.favoriteHollow;
}
#-webkit-keyframes favoriteHollow {
.favoriteHollow;
}
button#heart {
background: transparent;
border: 0;
span {
padding: 20px;
font-size: 70px;
font-weight: normal;
color: #gray;
position: relative;
span {
position: absolute !important;
top: 0;
left: 0;
font-size: 70px;
}
}
&.faved {
span {
-webkit-animation: heart 0.5s;
animation: heart 0.5s;
color: #red;
span {
z-index: 1000;
-webkit-animation: heartHollow 0.5s;
animation: heartHollow 0.5s;
}
}
}
}
.heart {
{
transform: scale(1);
}
{
transform: scale(1.2);
color: #red;
}
{
transform: scale(1.4);
color: #red;
}
{
transform: scale(1);
color: #red;
}
}
.heartHollow {
{
transform: scale(1);
opacity: 1;
}
{
transform: scale(1.4);
opacity: 0.5;
}
{
transform: scale(1.6);
opacity: 0.25;
}
{
transform: scale(2);
opacity: 0;
display: none;
}
}
#keyframes heart {
.heart;
}
#-webkit-keyframes heart {
.heart;
}
#keyframes heartHollow {
.heartHollow;
}
#-webkit-keyframes heartHollow {
.heartHollow;
}
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
<button id="heart">
<span class="glyphicon glyphicon-heart">
<span class="glyphicon glyphicon-heart">
</span>
</span>
</button>
I know your time is valuable and I appreciate your attention and thank you in advance
for checking class you have to use .hasClass('your class name') or if you want to check background color if($(this).css('background') == "red")
$('button').on('click', function(){
$(this).toggleClass('faved');
if ($(this).hasClass('faved')) {
alert("red");
} else {
alert("empty");
}
});
I'm trying to get the background colour of the page to change on the gradient between black and white as the user scrolls. The colour will depend on where the user is currently scrolled to on the page if that makes sense? Here's some code I have already however the only problem with it is that when the user hasn't scrolled anywhere the webpage is not black.
function scroll(){
var body = document.body,
html = document.documentElement;
var height = Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight );
var color = Math.round(((body.scrollTop + html.offsetHeight) / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(126,126,126);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Something like this?
$(window).on('scroll', function(){
var s = $(window).scrollTop(),
d = $(document).height(),
c = $(window).height();
var scrolledArea = (s / (d - c));
$("div").css("opacity", scrolledArea);
})
body{
margin: 0;
}
div{
height: 500vh;
background: #000;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
</div>
You have to use html.scrollTop instead of body.scrollTop.
That's because the html element becomes scrollable. The body element with 200% height overflows html with 100% height, which is the viewport height.
Body does not scroll here, so you always get body.scrollTop = 0.
But html does scroll, so you have to use html.scrollTop.
The elements body and html sometimes act as if they are one element. That's the case for scrolling behaviour. But sometimes they act as if they are two separate elements. That's the cases in styling with CSS.
To get from black to white (not grey to white), you have to change var height = html.scrollHeight - html.clientHeight; and var color = Math.round((html.scrollTop / height) * 255);
To make it work in IE you need to add:
<html onscroll="scroll()">
If you can, you should use jquery though (like Kushtrim suggested).
function scroll(){
var body = document.body,
html = document.documentElement;
var height = html.scrollHeight - html.clientHeight;
var color = Math.round((html.scrollTop / height) * 255);
body.style.backgroundColor = "rgb("+color+","+color+","+color+")";
}
html{
height: 100%;
}
body{
height: 200%;
background: rgb(0,0,0);
}
<!DOCTYPE html>
<html lang="en" dir="ltr" onscroll="scroll()">
<body onscroll="scroll()">
<script src="assets/JS/ScrollEffect.js"></script>
</body>
</html>
Try it, read more here
.container {
width: 100%;
min-width: 1200px;
height: 100%;
background-size: cover;
background-position: center;
background-attachment: fixed;
}
.container .overlay {
background: linear-gradient(to bottom, rgba(0, 160, 227, 0.5) 0%, rgba(176, 203, 31, 0.5) 50%, rgba(239, 127, 26, 0.5) 100%);
}
.container .slide {
width: 100%;
height: 600px;
position: relative;
}
.secs {
position: relative;
height: 100%;
}
.secs .inside {
width: 1200px;
margin: 0 auto;
height: 100%;
}
.secs.first {
text-align: center;
}
.secs.first h1 {
font-size: 60px;
font-weight: bold;
color: white;
position: absolute;
top: 50%;
left: 50%;
text-shadow: 1px 1px 1px #999,2px 2px 1px #999,3px 3px 1px #999,4px 4px 1px #999;
transform: translate(-50%, -155%);
z-index: 10;
}
.secs.first .inside {
display: flex;
justify-content: center;
padding-top: 100px;
position: relative;
}
.secs.first .bar {
width: 80px;
height: 350px;
opacity: 0.54;
box-shadow: 0px 0px 50px #fff;
display: inline-block;
margin-right: 25px;
background: #fff;
}
.secs.first .bar:nth-child(1) {
background: #00a0e3;
animation: bars 5s infinite;
}
.secs.first .bar:nth-child(2) {
transform: translateY(130px);
background: #00a0e3;
animation: bars1 5s infinite;
}
.secs.first .bar:nth-child(3) {
transform: translateY(30px);
background: #b0cb1f;
animation: bars2 5s infinite;
}
.secs.first .bar:nth-child(4) {
transform: translateY(80px);
background: #b0cb1f;
animation: bars3 5s infinite;
}
.secs.first .bar:nth-child(5) {
transform: translateY(-30px);
background: #ef7f1a;
animation: bars4 5s infinite;
}
.secs.first .bar:nth-child(6) {
transform: translateY(135px);
background: #ef7f1a;
animation: bars5 5s infinite;
}
.secs.first .bar:nth-child(7) {
transform: translateY(55px);
background: #e31e24;
animation: bars6 5s infinite;
}
.secs.first .bar:nth-child(8) {
background: #e31e24;
animation: bars7 5s infinite;
}
#keyframes bars {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(130px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars1 {
0% {
transform: translateY(130px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(130px);
}
}
#keyframes bars2 {
0% {
transform: translateY(30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(30px);
}
}
#keyframes bars3 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(80px);
}
100% {
transform: translateY(0px);
}
}
#keyframes bars4 {
0% {
transform: translateY(-30px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(-30px);
}
}
#keyframes bars5 {
0% {
transform: translateY(135px);
}
50% {
transform: translateY(10px);
}
100% {
transform: translateY(135px);
}
}
#keyframes bars6 {
0% {
transform: translateY(55px);
}
50% {
transform: translateY(0px);
}
100% {
transform: translateY(55px);
}
}
#keyframes bars7 {
0% {
transform: translateY(0px);
}
50% {
transform: translateY(120px);
}
100% {
transform: translateY(0px);
}
}
<div class='container'>
<div class='overlay'>
<div class='slide secs first'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
<div class='slide'></div>
</div>
</div>
I'am trying to create an animation with a cube in CSS.
The animation is perfectly working in Chrome, but not in Firefox.
As soon as the cube goes out of the viewport, the animation freezes.
However, the animation runs if I move the mouse during the animation.
Here is the code (Note : the animation launches when face 4 is clicked):
//Retrieve elements
var leftArrow = document.getElementById("leftArrow");
var rightArrow = document.getElementById("rightArrow");
var frontFace = document.getElementById("face4");
var cube = document.getElementById("cube");
function rotateLeft()
{
cube.style.transform = "rotateY(180deg) translateX(-150px)";
cube.style.transition = 'transform 0.5s ease-out';
}
function rotateRight()
{
cube.style.transform = "rotateY(0deg) translateX(-150px)";
cube.style.transition = 'transform 0.5s ease-out';
}
function face4Click()
{
cube.style.animation = "face4Anim 7s ease-out";
document.getElementById('body').style.animation = 'fadeOut 2s linear 6s';
launchpage();
}
function face1Click()
{
console.log("face 1");
}
function launchpage()
{
setTimeout(function () {
document.location.href = 'index.html';
}, 8000);
}
/* Reset margins/paddings */
*
{
margin: 0;
padding: 0;
}
body
{
font-family: 'moon get!';
font-size: 1.4em;
color: white;
background-color: black;
}
header, #content
{
display: flex;
flex-direction: row;
justify-content: center;
}
footer
{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 8em;
}
h1
{
margin-top: 2em;
}
#content
{
display: flex;
flex-direction: row;
justify-content: space-around;
}
#leftArrow, #rightArrow
{
margin-top: 10em;
width: 0;
height: 0;
border-top: 100px solid transparent;
border-bottom: 100px solid transparent;
}
#leftArrow
{
border-right:100px solid blue;
}
#rightArrow
{
border-left:100px solid blue;
}
#cube
{
transform-style: preserve-3d;
transform-origin: center center;
transform: translateX(-150px);
animation: rotation 2s ease-out;
position: absolute;
margin-top: 8em;
}
#cube div
{
border: 1px solid grey;
position: absolute;
width: 300px;
height: 300px;
background: linear-gradient(red, yellow);
}
#face1
{
transform: rotateY(180deg);
}
#face2
{
z-index: 2;
transform-origin: center left;
transform: translateX(300px) rotateY(-90deg);
}
#face3
{
z-index: 2;
transform-origin: center right;
transform: translateX(-300px) rotateY(90deg);
}
#face4
{
z-index: 3;
transform: translateZ(300px);
}
#face5
{
z-index: 2;
transform-origin: center top;
transform: translateY(300px) rotateX(90deg) rotateY(180deg);
}
#face6
{
z-index: 2;
transform-origin: center bottom;
transform: translateY(-300px) rotateX(-90deg);
}
#keyframes translation
{
from{transform: translateY(-700px) translateX(-150px)}
to{transform: rotate(0) translateX(-150deg) translateY(0)}
}
#keyframes rotation
{
from{transform: rotateX(45deg) rotateY(180deg) translateY(-1300px)translateX(-150px)}
to{transform: rotate(0) translateX(-150deg) translateY(0)}
}
#keyframes fadeOut
{
from{opacity: 1}
to{opacity: 0}
}
#keyframes face4Anim
{
from{transform: rotateY(0deg) translateX(-150px)}
to{transform: rotateX(90deg) rotateY(180deg) translateZ(-800px) translateX(-750px) scaleX(5) scaleY(5) scaleZ(5)}
}
<body id="body">
<header>
<h1>JS Games</h1>
</header>
<div id="content">
<div id="leftArrow" onclick="rotateLeft()"></div>
<div id="cube">
<div id="face1" onclick="face1Click()">1</div>
<div id="face2">2</div>
<div id="face3">3</div>
<div id="face4" onclick="face4Click()">4</div>
<div id="face5"></div>
<div id="face6">6</div>
</div>
<div id="rightArrow" onclick="rotateRight()"></div>
</div>
<footer>
<h5>Developed by Tony Piton</h5>
</footer>
</body>
Does anyone can help me ?
I'm trying to make a spinner where it'll stop on a certain frame. I'm trying to use CSS for the animation to negate JS animations but not sure I can get it to stop on a specific frame. I've got a simple spinner with my 3 numbers here. I'd like to randomly get number 1-3(0-2) and have it stop on that given frame.
Is that possible with JS/cCSS?
body {
font-family: 'Lucida Grande', Verdana, Arial;
font-size: 12px;
}
#stage {
margin: 80px auto;
width: 600px;
height: 400px;
perspective: 5000;
}
#rotate {
margin: 0 auto;
width: 600px;
height: 400px;
}
.ring {
margin: 0 auto;
height: 110px;
width: 600px;
-webkit-transform-style: preserve-3d;
-webkit-animation-iteration-count: infinite;
-webkit-animation-timing-function: linear;
}
.ring > :nth-child(odd) {
background-color: #995C7F;
}
.ring > :nth-child(even) {
background-color: #835A99;
}
.poster {
position: absolute;
left: 250px;
width: 100px;
height: 100px;
opacity: 1;
color: rgba(0,0,0,1);
-webkit-border-radius: 10px;
}
.a {
transform: rotateX(0deg) translateZ(40px);
}
.b {
transform: rotateX(120deg) translateZ(40px);
}
.c {
transform: rotateX(240deg) translateZ(40px);
}
.done {
transform: rotate(0deg);
}
.poster > p {
font-family: 'Georgia', serif;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-top: 28px;
}
#ring-1 {
-webkit-animation-name: x-spin;
-webkit-animation-duration: .6s;
}
#ring-2 {
-webkit-animation-name: back-y-spin;
-webkit-animation-duration: 4s;
}
#ring-3 {
-webkit-animation-name: y-spin;
-webkit-animation-duration: 3s;
}
#-webkit-keyframes x-spin {
0% { -webkit-transform: rotateX(360deg); }
50% { -webkit-transform: rotateX(180deg); }
100% { -webkit-transform: rotateX(0deg); }
}
#-webkit-keyframes y-spin {
0% { -webkit-transform: rotateY(0deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(360deg); }
}
#-webkit-keyframes back-y-spin {
0% { -webkit-transform: rotateY(360deg); }
50% { -webkit-transform: rotateY(180deg); }
100% { -webkit-transform: rotateY(0deg); }
}
It would be better to use css transitions for this. And yes, if you want to randomize the animation frame, definitely JavaScript. That way you can use it in code.
function goToNum(num) {
var angle = 0;
if (num == 2) {
angle = 110;
}
if (num == 1) {
angle = 220;
}
$('#ring-1').css('transform', 'rotateX(' + angle + 'deg)');
}
var rand = Math.floor(Math.random() * 3);
goToNum(rand);
JSFiddle: http://jsfiddle.net/foreyez/r8a4m0L5/