Slide-in Page Layout with CSS Animation

Categories: Design

Tags: , ,

Slide-in text information panel when ‘more-info’ button clicked.

This is a modern layout example suitable for a page with lots of text information. Too much text on a page can be a bit daunting to look at sometimes. Personally I prefer web pages with less text. To achieve the clean modern looking layout, the majority of text will be hidden away and slide-in only when the ‘more info’ button is clicked. This could be a useful layout for ‘About’ pages.

The ‘toggleClass’ is the only jQuery we need for this, plus full CSS animation.

Let’s start by setting up the content with HTML.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="page-about">
  <div class="left-side">
    <h1>Web Made Well</h1>
    <h3>Web Designer</h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    <button class="trigger">Info</button>
  </div>
  <div class="profile-photo">
  </div>
  <div class="right-side-info">
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
    <p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. </p>
    <p>Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Nam eget dui. Etiam rhoncus. </p>
    <p>Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. </p>
  </div>
</div>

We have all the text content, now stylise it with CSS.

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
45
46
47
48
49
50
51
52
53
54
body {
  margin: 0;
  font-size: 0.875em;
  color: DimGray;
}
div {
  box-sizing: border-box;
}
button {
  font-size: 1em;
  font-weight: bold;
  background-color: black;
  color: white;
  border: none;
  padding: 8px 16px;
  outline: none;
}
button::before {
  content: 'More ';
}
.page-about {
  position: relative;
  overflow: hidden;
  width: 90%;
  min-width: 600px;
  max-width: 1000px;
  margin: 40px auto;
  background-color: white;
  box-shadow: 1px 1px 20px 0 rgba(0, 0, 0, 0.1);
}
.left-side {
  position: absolute;
  width: 50%;
  padding: 40px;
}
.profile-photo {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  background-image: url(https://webmadewell.com/wp-content/uploads/2018/02/img-bg-about.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.right-side-info {
  position: relative;
  padding: 40px;
  width: 50%;
  margin-left: 100%;
  color: white;
  background-color: DimGray;
}

The page laid nicely with CSS, most of the text content hidden outside the page (‘.page-about’).
Now let’s use the jQuery to add ‘.show-info’ class to the page when the ‘more info’ button is clicked.

1
2
3
$('.trigger').click(function() {
  $(this).parents('.page-about').toggleClass('show-info');
});

That’s all jQuery we need, only 3 lines. 🙂
As we have the toggleClass placed, it’s time we played with the CSS Animation.
We need to animate the profile photo from the right to the left top corner.

55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
.profile-photo {
  animation: right_frame 1s ease-in-out 1 forwards;
}
.show-info .profile-photo {
  animation: left_frame 1s ease-in-out 1 forwards;
}
@keyframes right_frame {
  0% {
    top: 40px;
    left: 40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
  }
  50% {
    top: 40px;
    left: 50%;
    width: 160px;
    height: 160px;
    border-radius: 50%;
  }
  100% {
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    border-radius: 0;
  }
}
@keyframes left_frame {
  0% {
    top: 0;
    left: 50%;
    width: 50%;
    height: 100%;
    border-radius: 0;
  }
  50% {
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    border-radius: 0;
  }
  100% {
    top: 40px;
    left: 40px;
    width: 160px;
    height: 160px;
    border-radius: 50%;
  }
}

The profile photo is moving its positions to the correct places and transforming by CSS animation from clicking of the button.

Lastly, let’s add a few more lines of CSS for the text content to move to the right places. For this we don’t need to use CSS animation, instead CSS transition will do the job nicely.

107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
.show-info .left-side {
  padding-top: 220px;
}
.show-info button {
  background-color: MediumTurquoise;
}
.show-info button::before {
  content: 'Less ';
}
.show-info .right-side-info {
  margin-left: 50%;
}
.left-side,
.right-side-info,
button {
  transition: all 0.5s ease-in-out;
}

Now the text content is also moving its positions along with the profile photo nicely.
You can also see it in action at my CodePen page.

If you are wondering about the difference between CSS animation and CSS transition like when I started using these. The CSS transition is good enough if only one or two step transformations are required. But when the transformations are more than three-steps CSS animation is better to use. In this case, the profile photo needed to transform its position from right to left before its size and border-radius transformations. So the CSS animation was set up for keyframes at 0%, 50% and 100%.