Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create Testimonial Section with Sliding Animation. Testimonials are nothing but the feedbacks your client or user gives to your services or products. These comments helps other userd to build a trust over your company. Hence you have to display it creatively and beautifully. Here's my version of showing the testimonials inside a card with sliding animation to the text.
Here's a preview -
That being said, let us get started.
Step - 1: Like always, create 2 files - index.html and style.css.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pure CSS Text Slider Demo</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<section>
<div class="rt-container">
<div class="col-rt-12">
<div id="slider">
<ul>
<li>
<div class="slider-container">
<h2>Slider Content - 1</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Slider Content - 2</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Slider Content - 3</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,</p>
</div>
</li>
<li>
<div class="slider-container">
<h2>Slider Content - 4</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
Ipsum has been the industry's standard dummy text ever since the 1500s, when an
unknown printer took a galley of type and scrambled it to make a type specimen book.
It has survived not only five centuries,</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
@import url('https://fonts.googleapis.com/css?family=Raleway:400,500,600,700,800,900');
body {
background: #f6f7fc;
font-family: "Raleway", sans-serif;
font-size: 100%;
line-height: 24px;
margin: 0;
padding: 0;
}
section {
float: left;
width: 100%;
margin-top: 10em;
margin-bottom: 2em;
}
.rt-container {
margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
}
#slider, #slider ul {
height: 250px;
}
#slider {
margin: 0 auto auto;
overflow: hidden;
padding: 20px;
border-radius: 25px;
box-shadow: 2px 31px 35px -15px rgba(0, 0, 0, 0.64);
position: relative;
max-width: 600px;
min-width: 320px;
background: linear-gradient(45deg, #0f0c29, #302b63, #24243e);
}
#slider li {
position: relative;
width: 600px;
display: inline-block;
height: 200px;
}
#slider ul {
list-style: none;
position: absolute;
left: 0;
top: 0;
width: 9000px;
transition: left 0.3s linear;
margin-left: -25px;
font-family: century gothic;
}
.slider-container {
margin: 0 auto;
padding: 0;
width: 550px;
min-height: 180px;
border-bottom: 1px solid #ccc;
}
.slider-container h2 {
color: #fff;
text-shadow: -1px 0 0 rgba(0, 0, 0, 0.50);
}
.slider-container p {
margin: 10px 25px;
font-weight: semi-bold;
line-height: 150%;
text-align: justify;
color: lightcyan
}
#slider ul
{
animation: slide-animation 25s infinite;
}
@keyframes slide-animation {
0% {opacity:0;}
2% {opacity:1;}
20% {left:0px; opacity:1;}
22.5% {opacity:0.6;}
25% {left:-600px; opacity:1;}
45% {left:-600px; opacity:1;}
47.5% {opacity:0.6;}
50% {left:-1200px; opacity:1;}
70% {left:-1200px; opacity:1;}
72.5% {opacity:0.6;}
75% {left:-1800px; opacity:1;}
95% {opacity:1;}
98% {left:-1800px; opacity:0;}
100% {left:0px; opacity:0;}
}
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love