Hello guys,
I got basically no knowledge about coding but I fell in love with this word slider you can see here:
Is there any way I can implement something like that? If so, how can I do it?
Thank you! 😊
Important forum update
This forum is migrating to one unified Wix community forum starting July 26th, and will be read-only during the process.
Wishlist Page is the official platform for requesting new features. You can vote, comment, and track the status of the requested features.
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>
Wow it worked! Thank you so much :)