How to make slider in which content come with animation

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.