How to change styles of a styled component at an interval?

user_12798627 0
Viewed 430

So I've got to make a sliding-to-the-left text for a website and I didn't complicate much, just took a codepen from Google and tried to implement it .... except that Codepen uses classic CSS and I'm using styled components. Basically, the code changes the class (which contains the style) of a div that contains the text at a set interval and together with the css animations we have a sliding text (I'll leave both the link and the code). I know how styled components work, at a basic level (const Button = styled.button .. ). What I don't know, is how to change that style ... the original pen works by changing the class of the component, I can't do that...

PS: There is no need for the text to change. I'll just leave the default one.

Link: CodePen Code:

var title = ['<p>Every new beginning comes from some other beginning s end.</p>','<p>Even the genius asks questions.</p>','<p>It s better to burn out, than to fade away.</p>'];
var index = 0;

function change_title() {
    var x = title[index];
    $('.main').html(x);
    index++;
    if (index >= title.length) { index = 0; }
};

function change_left() {
    $('div').removeClass('slide-right').addClass('slide-left');
}

function change_right() {
    $('div').removeClass('slide-left').addClass('slide-right');
    change_title();
}

function to_left() {
setInterval(change_left, 10000);
};

function to_right() {
    setInterval(change_right, 20000);
};

to_left();
to_right();
body { background-color: #add8e6; }
h1 { text-align: center; margin: 2.5em;}
div.main {
  width:90%;
  overflow:hidden;
  background-color: #2F5168;
  margin: 2.5em auto;
  height: auto;
  border: 2px solid gray;
  padding: 1.2em 0;
  font-size: 1.5em;
  font-family: "Agency FB";
  color: #E4F6F8;
}
div.slide-right p {
  -moz-animation: 10s slide-right;
  -webkit-animation: 10s slide-right;
  -o-animation: 10s slide-right;
  animation: 10s slide-right;
  margin:0;
}
div.slide-left p {
  -moz-animation: 10s slide-left;
  -webkit-animation: 10s slide-left;
  -o-animation: 10s slide-left;
  animation: 10s slide-left;
  margin:0;
}
@-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
 @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
@keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }

@-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
@keyframes slide-left { from {margin-left: 0%;width: 100%;}
 to {margin-left: -100%;width: 300%;} }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="main slide-right">
   <p>It s better to burn out, than to fade away.</p>
</div>
<h1>An infinite loop of sliding text right to left</h1>

My code:

import React from 'react';
import styled from 'styled-components';

const HeroContainer = styled.div`
    width: 100%;
    background-color: #fdf3eb;
    padding: 60px 0px 60px 0px;
`

const HeroBannerText = styled.h1`
    -moz-animation: 10s slide-right;
    -webkit-animation: 10s slide-right;
    -o-animation: 10s slide-right;
    animation: 10s slide-right;
    margin:0;
`

class HeroBanner extends React.Component{
    changeLeft = () => {
        HeroBannerText
    }

    render(){
        return(
            <HeroContainer>
                <HeroBannerText>We'll Unsplash you with images all day long.</HeroBannerText>
            </HeroContainer>
        );
    }
}

export default HeroBanner;

import React from 'react'
import styled, { createGlobalStyle } from 'styled-components'
import Navbar from './components/Navbar'
import HeroBanner from './components/HeroBanner'

const GlobalStyle = createGlobalStyle`
  @font-face{
    font-family: robotoRegular;
    src: url(./fonts/Roboto-Regular.ttf);
  }

  @-webkit-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @-moz-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @-o-keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }
  @keyframes slide-right { from { margin-left: 100%;width: 300%; }
  to {margin-left: 0%;width: 100%;} }

  @-webkit-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @-moz-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @-o-keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }
  @keyframes slide-left { from {margin-left: 0%;width: 100%;}
  to {margin-left: -100%;width: 300%;} }

  * {
    box-sizing: border-box;
  }

  body {
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
`;

function App() {
  return (
    <>
      <GlobalStyle/>
      <div>
        <Navbar/>
        <HeroBanner/>
      </div>
    </>
  );
}

export default App;
styled-components reactjs css jquery javascript
1 Answers

A simple approach to achieve your functionality is to use Passed props and state hooks to dynamically change styles. For more complicated logic you could take a look at Theming. Example:

const Colored = styled.p`
    color: ${props => props.color}
`

function Component() {
    const [color, setColor] = useState('red');
    
    return (
        <>
            <Colored>Some text here</Colored>
            <Button onClick = {() => setColor('blue')}>Change color to blue</Button>
        </>
    )
}
user_49579760
Related