I want to create a slider in which background image is static but the text is change and it comes with some delay or animation. I didn’t get any solution.
Please help me.
I attach a GIF file which helps you that what kind of animation I want.
You could do this by animating the opacity of the text elements.
This example animates the opacity of of images, to make a slideshow, but the same methods could be used on text elements.
1 Like
Hi there Praveen_Kumar_Verma,
here is a basic responsive example…
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
body {
background-color: #f0f0f0;
font: 1em/1.3em verdana, arial, helvetica, sans-serif;
}
#text {
position: relative;
width: 43.125em;
height: 15.25em;
padding: 0.5em 12em 0.5em 1.5em;
margin: auto;
box-sizing: border-box;
background-color: #150c0f;
background-image: url(http://coothead.co.uk/images/test-image.jpg);
box-shadow: 0.4em 0.4em 0.4em #999;
color: #fff;
}
#text p, #text span {
opacity: 0;
animation:fadein 1.5s ease-in forwards;
}
#text p:nth-child(1) {
color: #f93;
}
#text p:nth-child(2) {
animation-delay: 1.5s;
}
#text p:nth-child(3) {
animation-delay: 3s;
}
#text p:nth-child(4) {
animation-delay: 4.5s;
}
#text span {
position: absolute;
right: 0;
bottom: 1.5em;
margin-right: 1.5em;
color: #f93;
animation-delay: 6s;
}
@keyframes fadein {
0%{opacity: 0;}
100%{opacity: 1;}
}
@media screen and (max-width: 45em) {
#text {
width: 31.625em;
height: 15.25em;
padding: 0.5em 1.5em;
}
}
@media screen and (max-width: 34em) {
#text {
width: auto;
height: auto;
padding: 0.5em 1.5em 1.5em 1.5em;
background-image: none;
text-align: right;
}
#text p {
text-align: left;
}
#text span {
position: static;
}
}
</style>
</head>
<body>
<div id="text">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p>Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi.</p>
<p>Nulla rhoncus vel ipsum in volutpat.</p>
<p>Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo.</p>
<span>Author</span>
</div>
</body>
</html>
coothead
3 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.