In this slider, i used only HTML and CSS not even single-line JS code. It's purely on CSS animation. You can copy the code and used it in your page. And all icon are SVG tag i used here. SVG icon take from https://materialdesignicons.com/ if you want to use your own icon can simple replace my svg code and you can used youer own icon.
HTML:
<div class="container">
<div class="slider-container">
<div class="slider-icon">
<svg style="width:24px;height:24px" viewBox="0 0 24 24" class="animated iconanimate infinite">
<path fill="currentColor" d="M22,12V20A2,2 0 0,1 20,22H4A2,2 0 0,1 2,20V12A1,1 0 0,1 1,11V8A2,2 0 0,1 3,6H6.17C6.06,5.69 6,5.35 6,5A3,3 0 0,1 9,2C10,2 10.88,2.5 11.43,3.24V3.23L12,4L12.57,3.23V3.24C13.12,2.5 14,2 15,2A3,3 0 0,1 18,5C18,5.35 17.94,5.69 17.83,6H21A2,2 0 0,1 23,8V11A1,1 0 0,1 22,12M4,20H11V12H4V20M20,20V12H13V20H20M9,4A1,1 0 0,0 8,5A1,1 0 0,0 9,6A1,1 0 0,0 10,5A1,1 0 0,0 9,4M15,4A1,1 0 0,0 14,5A1,1 0 0,0 15,6A1,1 0 0,0 16,5A1,1 0 0,0 15,4M3,8V10H11V8H3M13,8V10H21V8H13Z" />
</svg>
</div>
<div class="slider-message">
<ul>
<li>
<div class="slider-msg-box">
<p><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M12,17.56L16.07,16.43L16.62,10.33H9.38L9.2,8.3H16.8L17,6.31H7L7.56,12.32H14.45L14.22,14.9L12,15.5L9.78,14.9L9.64,13.24H7.64L7.93,16.43L12,17.56M4.07,3H19.93L18.5,19.2L12,21L5.5,19.2L4.07,3Z" />
</svg> <span>HTML is easy lerning language</span> </p>
</div>
</li>
<li>
<div class="slider-msg-box">
<p><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M5,3L4.35,6.34H17.94L17.5,8.5H3.92L3.26,11.83H16.85L16.09,15.64L10.61,17.45L5.86,15.64L6.19,14H2.85L2.06,18L9.91,21L18.96,18L20.16,11.97L20.4,10.76L21.94,3H5Z" />
</svg> <span>CSS3 is more power designing code</span></p>
</div>
</li>
<li>
<div class="slider-msg-box">
<p><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M8,16.61V15.37L14,11.91V7.23L9,10.12L4,7.23V13L3,13.58L2,13V5L3.07,4.38L9,7.81L12.93,5.54L14.93,4.38L16,5V13.06L10.92,16L14.97,18.33L20,15.43V11L21,10.42L22,11V16.58L14.97,20.64L8,16.61M22,9.75L21,10.33L20,9.75V8.58L21,8L22,8.58V9.75Z" />
</svg> <span>We used the Material Design Icon</span></p>
</div>
</li>
<li>
<div class="slider-msg-box">
<p><svg style="width:24px;height:24px" viewBox="0 0 24 24">
<path fill="currentColor" d="M16.36,14C16.44,13.34 16.5,12.68 16.5,12C16.5,11.32 16.44,10.66 16.36,10H19.74C19.9,10.64 20,11.31 20,12C20,12.69 19.9,13.36 19.74,14M14.59,19.56C15.19,18.45 15.65,17.25 15.97,16H18.92C17.96,17.65 16.43,18.93 14.59,19.56M14.34,14H9.66C9.56,13.34 9.5,12.68 9.5,12C9.5,11.32 9.56,10.65 9.66,10H14.34C14.43,10.65 14.5,11.32 14.5,12C14.5,12.68 14.43,13.34 14.34,14M12,19.96C11.17,18.76 10.5,17.43 10.09,16H13.91C13.5,17.43 12.83,18.76 12,19.96M8,8H5.08C6.03,6.34 7.57,5.06 9.4,4.44C8.8,5.55 8.35,6.75 8,8M5.08,16H8C8.35,17.25 8.8,18.45 9.4,19.56C7.57,18.93 6.03,17.65 5.08,16M4.26,14C4.1,13.36 4,12.69 4,12C4,11.31 4.1,10.64 4.26,10H7.64C7.56,10.66 7.5,11.32 7.5,12C7.5,12.68 7.56,13.34 7.64,14M12,4.03C12.83,5.23 13.5,6.57 13.91,8H10.09C10.5,6.57 11.17,5.23 12,4.03M18.92,8H15.97C15.65,6.75 15.19,5.55 14.59,4.44C16.43,5.07 17.96,6.34 18.92,8M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z" />
</svg> <span>You can see the live demo on Labw3 Demo</span></p>
</div>
</li>
</ul>
</div>
</div>
</div>
CSS:
.container {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.slider-container {
width: 350px;
height: 35px;
background: #f5f5f5;
border-radius: 20px;
padding: 0 10px;
box-sizing: border-box;
}
.slider-container ul {
animation: slide-animation 25s infinite;
}
.slider-container ul:hover {
animation-play-state: paused;
}
.slider-icon {
float: left;
}
.slider-icon svg {
width: 18px !important;
color: #d40c0c;
margin: 6px;
box-sizing: border-box;
display: block;
}
.slider-message {
overflow: hidden;
position: relative;
width: 285px;
height: 35px;
margin-left: 5px;
float: left;
}
.slider-message ul {
list-style: none;
position: absolute;
left: 0px;
top: 0px;
width: 9000px;
padding: 0 0 0 25px;
margin: 0;
transition: left 0.3s linear;
margin-left: -25px;
font-family: Arial, Helvetica, sans-serif;
color: #666;
font-size: 12px;
}
.slider-message li {
position: relative;
width: 310px;
display: inline-block;
height: 35px;
}
.slider-msg-box {
margin: 0 auto;
padding: 0;
width: 310px;
min-height: 35px;
display: flex;
align-items: center;
}
.slider-msg-box p {
font-size: 12px;
font-weight: 400;
margin: 0;
display: flex;
align-items: center;
}
.slider-msg-box p svg {
width: 15px !important;
height: 15px !important;
margin-right: 2px;
}
@keyframes slide-animation {
0% {
opacity: 0;
}
2% {
opacity: 1;
}
20% {
left: 0px;
opacity: 1;
}
22.5% {
opacity: 0.6;
}
25% {
left: -310px;
opacity: 1;
}
45% {
left: -310px;
opacity: 1;
}
47.5% {
opacity: 0.6;
}
50% {
left: -620px;
opacity: 1;
}
70% {
left: -620px;
opacity: 1;
}
72.5% {
opacity: 0.6;
}
75% {
left: -930px;
opacity: 1;
}
95% {
opacity: 1;
}
98% {
left: -930px;
opacity: 0;
}
100% {
left: 0px;
opacity: 0;
}
}
.animated {
animation-duration: 1s;
animation-fill-mode: both;
}
.animated.infinite {
animation-iteration-count: infinite;
}
.iconanimate {
animation-name: iconanimate;
}
@keyframes iconanimate {
0% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
10%, 20% {
-webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
}
30%, 50%, 70%, 90% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
}
40%, 60%, 80% {
-webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
}
100% {
-webkit-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
}
}
OUTPUT
See the Pen Simple Text Slider With HTML and CSS no JS by Gokul S (@iamsgokul) on CodePen.
No comments:
Post a Comment