Html move the animated text from the initial position

advertisements

I am trying to see how I can have text float upward from the initial position in a slideshow. Like how OnGuardian does on their site. I have tried CSS animated and w3 animate but the problem is it does not move up from the set position it just moves from bottom to up to original position. I am open to using CSS, Javascript, & HTML.

Here is my code

    <li style="background-image: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.2) 100%), url(Images/homepage1.jpg)">
       <img  class ="slider-image" src="Images/tenniscentrallogo1.png">
        <!-- <div class="slider-logo "><span></span></div> -->
        <div class="slider-content ">
          <div class="slider-container ">
            <div class="slider-center ">
              <div class=" w3-animate-bottom slider-header">
                <h2> Financial freedom & fun at your fingertips </h2>
              </div>
              <p class = " w3-animate-bottom slidertext"> Take an  quantum leap into the future. Start a lucrative tennis business today with our dynamic team at your service</p>
                <a class="btn play-video-btn" href="#" data-toggle="modal" data-target="#videoModal" preload="auto">Watch the video</a>
          </div>
        </div>
      </div>
    </li>

I want to animated the slider-header class and the slider-text class. My issues is more related to not being able to know how to find the desired effect.


You can definitely do this with pure CSS, as long as it's a simple animation. I've created a demo for

@keyframes floatup {
  from {transform: translateY(0px);}
  to {transform: translateY(-100px);}
}

That will start the object where it's already styled / located, then move it. To use the keyframes, add the following statement to your code:

animation: floatup 2s forwards;

Call 'floatup' or your keyframes name to animate the object; set the duration with 2s.

Most importantly: Use forwards to tell the object to stay in the new location (20px higher in the above keyframe) after animating.

I've demo'd this with your HTML, on Codepen. https://codepen.io/laureng/pen/LyzBbz

(Note: I added a few "reset" styles so you could see it without the default body padding / ul padding / etc., and added a random Google image since we don't have access to your site's /images/ folder.)