Skip to content

Commit 85731f8

Browse files
badaczewskibadaczewski
committed
Examples Update
1 parent e5857cd commit 85731f8

21 files changed

+375
-10
lines changed

‎README.md

+8-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,9 @@
11
# css-animations
2-
Bring your HTML back from the dead with CSS animations
2+
Bring your HTML back from the dead with CSS animations.
3+
4+
###Part #1 - Compound CSS Transforms
5+
<ol>
6+
<li>Button</li>
7+
<li>Push Menu</li>
8+
<li>Card Flip</li>
9+
</ol>

‎examples/button/button.css

+59
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
body {
2+
text-align: center;
3+
padding: 3em;
4+
}
5+
6+
.btn {
7+
position: relative;
8+
background: rgb(146,39,143);
9+
border-radius: 50%;
10+
color: #fff;
11+
display: inline-block;
12+
height: 64px;
13+
width: 64px;
14+
border: solid 0 rgb(146,39,143);
15+
box-shadow: 0 0 0 0 rgba(146,39,143,0.5);
16+
}
17+
18+
.btn:before, .btn:after {
19+
font-family: 'FontAwesome';
20+
position: absolute;
21+
top: 50%;
22+
left: 50%;
23+
display: block;
24+
color: #fff;
25+
font-size: 45px;
26+
background: transparent;
27+
28+
margin-left: -22.5px;
29+
margin-top: -22.5px;
30+
width: 45px;
31+
height: 45px;
32+
}
33+
34+
.btn:before {
35+
content: '\f067';
36+
}
37+
38+
.btn:after {
39+
content: '\f068';
40+
}
41+
42+
.btn:hover,
43+
.btn:focus
44+
{
45+
background: rgb(198,113,196);
46+
}
47+
48+
.btn:active {
49+
box-shadow: 0 0 0 10px rgba(146,39,143,0.5);
50+
background: rgb(146,39,143);
51+
}
52+
53+
.btn:hover:before,
54+
.btn:focus:before {
55+
}
56+
57+
.btn:hover:after,
58+
.btn:focus:after {
59+
}

‎examples/button/index.html

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Bring Your HTML Back from the Dead with CSS Animations</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
8+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
9+
<link rel="stylesheet" href="../../style.css">
10+
<link rel="stylesheet" href="button.css">
11+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
12+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
13+
</head>
14+
<body>
15+
<a href="#button" class="btn"></a>
16+
</body>
17+
</html>

‎examples/card-flip/card-flip.css

+50
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
.card-holder {
2+
position: relative;
3+
display: block;
4+
text-align: center;
5+
}
6+
7+
.card-holder img {
8+
max-width: 100%;
9+
}
10+
11+
.card-holder .card {
12+
position: relative;
13+
display: inline-block;
14+
height: 300px;
15+
width: 200px;
16+
margin: 1em;
17+
cursor: pointer;
18+
}
19+
20+
.card-holder .card.active .back {
21+
}
22+
23+
.card-holder .card.active .front {
24+
}
25+
26+
.card-holder .card .front, .card-holder .card .back {
27+
position: absolute;
28+
top: 0;
29+
left: 0;
30+
width: 100%;
31+
height: 100%;
32+
padding: 1em;
33+
}
34+
35+
.card-holder .card .front {
36+
color: #fff;
37+
z-index: 2;
38+
background: #33a9dc;
39+
}
40+
41+
.card-holder .card:hover .front {
42+
background: #1572b6;
43+
}
44+
45+
.card-holder .card .back {
46+
overflow: auto;
47+
background: #1572b6;
48+
color: #fff;
49+
text-align: left;
50+
}

‎examples/card-flip/card-flip.js

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
$(document).ready(function(){
2+
$('.card').bind("click", function(e) {
3+
e.preventDefault();
4+
$(this).toggleClass("active");
5+
});
6+
});

