score:1

Accepted answer

you can achieve the animation with just css (ie tailwindcss) by using 'animation' css property

i- create a nextjs project with the command: $npx create-next-app my-app

ii- setup tailwindcss with nextjs project: https://tailwindcss.com/docs/guides/nextjs

iii- create new react component animation.js, inside pages/ folder

import react from 'react'
export default function animation2() {
  return (
    <>
      {/* image animation */}
      <div classname="animate">
          <img src="/frise-2.2f579f.png" alt="" />
          <img src="/frise-2.2f579f.png" alt="" />
      </div>

      {/* image animation - reversed direction */}
      <div classname="animate-reversed">
          <img src="/frise-2.2f579f.png" alt="" />
          <img src="/frise-2.2f579f.png" alt="" />
      </div>
  
      {/* text animation */}
      <div classname="bg-[#332970] w-screen box-border  p-4 flex items-center overflow-hidden fixed bottom-0">
        <div classname="animate">
          {
            [0,1,2,3,4,5,6,7,8,9,10,11].map((i) => (
              <div classname="text-[#139bac] whitespace-nowrap inline-flex items-center justify-center">• new site launching soon&nbsp;</div>
            ))
          }
        </div>
      </div>
      
    </>
  );
}
  1. the first div responsible for the animation of the image with the default direction from right to left. i used 2 img tags because it has to have 2 separate sets of the same img tag. because with the infinite loop, when one image disappears the second one appears and it will restart the loop without any gap (you can comment the second img tag to check the gap am talking about)

  2. the second div is similar to the first one but it has the reversed direction property.

  3. for the text animation, we do the same thing we have to create the text multiple times to avoid the gap when we animate the text for an infinite loop. and to avoid multiple lines of the same tag: • new site launching soon  i wrapped in an array and loop through it

  4. all the styles are integrated in the same component using tailwindcss except the animation that will be added in globals.css file like this:

go to globals.css file and add the animation css code:

@tailwind base;
@tailwind components;
@tailwind utilities;


@layer components {
  .animate{
    display: flex;
    animation: scroll 20s linear infinite;
  }
  .animate:hover{
    animation-play-state: paused;
  }

  .animate-reversed{
    display: flex;
    animation: scroll 20s linear infinite;
    animation-direction: reverse;
  }
  .animate-reversed:hover{
    animation-play-state: paused;
  }

  @keyframes scroll {
    0%{

      transform: translatex(0);
    }
    100%{

      transform: translate(-50%);
    }
  }

}

score:0

there are a few ways to do this, but taking into account the site you referenced, i noticed that it works with an infinite increment, so it's most likely done with js.

ps.: i could do everything with javascript.

const sleed1 = document.getelementbyid("sleed1");

let position1 = 0;

setinterval(() => {
  position1 = position1 + 10;
  sleed1.style.backgroundposition = position1 + 'px';
  sleed1.style.transitionduration = '100ms';
}, 40)
#sleed1 {
  width: 100%;
  height: 200px;
  background-color: #ccc;
  background-image: url("https://i.stack.imgur.com/zjxix.png");
}
<div id="sleed1" />

to control the speed you can change 3 values:

  1. number of pixels increased, i put 10.
  2. the duration of the transition, i put '100ms'.
  3. the setinterval interval, i put 40.

both will influence speed but in different ways, so adjust until you find the best solution for you.

to change the sleed side, change "position + n" to "position-n".

same code in react. using "useeffect" with ",[ ]". important not to forget this for the code to run only once and avoid undesirable effects.

https://codesandbox.io/s/slide-image-animation-with-react-and-css-rfhvd?file=/src/app.js


Related Query

More Query from same tag