DAWN THEME HELP - Header text, how to make one word change every second (animation/carousel)

Store Design
1

Screenshot 2023-03-08 at 14.17.53.png
Screenshot 2023-03-08 at 14.17.53.png2874×1550 393 KB

Hey guys,

Does anyone know how to make one word change each second, so that “startup” changes to “business” “Brand” “company” for example in a continuous loop?

I notice Shopifys own website has this, but upon inspection it was made using tailwind. Also there is a guide on how to do something similar on Shopify but it created a section by itself, without any other content. I would love to be able to have a title to the right and image to the left with one word looping.

Is this possible with some CSS and Javascript?

Any help would be much appreciated, I think this would be a great sticky thread for enhancing shopifys sites, espec

2

hello there

Yes, it’s possible to create a continuous loop that changes one word to another using CSS and JavaScript. Here’s an example of how you could achieve this effect:


  

  # startup

CSS

.title-wrapper {
  display: flex;
  align-items: center;
}

.image {
  width: 100px;
  height: 100px;
  background-color: gray; /* replace with your image */
}

.title {
  margin-left: 10px;
  font-size: 36px;
  font-weight: bold;
  animation: changeWord 4s infinite;
}

@keyframes changeWord {
  0% { content: "startup"; }
  25% { content: "business"; }
  50% { content: "Brand"; }
  75% { content: "company"; }
  100% { content: "startup"; }
}

Note that the content property is used in the animation to change the text of the “title” element. This property can only be used with the ::before and ::after pseudo-elements in CSS, so we must use JavaScript to apply it to the “title” element.

Javascript:

var titleElement = document.querySelector('.title');

setInterval(function() {
  titleElement.classList.remove('fade-out');
  void titleElement.offsetWidth;
  titleElement.classList.add('fade-out');
}, 4000);
3

Thank you very much.

Where should I put this code? Do I create a liquid ‘section’ for the DIV part, a CSS file for the CSS and then a JSON for the javascript?