score:1
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 </div>
))
}
</div>
</div>
</>
);
}
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)
the second div is similar to the first one but it has the reversed direction property.
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
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:
- number of pixels increased, i put 10.
- the duration of the transition, i put '100ms'.
- 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
Source: stackoverflow.com
Related Query
- Animated bar / text with Tailwind CSS and react
- How to individually change text color and font weight in the same div element using Tailwind CSS and React
- Tailwind CSS custom gradient with React state and FastAverageColor
- react rollup no styling with tailwind css and css
- react css style syntax - set value of css prop with variables and text in one line
- How to achieve split hero section view combining absolute/relative css with Tailwind and React
- Themes in Tailwind CSS are not working with Webpack and React
- SyntaxError with Jest and React and importing CSS files
- How to import CSS modules with Typescript, React and Webpack
- Multiple classNames with CSS Modules and React
- Test setting text value with React and Enzyme
- Remove unused css with React and Webpack
- Line two divs side by side with CSS and React
- How to use vw and vh css with React Native
- using google fonts in nextjs with sass, css and semantic ui react
- How to limit the text filed length with input type number in React JS and prevent entry of E,e, -, + etc
- CSS Code Splitting with Webpack 2 and React Router
- Test text input with react and jest
- Test with Mocha and Enzyme a React component that uses React CSS Modules
- React Native - text with background and a gap between multiple lines
- Using modular CSS with Bootstrap 4 and React
- Loading Sass and injecting CSS text into a parent document from a React app
- Theming react app with sass and css modules
- React Convert Div and Table Component Into PDF With Multiple Pages and CSS
- How to determine the order of css in my create react app build with webpack and customize-cra?
- Is it possible to use MaterialUI with React and css modules and access the theme inside the css module file?
- Preloading images and audio with a progress bar in React
- React check if css has loaded with Webpack and React
- Heroku build failure with react and tailwind
- Render bar chart with chart.js and react and es6
More Query from same tag
- Can't import typescript react-modal
- How to update state of parent from child component in reactJS
- Running React while rebooting Ubuntu server
- React: Do Hooks Replace HOCs and Render Props?
- Cannot access exposed Dockerized React app on Kubernetes
- Problem with send an Function Parameters and Argument
- How to dynamically load a component from an object in state array?
- react js svg linearGradient not rendering correct value
- How to set a default value into a prop in ReactJs?
- Passing String value through Props returned from useSelector Hook
- drawing 4 circles in a canvas in reactjs
- Redux mapStateToProps property dependencies
- Correct way to define an empty dom element in React
- Why does useState not work with Objects when using defaultValue
- React setState dynamically - how to setState property and value from props
- Loop through an array of nested objects in javascript
- ESLint - missing return type on function react component - Typescript error explanation
- Filter a object by single value js
- How to get checkbox/radio being checked with given dynamic id in React Router
- Typescript - Rendering Connected Components
- how to limit the number of results for autocomplete input / ant.design
- Why is this undefined within reactjs component method
- How can I limit the user from going to specific component
- How do I persist auth between react and a flask server
- Sending streams as response of a axios request
- Type error: Cannot read property currentTime of undefined
- Enzyme: how to test a key down?
- useQuery to conditionally render data
- How can I add an overlay over a Gatsby Static Image Component?
- Using localStorage in React