choose a specific css animation frame - javascript

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/

Related

Multiple animation rotate in css at once call in toggle onclick of one element (slow rotate, medium rotate, fast rotate)?

I have 3 animations on css what I've made in fiddle that are "animate1 (as a slow rotate), animate2 (as a medium rotate) and animate3 (as a fastest rotate) which is want to running by toggle onClick on an Element of "<h1>". untiil now of my achievements is just only till running to animate2 only after that I don't know how ? Please to anyone for solve this case and sorry for my bad english ...
demo on fiddle
function Animation() {
var anim = document.getElementsByTagName("h1")[0];
anim.innerText = "|"; anim.className = "animate1";
anim.addEventListener("webkitAnimationEnd", function() {anim.className = 'animate2'});
anim.addEventListener("animationend", function() {anim.className = 'animate2'});
}
#keyframes twister1 {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
#keyframes twister2 {
0% {
transform: rotateZ(0deg);
}
10% {
transform: rotateZ(360deg);
}
20% {
transform: rotateZ(720deg);
}
30% {
transform: rotateZ(1080deg);
}
40% {
transform: rotateZ(1440deg);
}
50% {
transform: rotateZ(1800deg);
}
60% {
transform: rotateZ(2160deg);
}
70% {
transform: rotateZ(2520deg);
}
80% {
}
90% {
}
100% {
}
}
#keyframes twister3 {
from {
transform-origin: center;
transform: rotate(-20000deg);
opacity: 1;
}
to {
transform-origin: center;
transform: none;
opacity: 1;
}
}
.animate1 {
-webkit-animation: twister1;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate2 {
-webkit-animation: twister2;
animation-duration: 6s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.animate3 {
-webkit-animation: twister3;
animation-duration: 5s;
animation-iteration-count: 1;
animation-timing-function: linear;
animation-fill-mode: both;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>

Use only one animation and simply increase/decrease the duration to control the speed:
var i = 7;
var anim = document.getElementsByTagName("h1")[0];
function Animation() {
anim.className = "animate";
anim.style.animationDuration = (i-=2) + 's';
if(i<=0) {
i=7;
}
}
#keyframes twister {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
.animate {
animation: twister 5s infinite linear;
}
.center {
font-family: 'Montserrat', sans-serif;
transform: translateY(-50%);
text-align: center;
position: fixed;
margin: 0px;
width: 100%;
color: #222;
z-index: 1;
top: 50%;
}
<div class="center">
<h1 onclick="Animation()">|</h1>
</div>

Responsive navbar menu (hamburger menu) doesn't open by clicking

Got a navbar but the problem is when I open (click) it on mobile phone or in responsive environment (when the hamburger menu shows up), it does not open by clicking on it, the links are not showing. Below is the code that I'm using for it. Used the necessary links but not working. Everything is fine, the only problem that is occurring is with that hamburger menu.
$('.navTrigger').click(function() {
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
$(window).scroll(function() {
if ($(document).scrollTop() > 50) {
$('.nav').addClass('affix');
console.log("OK");
} else {
$('.nav').removeClass('affix');
}
});
.nav {
width: 100%;
height: 65px;
position: fixed;
line-height: 65px;
text-align: center;
z-index: 1;
}
.nav div.logo {
float: left;
width: auto;
height: auto;
padding-left: 0.9rem;
}
.nav div.logo a {
text-decoration: none;
color: #fff;
}
.nav div.logo a:hover {
color: #00E676;
}
.nav div.main_list {
height: 65px;
float: right;
}
.nav div.main_list ul {
width: 100%;
height: 65px;
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
.nav div.main_list ul li {
width: auto;
height: 65px;
padding: 2px;
padding-right: 0.9rem;
}
.nav div.main_list ul li a {
text-decoration: none;
color: #fff;
line-height: 65px;
font-size: 80%;
font-weight: bold;
}
.nav div.main_list ul li a:hover {
color: #00b3ee;
}
/* Home section */
.home {
width: 100%;
height: 100vh;
background-position: center top;
background-size: cover;
}
.navTrigger {
display: none;
}
.nav {
padding-top: 20px;
padding-bottom: 20px;
-webkit-transition: all 0.4s ease;
transition: all 0.4s ease;
z-index: 1;
}
/* Media query section */
#media screen and (min-width: 768px) and (max-width: 1024px) {
.container {
margin: 0;
}
}
#media screen and (max-width:768px) {
.navTrigger {
display: block;
}
.nav div.logo {
margin-left: 15px;
}
.nav div.main_list {
width: 100%;
height: 0;
overflow: hidden;
}
.nav div.show_list {
height: auto;
display: none;
}
.nav div.main_list ul {
flex-direction: column;
width: 100%;
height: 100vh;
right: 0;
left: 0;
bottom: 0;
background-color: #111;
/*same background color of navbar*/
background-position: center top;
}
.nav div.main_list ul li {
width: 100%;
text-align: right;
}
.nav div.main_list ul li a {
text-align: center;
width: 100%;
font-size: 3rem;
padding: 20px;
}
.nav div.media_button {
display: block;
}
}
.navTrigger {
cursor: pointer;
width: 30px;
height: 25px;
margin: auto;
position: absolute;
right: 30px;
top: 0;
bottom: 0;
}
.navTrigger i {
background-color: #fff;
border-radius: 2px;
content: '';
display: block;
width: 100%;
height: 4px;
}
.navTrigger i:nth-child(1) {
-webkit-animation: outT 0.8s backwards;
animation: outT 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(2) {
margin: 5px 0;
-webkit-animation: outM 0.8s backwards;
animation: outM 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger i:nth-child(3) {
-webkit-animation: outBtm 0.8s backwards;
animation: outBtm 0.8s backwards;
-webkit-animation-direction: reverse;
animation-direction: reverse;
}
.navTrigger.active i:nth-child(1) {
-webkit-animation: inT 0.8s forwards;
animation: inT 0.8s forwards;
}
.navTrigger.active i:nth-child(2) {
-webkit-animation: inM 0.8s forwards;
animation: inM 0.8s forwards;
}
.navTrigger.active i:nth-child(3) {
-webkit-animation: inBtm 0.8s forwards;
animation: inBtm 0.8s forwards;
}
#-webkit-keyframes inM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes inM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes outM {
50% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(45deg);
}
}
#keyframes outM {
50% {
transform: rotate(0deg);
}
100% {
transform: rotate(45deg);
}
}
#-webkit-keyframes inT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes inT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes outT {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(9px) rotate(135deg);
}
}
#keyframes outT {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(9px) rotate(0deg);
}
100% {
transform: translateY(9px) rotate(135deg);
}
}
#-webkit-keyframes inBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes inBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
#-webkit-keyframes outBtm {
0% {
-webkit-transform: translateY(0px) rotate(0deg);
}
50% {
-webkit-transform: translateY(-9px) rotate(0deg);
}
100% {
-webkit-transform: translateY(-9px) rotate(135deg);
}
}
#keyframes outBtm {
0% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-9px) rotate(0deg);
}
100% {
transform: translateY(-9px) rotate(135deg);
}
}
.affix {
padding: 0;
background-color: #111;
}
.myH2 {
text-align: center;
font-size: 4rem;
}
.myP {
text-align: justify;
padding-left: 15%;
padding-right: 15%;
font-size: 20px;
}
#media all and (max-width:700px) {
.myP {
padding: 2%;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="img" class="ha">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>
<nav class="nav">
<div class="container">
<div class="logo">
<img src="chk2.png" class="hello">
</div>
<div id="mainListDiv" class="main_list">
<ul class="navlinks second">
<li class="a">HOME</li>
<li class="b">ABOUT US</li>
<li class="c">OUR SERVICES</li>
<li class="d">JOBS AT HEGTAVIC</li>
<li class="e">CONTACT US</li>
</ul>
</div>
<span class="navTrigger">
<i></i>
<i></i>
<i></i>
</span>
</div>
</nav>

I have tried your code and modified in fallowing way. It is working fine.
$(document).ready(function(){
$('.navTrigger').on('click',function (){
$(this).toggleClass('active');
console.log("Clicked menu");
$("#mainListDiv").toggleClass("show_list");
$("#mainListDiv").fadeIn();
});
});

Change Background Colour Along a Gradient as User Scrolls

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>

How to hide div under another during CSS3 animation

The CSS code :
.mainDiv{
width: 600px;
height: 600px;
background-color: blue;
}
.innerDiv{
width: 400px;
margin: auto;
height: 400px;
background-color: green;
}
.innerDiv div{
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
}
.removing{
-webkit-animation: slideout 1s;
animation: slideout 1s;
}
#-webkit-keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
#keyframes slideout {
0% {
-webkit-transform: translateX(0px);
transform: translateX(0px);
}
100% {
-webkit-transform: translateX(-200%);
transform: translateX(-200%);
}
}
Here is a jsFiddle of the problem.
What i would like it to do is this :
When the first red block moves outside of the green block, i would like it to be behind the blue block instead of in front of it.

add the line: overflow:hidden; to your .innerDiv css rule

Use z-index.
Example:
#somethingBehind {
z-index: 1;
}
#somethingAtTheFront {
z-index: 2;
}

Capturing the click event after the flipping of tile

Hi I created zoom and flip of the tile.
So my tile having two different views. Initial view I am showing Image and back view I am showing the text.
So on click of the back side text I need to have an alert box. I tried having an alert and it is coming but multiple alerts are coming for me. Only the alert should come for the text not for the image side.
I am trying to add alert but it is not happening.
i need some support regarding this.
This is what I have tried.
HTML
<div class="wrap" id="html1"><div class="box"><div class="boxInner one clicked"><div class="face front"><img src="img/s.png"></div><div id="SearchDono" class="face back"><label class="text">Search Donors</label></div></div></div><div class="box"><div class="boxInner two two-clicked"><div class="face front"><img src="img/r.png"></div><div id="RegisterDono" class="face back"><label class="text">Register</label></div></div></div><div class="box"><div class="boxInner three three-clicked"><div class="face front"><img src="img/u.png"></div><div id="UpdateDetai" class="face back"><label class="text">Update Details</label></div></div></div><div class="box"><div class="boxInner one clicked"><div class="face front"><img src="img/s.png"></div><div class="face back"><div id="ShareStat" class="text">Share</div></div></div></div></div>
CSS
.wrap {
overflow: hidden;
margin: 10px;
-webkit-transform: translateZ(0);
position: relative;
top: 0px;
}
.box {
float: left;
position: relative;
width: 25%;
/* padding-bottom: 15%; */
padding-bottom: 10px;
}
.boxInner {
overflow: hidden;
margin: 10px;
-moz-transform: scale(1);
-o-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
opacity: 1;
-moz-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-o-transition: all 0.5s cubic-bezier(0.0, 0.35, .6, 1.5);
-webkit-transition: all 0.5s ease-in;
transition: all 0.5s ease-in;
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
}
.boxInner:hover {
-webkit-box-shadow: #666 0px 0px 6px;
-moz-box-shadow: #666 0px 0px 6px;
box-shadow: #666 0px 0px 6px;
-moz-transform: scale(1.05);
-webkit-transform: scale(1.05);
-o-transform: scale(1.05);
transform: scale(1.05);
}
.boxInner img {
width: 100%;
}
.front {
z-index: 1;
cursor: pointer;
opacity: 1;
}
.back {
-webkit-transform: rotatex(-180deg);
cursor: pointer;
opacity: 0;
}
.face {
transition: all 0.5s linear;
position:relative;
}
.text{
padding-top:35%;
position: absolute;
margin-left:35%;
color:#666666;
font-weight:bold;
font-size:100%;
}
.text::first-letter{
font-size:400%;
color:#009de0;
margin-top:10px;
}
.box .one.clicked .back {
opacity: 1;
}
.box .one.clicked .front {
opacity: 0;
}
.box .one.clicked {
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-o-transform: scaleY(-1);
}
.box .two.two-clicked .back {
opacity: 1;
}
.box .two.two-clicked .front {
opacity: 0;
}
.box .two.two-clicked {
-webkit-animation: two-trans 3s;
-moz-animation: two-trans 3s;
-o-animation: two-trans 3s;
}
#-webkit-keyframes two-trans {
0% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(-200deg);
opacity: 0;
}
100% {
-webkit-transform-origin: center center;
-webkit-transform: rotate(0);
opacity: 1;
}
}
.box .two-clicked .back .text{
-webkit-transform: rotateX(180deg);
padding-bottom: 45%;
}
.box .three.three-clicked .back {
opacity: 1;
}
.box .three.three-clicked .front {
opacity: 0;
}
.box .three.three-clicked {
-webkit-animation: three-trans 3s;
}
#-webkit-keyframes three-trans {
0% {
opacity: 0;
-webkit-transform: translateY(2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(-30px);
}
80% {
-webkit-transform: translateY(10px);
}
100% {
-webkit-transform: translateY(0);
}
}
.box .three-clicked .back .text{
-webkit-transform: rotateX(-2000deg);
padding-bottom:45%;
}
body.no-touch .boxInner:hover .titleBox,body.touch .boxInner.touchFocus .titleBox
{
margin-bottom: 0;
}
#media only screen and (max-width : 480px) {
/* Smartphone view: 1 tile */
.box {
width: 100%;
}
}
#media only screen and (max-width : 650px) and (min-width : 481px) {
/* Tablet view: 2 tiles */
.box {
width: 50%;
}
}
#media only screen and (max-width : 1050px) and (min-width : 651px) {
/* Small desktop / ipad view: 3 tiles */
.box {
width: 33.3%;
}
}
#media only screen and (max-width : 1290px) and (min-width : 1051px) {
/* Medium desktop: 4 tiles */
.box {
width: 25%;
}
}
JS:
$('.box').click(function(){
$(this).addClass('hai');
});
$(".one").click(function(){
$(this).toggleClass("clicked");
$(this).addClass('backone');
$('.backone').click(function(){alert('hai');
$(this).removeClass('backone');
});
});
$('.two').click(function() {
$(this).toggleClass("two-clicked");
});
$('.three').click(function() {
$(this).toggleClass("three-clicked");
});
Demo Link

Multiple alerts are there beacause you have one click event inside another
Try changing the code to this
$(".one").click(function () {
$(this).toggleClass("clicked");
if ($(this).hasClass('backone')) { //check if it already has class
$(this).removeClass('backone'); //remove class
} else {
alert("hai"); //if not alert
$(this).addClass('backone'); //addclass
}
});
was not sure when you wanted to alert. So change the alert's position according to your requirement)
Fiddle http://jsfiddle.net/u22Mj/4/

Categories

Resources