Today’s tutorial is about creating an animated swatch book using CSS rotation
transforms and JavaScript. The idea is to show a swatch book like structure and
make the single swatches or “sheets” clickable. When clicking on a swatch, we’ll
rotate the other swatches in order to reveal the selected one
In this tutorial we will be using an icon font that
was created with Fontello.
We will omit vendor
prefixes in this tutorial. But you’ll of course find them in the files.
The Markup
For the markup we’ll have a simple structure with
several divisions where each one contains an icon span and a h4:
<div id="sb-container" class="sb-container"> <div> <span class="sb-icon icon-cog"></span> <h4><span>All Settings</span></h4> </div> <div> <span class="sb-icon icon-flight"></span> <h4><span>User Modes</span></h4> </div> <div> <!-- ... --> </div> <!-- ... --> <div> <h4><span>Profile</span></h4> <h5><span>We ♥ color</span></h5> </div> </div><!-- sb-container -->
The last division will not have an icon span but
instead an h4 and an h5 element. This last division will be our “cover”, the top
most layer of the swatch book.
Let’s take a look at the style.
The CSS
First, let’s define the style for the containing wrapper. We’ll make it the same
width like one of the swatches (although they will take up more space) so that
we can easily center it:
1
2
3
4
5
6
.sb-container {
position: relative;
width: 150px;
height: 400px;
margin: 30px auto 0 auto;
}
Our aim is to create a swatch book like structure
with several swatch “sheets”. Each one will be rotated using the CSS transform
property (JS). So, let’s give the swatches a realistic width and height and make
them absolute. Our initial state is that all swatches are stacked on top of each
other. The transform-origin will define how our swatches will be rotated. Since
we’ll want to use the bottom left corner for that, we’ll set a value of 25% 90%.
The backface-visibility hidden will help avoiding a jagged looking text when
rotating:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
.sb-container div {
position: absolute;
top: 0;
left: 0;
width: 130px;
background: #fff;
height: 400px;
border-radius: 5px;
cursor: pointer;
text-align: center;
background-image: url(../images/fabric.png);
transform-origin: 25% 90%;
backface-visibility: hidden;
}
Let’s define a different background color and box
shadow for each division:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.sb-container div:nth-child(1){
background-color: #ea2a29;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 1px 1px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(2){
background-color: #f16729;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 2px 2px 1px rgba(0,0,0,0.1);
}
.sb-container div:nth-child(3){
background-color: #f89322;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 3px 3px 2px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(4){
background-color: #ffcf14;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 4px 4px 4px rgba(0,0,0,0.2);
}
.sb-container div:nth-child(5){
background-color: #ffea0d;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 5px 5px 6px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(6){
background-color: #87b11d;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 6px 6px 8px rgba(0,0,0,0.3);
}
.sb-container div:nth-child(7){
background-color: #008253;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 7px 7px 10px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(8){
background-color: #3277b5;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 8px 8px 12px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(9){
background-color: #4c549f;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 9px 9px 14px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(10){
background-color: #764394;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 10px 10px 16px rgba(0,0,0,0.4);
}
.sb-container div:nth-child(11){
background-color: #ca0d86;
box-shadow: -1px -1px 3px rgba(0,0,0,0.1), 11px 11px 18px rgba(0,0,0,0.4);
}
We want to make it look as realistic as possible,
so we’ll give the bottom most element, which is our first child, a very subtle
shadow. For every following element we’ll increase that second shadow.
No comments:
Post a Comment