‎examples/card-flip/index.html

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Bring Your HTML Back from the Dead with CSS Animations</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="../../style.css">
8+
<link rel="stylesheet" href="card-flip.css">
9+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
10+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
11+
</head>
12+
<body>
13+
<div class="card-holder">
14+
<div class="card">
15+
<div class="front"><img src="http://ohdoylerules.com/content/images/css3.svg" /></div>
16+
<div class="back">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean sit amet aliquet leo. Praesent et risus venenatis, iaculis lorem sed, fringilla elit. Sed non est metus. Pellentesque ultrices tincidunt urna sed tincidunt.</div>
17+
</div>
18+
</div>
19+
<script src="card-flip.js"></script>
20+
</body>
21+
</html>

‎examples/push-menu/index.html

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>Bring Your HTML Back from the Dead with CSS Animations</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
8+
<link rel="stylesheet" href="../../style.css">
9+
<link rel="stylesheet" href="push-menu.css">
10+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
11+
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
12+
</head>
13+
<body>
14+
<nav>
15+
<ul>
16+
<li><a href="#one">One</a></li>
17+
<li><a href="#two">Two</a></li>
18+
<li><a href="#three">Three</a></li>
19+
<li><a href="#four">Four</a></li>
20+
<li><a href="#five">Five</a></li>
21+
</ul>
22+
</nav>
23+
<div class="body">
24+
<a href="#menu" class="menu"><i class="fa fa-bars"></i> MENU</a>
25+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla at tellus faucibus nisi consequat eleifend a eu risus. Nulla eget ornare erat. Vestibulum congue vitae eros at pretium. Donec id porttitor lacus. Morbi molestie ligula non turpis egestas gravida. Morbi quam tellus, euismod vehicula egestas in, elementum in urna. In finibus dignissim erat. Donec rutrum sagittis nulla nec elementum. Suspendisse egestas est velit, a iaculis erat hendrerit quis. Vivamus dictum eros velit, vel porttitor ex ultricies vitae. Fusce vitae libero auctor, sollicitudin elit ac, laoreet neque. Vivamus magna est, vehicula sed mollis ut, sodales rutrum velit. Proin sed risus malesuada, ultricies nibh quis, rutrum eros. Etiam eget lacinia lacus. Sed aliquam elementum risus at porttitor. Suspendisse porttitor eleifend ligula, in auctor massa cursus eu.</p>
26+
<p>Duis laoreet nulla nec lectus dapibus, et euismod justo scelerisque. Duis eget orci bibendum, consequat sem id, aliquet lacus. Vestibulum vitae odio risus. Etiam et tortor placerat, cursus nibh vitae, vestibulum nisi. Vestibulum consequat sit amet magna quis fringilla. Fusce ullamcorper lacinia mauris, at volutpat urna tempus vitae. Nam eros tortor, cursus at commodo vel, hendrerit a tellus. Vestibulum ut lectus maximus, faucibus purus ornare, viverra leo. Curabitur vehicula sit amet ante in cursus. Phasellus cursus ipsum sed augue imperdiet, vel maximus dui imperdiet. Maecenas elementum euismod turpis, sit amet pretium felis. Aliquam pellentesque nisi nisl, et fringilla augue iaculis fermentum. Suspendisse ultricies consectetur lacus, nec iaculis metus volutpat at. Phasellus a semper massa. Pellentesque vel ante consequat neque tincidunt finibus. Duis sit amet ligula dolor.</p>
27+
<p>Nunc a quam sit amet nunc ullamcorper aliquam in sit amet velit. Suspendisse ac erat fringilla, efficitur augue vel, consequat enim. Nam mollis lorem vel lectus hendrerit, malesuada volutpat ex cursus. Suspendisse lacinia malesuada arcu id mollis. Fusce laoreet metus eu augue porttitor, id ornare mi luctus. Nunc semper ornare tellus, a pellentesque elit porttitor eget. Phasellus in convallis ipsum, in ultrices lectus. Morbi dignissim facilisis accumsan. Fusce finibus elit a ligula aliquet, nec faucibus arcu suscipit. Fusce rhoncus, purus non bibendum laoreet, nisl nisl porttitor turpis, sed ultricies sapien velit vitae arcu. Vivamus laoreet vitae augue eu aliquam. Fusce sed massa ante. Nullam at sapien et nisi pretium vehicula condimentum nec lacus. Vivamus eu libero urna.</p>
28+
<p>Maecenas rutrum egestas urna, non porttitor neque lobortis id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas eu massa a justo vulputate tincidunt. Proin et egestas eros, ut pulvinar nisi. Morbi imperdiet nunc vitae gravida faucibus. Integer eu magna finibus, ullamcorper ipsum non, pharetra nulla. Nulla porta, odio vel euismod rutrum, elit enim aliquet est, nec vulputate mi dolor at lorem. Nulla at eros sagittis, malesuada tellus et, luctus elit. Aenean at nibh eleifend, vulputate nunc ut, accumsan ipsum. Vestibulum varius ac nisl quis rutrum. Praesent sollicitudin at dolor in pharetra. Mauris commodo dolor eu placerat lobortis.</p>
29+
<p>Donec sit amet massa nec ante feugiat scelerisque. Etiam accumsan elit elit, et luctus risus ornare non. Aliquam a eros mauris. In rhoncus velit et felis molestie finibus. Quisque euismod velit nisi, fermentum tristique urna fermentum nec. Sed vel bibendum sapien. Mauris porttitor sed elit in iaculis. In hac habitasse platea dictumst. Nunc ornare et felis non tempor. Nunc sit amet libero at orci fermentum ornare nec quis sapien.</p>
30+
</div>
31+
<div class="overlay"></div>
32+
<script src="push-menu.js"></script>
33+
</body>
34+
</html>

