Word slider with Velo

Ask the community
,
1

Hello guys,

I got basically no knowledge about coding but I fell in love with this word slider you can see here:

https://www.hellofresh. de/

Is there any way I can implement something like that? If so, how can I do it?

Thank you! :blush:

2

Add an embedded widget (iframe) to the page.
and put inside (copied from the codepen you posted + overflow:hidden to prevent scrolling bar):

<html>
 <head>
<style>
  body {
    overflow:hidden;
  }
.ms-header {
  display: flex;
  align-items: center;
  jsutify-content: center;
  font-family: sans-serif;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right bottom, #9dd7d5, #fea096);
}
.ms-header__title {
  flex: 1 1 100%;
  width: 100%;
  text-align: center;
  font-size: 4rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.4);
}

.ms-slider {
  display: inline-block;
  height: 1.5em;
  overflow: hidden;
  vertical-align: middle;
  -webkit-mask-image: linear-gradient(transparent, white, white, white, transparent);
          mask-image: linear-gradient(transparent, white, white, white, transparent);
  mask-type: luminance;
  mask-mode: alpha;
}
.ms-slider__words {
  display: inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
  -webkit-animation-name: wordSlider;
          animation-name: wordSlider;
  -webkit-animation-timing-function: ease-out;
          animation-timing-function: ease-out;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-duration: 7s;
          animation-duration: 7s;
}
.ms-slider__word {
  display: block;
  line-height: 1.3em;
  text-align: left;
}

@-webkit-keyframes wordSlider {
  0%, 27% {
    transform: translateY(0%);
  }
  33%, 60% {
    transform: translateY(-25%);
  }
  66%, 93% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-75%);
  }
}

@keyframes wordSlider {
  0%, 27% {
    transform: translateY(0%);
  }
  33%, 60% {
    transform: translateY(-25%);
  }
  66%, 93% {
    transform: translateY(-50%);
  }
  100% {
    transform: translateY(-75%);
  }
}
</style>
</head>
<body>
<header class="ms-header">
  <h1 class="ms-header__title">
    This is
    <div class="ms-slider">
      <ul class="ms-slider__words">
        <li class="ms-slider__word">simple</li>
        <li class="ms-slider__word">easy</li>
        <li class="ms-slider__word">powerful</li>
        <!-- This last word needs to duplicate the first one to ensure a smooth infinite animation -->
        <li class="ms-slider__word">simple</li>
      </ul>
    </div>
  </h1>
</header>
  </body>
</html>
3

Wow it worked! Thank you so much :slight_smile: