Skip to content

Commit e3fa7b0

Browse files
amelia2802amelia2802
authored
Merge pull request #211 from vandana3869/main
Added a CSS Animated Counter
2 parents 637014d + 0e09d43 commit e3fa7b0

File tree

3 files changed

+168
-0
lines changed

3 files changed

+168
-0
lines changed

‎Css Animations/Animated_Counter/index.html

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<title>3D-Counter</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
8+
<link rel="stylesheet" href="./style.css">
9+
10+
</head>
11+
12+
<body>
13+
<!-- partial:index.partial.html -->
14+
<div class="container">
15+
<div class="front">
16+
<div class="decrement"> </div>
17+
<div class="value_front">0</div>
18+
<div class="increment"></div>
19+
</div>
20+
<div class="back">
21+
<div class="decrement"></div>
22+
<div class="value_back">0</div>
23+
<div class="increment"></div>
24+
</div>
25+
</div>
26+
<!-- partial -->
27+
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
28+
<script src="./script.js"></script>
29+
30+
</body>
31+
32+
</html>

‎Css Animations/Animated_Counter/script.js

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
(function() {
2+
$(document).ready(function() {
3+
var count, rotateY, setValueFunc, value, zero;
4+
zero = 0;
5+
rotateY = 180;
6+
value = 0;
7+
count = 0;
8+
setValueFunc = function() {
9+
if (count % 2 === 0) {
10+
return $(".value_front").text(value);
11+
} else {
12+
return $(".value_back").text(value);
13+
}
14+
};
15+
$(".increment").on("mouseenter", function() {
16+
$(".increment").css({
17+
"opacity": "1"
18+
});
19+
return $(".decrement").css({
20+
"opacity": ".2"
21+
});
22+
});
23+
$(".container").on("mouseout", function() {
24+
$(".increment").css({
25+
"opacity": ".2"
26+
});
27+
return $(".decrement").css({
28+
"opacity": ".2"
29+
});
30+
});
31+
$(".decrement").on("mouseenter", function() {
32+
$(".decrement").css({
33+
"opacity": "1"
34+
});
35+
return $(".increment").css({
36+
"opacity": ".2"
37+
});
38+
});
39+
$(".increment").on("mousedown", function() {
40+
count++;
41+
$(".container").css({
42+
"transform": `rotateY(${zero = zero + rotateY}deg)`
43+
});
44+
value++;
45+
return setValueFunc();
46+
});
47+
return $(".decrement").on("mousedown", function() {
48+
count++;
49+
$(".container").css({
50+
"transform": `rotateY(${zero = zero - rotateY}deg)`
51+
});
52+
value--;
53+
return setValueFunc();
54+
});
55+
});
56+
57+
}).call(this);

‎Css Animations/Animated_Counter/style.css

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
@import url("https://fonts.googleapis.com/css?family=Roboto-Mono");
2+
* {
3+
transition: all 0.5s;
4+
box-sizing: border-box;
5+
}
6+
body {
7+
background: #ff7373;
8+
margin: 0;
9+
padding: 0;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
width: 100vw;
14+
height: 100vh;
15+
perspective: 300px;
16+
}
17+
body .container {
18+
background: transparent;
19+
border-radius: 4px;
20+
width: 272px;
21+
height: 100px;
22+
transform: rotateY(0deg);
23+
transform-style: preserve-3d;
24+
}
25+
body .container .front {
26+
background: #fff;
27+
transform: rotateY(0deg);
28+
z-index: 2;
29+
}
30+
body .container .back {
31+
background: #fff;
32+
transform: rotateY(180deg);
33+
}
34+
body .container .front,
35+
body .container .back {
36+
position: absolute;
37+
display: flex;
38+
align-items: center;
39+
justify-content: space-between;
40+
-webkit-backface-visibility: hidden;
41+
backface-visibility: hidden;
42+
width: 272px;
43+
height: 100px;
44+
border-radius: 4px;
45+
}
46+
body .container .front .decrement,
47+
body .container .back .decrement,
48+
body .container .front .increment,
49+
body .container .back .increment {
50+
width: 64px;
51+
height: 100px;
52+
opacity: 0.2;
53+
}
54+
body .container .front .decrement:hover,
55+
body .container .back .decrement:hover,
56+
body .container .front .increment:hover,
57+
body .container .back .increment:hover {
58+
cursor: pointer;
59+
}
60+
body .container .front .decrement,
61+
body .container .back .decrement {
62+
background: url("http://frolovoleg.ru/images/decrement.svg") no-repeat center;
63+
}
64+
body .container .front .increment,
65+
body .container .back .increment {
66+
background: url("http://frolovoleg.ru/images/increment.svg") no-repeat center;
67+
}
68+
body .container .front .value_front,
69+
body .container .back .value_front,
70+
body .container .front .value_back,
71+
body .container .back .value_back {
72+
-webkit-user-select: none;
73+
-moz-user-select: none;
74+
-ms-user-select: none;
75+
user-select: none;
76+
font-size: 32px;
77+
line-height: 100px;
78+
font-family: "Roboto Mono", "Courier", monospace;
79+
}

0 commit comments

Comments
 (0)