‎examples/push-menu/push-menu.css

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
.menu {
2+
text-decoration: none;
3+
color: #000;
4+
font-weight: bold;
5+
}
6+
7+
nav, .overlay {
8+
position: fixed;
9+
top: 0;
10+
left: 0;
11+
width: 260px;
12+
height: 100%;
13+
background: #000;
14+
}
15+
16+
nav ul {
17+
list-style: none;
18+
margin: 0;
19+
padding: 0;
20+
}
21+
22+
nav li {
23+
border-bottom: solid 1px #fff;
24+
}
25+
26+
nav li a:link,
27+
nav li a:visited {
28+
color: #fff;
29+
text-decoration: none;
30+
}
31+
32+
nav li:hover a,
33+
nav li:focus a {
34+
background: #fff;
35+
color: #000;
36+
}
37+
38+
nav a {
39+
padding: 1em;
40+
display: block;
41+
}
42+
43+
.body {
44+
position: relative;
45+
z-index: 1;
46+
background: #fff;
47+
width: 100%;
48+
height: 100%;
49+
padding: 1em;
50+
}
51+
52+
.overlay {
53+
visibility: hidden;
54+
opacity: 0;
55+
width: 100%;
56+
display: block;
57+
z-index: 3;
58+
}
59+
60+
.body.active {
61+
left: 260px;
62+
}
63+
64+
.body.active + .overlay {
65+
visibility: visible;
66+
opacity: 0.5;
67+
68+
left: 260px;
69+
}

‎examples/push-menu/push-menu.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
$(document).ready(function(){
2+
$('.menu, .overlay').bind("click", function(e) {
3+
e.preventDefault();
4+
$("body").toggleClass("no-scroll");
5+
$(".body").toggleClass("active");
6+
});
7+
});

‎img/compound.png

10.3 KB
Loading

‎img/easing.png

23.8 KB
Loading

‎img/matrix.png

21.2 KB
Loading

‎img/origin.png

2.21 KB
Loading

‎img/perspective.png

3.51 KB
Loading

‎img/rotate.png

7.54 KB
Loading

‎img/scale.png

2.56 KB
Loading

‎img/skew.png

5.28 KB
Loading

‎img/translate.png

1.66 KB
Loading

‎index.html

+83-7
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,90 @@
11
<!doctype html>
22
<html>
33
<head>
4-
<title>Bring Your HTML Back from the Dead with CSS Animations</title>
5-
<meta charset="utf-8">
6-
<meta name="viewport" content="width=device-width, initial-scale=1">
7-
<link rel="stylesheet" href="style.css">
8-
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
9-
<script src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
4+
<title>Bring Your HTML Back from the Dead with CSS Animations</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/flexslider.min.css">
8+
<link rel="stylesheet" href="style.css">
9+
<style>
10+
.flexslider .slides li {
11+
text-align: center;
12+
}
13+
14+
.flexslider .slides img.example {
15+
width: auto;
16+
max-width: 640px;
17+
display: inline-block;
18+
}
19+
</style>
20+
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
21+
<script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.5.0/jquery.flexslider.min.js"></script>
1022
</head>
1123
<body>
12-
<script src="scripts.js"></script>
24+
<div class="flexslider">
25+
<ul class="slides">
26+
<li>
27+
<h1>CSS3 Compound Transforms</h1>
28+
<img src="img/compound.png" class="example" alt="Compound Transforms" />
29+
</li>
30+
<li>
31+
<img src="img/origin.png" class="example" alt="Origin" />
32+
<h2>Origin</h2>
33+
<h4>translate(x,y), translateX(x), translateY(y), translateZ(z), <strong>translate3d(x,y,z)</strong></h4>
34+
<p>Allows you to change the position on transformed elements.</p>
35+
</li>
36+
<li>
37+
<img src="img/translate.png" class="example" alt="Translate" />
38+
<h2>Translate</h2>
39+
<h4>translate(x,y), translateX(x), translateY(y), translateZ(z), <strong>translate3d(x,y,z)</strong></h4>
40+
<p>Defines a translation, moving the element along the X, Y and/or Z axis.</p>
41+
</li>
42+
<li>
43+
<img src="img/scale.png" class="example" alt="Scale" />
44+
<h2>Scale</h2>
45+
<h4>scale(x,y), scaleX(x), scaleY(y), <strong>scaleZ(z)</strong>, <strong>scale3d(x,y,z)</strong></h4>
46+
<p>Defines a scale transformation along the X, Y and/or Z axis.</p>
47+
</li>
48+
<li>
49+
<img src="img/skew.png" class="example" alt="Skew" />
50+
<h2>Skew</h2>
51+
<h4>skew(x,y), skewX(x), skewY(y)</h4>
52+
<p>Defines a skew transformation along the X and/or Y axis.</p>
53+
</li>
54+
<li>
55+
<img src="img/rotate.png" class="example" alt="Rotate" />
56+
<h2>Rotate</h2>
57+
<h4>rotate(angle), <strong>rotateX(angle)</strong>, <strong>rotateY(angle)</strong>, <strong>rotateZ(angle)</strong>, <strong>rotate3d(x,y,z,angle)</strong></h4>
58+
<p>Defines a 2D rotation, the angle is specified in the parameter</p>
59+
</li>
60+
<li>
61+
<img src="img/perspective.png" class="example" alt="Perspective" />
62+
<h2>Perspective</h2>
63+
<h4>perspective(n)</h4>
64+
<p>Defines a perspective view for a 3D transformed element</p>
65+
</li>
66+
<li>
67+
<img src="img/matrix.png" class="example" alt="Matrix" />
68+
<h2>Matrix</h2>
69+
<h4>matrix(n,n,n,n,n,n), <strong>matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)</strong></h4>
70+
<p>Defines a 2D/3D transformation, using a matrix of six values for 2D and 16 values for 3D</p>
71+
</li>
72+
<li>
73+
<img src="img/easing.png" class="example" alt="Transitions" />
74+
<h2>Transitions</h2>
75+
<h4>[property] [duration] [delay]</h4>
76+
<p>Transitions allows you to change property values smoothly (from one value to another), over a given duration.</p>
77+
</li>
78+
</ul>
79+
</div>
80+
<script>
81+
$(window).load(function() {
82+
$('.flexslider').flexslider({
83+
animation: "slide",
84+
slideshow: false,
85+
directionNav: false
86+
});
87+
});
88+
</script>
1389
</body>
1490
</html>

‎scripts.js

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1 @@
1-
$(document).ready(function(){
2-
});
1+
$(window).load(function() { });

0 commit comments

Comments
 (0)