I want to display the word ‘Hello’ on the home page of a website. I used CSS to make the ‘Hello’ transition up as the page loads in the beginning. I would like to implement a shuffling animation that randomly shuffles between the word Hello in different languages. I would like to do so with an animation where as the ‘Hello’ slides up at the beginning, the ‘Hello’ slides up more, fades out and disappears. As this occurs, a ‘Bonjour’ for example slides up from beneath and takes place. I picture this repeating forever.
Is there any way to implement such animation using CSS, JavaScript, Jquery, or any other web tools? Below is the HTML, CSS, and JS structure I have that only achieves the initial transition as the page loads:
<body> <section> <h1 id="switch">Hello</h1> </section></body>section { text-align: left;}section h1 { font-size: 100px; font-weight: 420; position: absolute; top: 130px; left: 200px; opacity: 0; transform: translateY( 43px ); animation-name: fade-in; animation-duration: 0.6s; animation-timing-function: ease-out; animation-fill-mode: forwards;}var currentIndex = 0;var hello = new Array( 'Hello', 'Bonjour', 'Hola' );function randomIndex( ) { return Math.floor( Math.random( ) * hello.length);};window.setInterval( function( ) { var newIndex = randomIndex( ); while( newIndex === currentIndex ) newIndex = randomIndex(); currentIndex = newIndex; document.getElementById("switch").textContent = hello[ currentIndex ]; }, 2300 );Advertisement
Answer
In CSS you need to set up @keyframes for your fade-in animation,. Then you can add a percentage of the duration that you wish to animate the animate-able properties opacity and top position. Make sure your duration matches the setInterval time => 2300 => 2.3s.
@keyframes:
In my example I set up a tween that will start at 0% with opacity 0 and top position in vh lengths, then as the tween reaches 70%, it is shown moving upwards to 5vh, where it will stay at an opacity of 1 until 90%, when its opacity will start to fade out. At 100% it will be opacity of 0, then the loop starts over as it is set to infinte in the css animation, the element will reset to 20vh and the animation repeats itself over again.
*You can play around with the percentages in the @keyframes rule to get the effect you’re look for in terms of fading in and out movement, etc…
let currentIndex = 0;const hello = ['Hello', 'Bonjour', 'Hola'];function randomIndex() { return ~~(Math.random() * hello.length);};window.setInterval(function() { let newIndex = randomIndex(); while (newIndex === currentIndex) newIndex = randomIndex(); currentIndex = newIndex; document.getElementById("switch").textContent = hello[currentIndex];}, 2300);* { margin: 0; padding: 0; box-sizing: border-box;}section { text-align: center;}section h1 { font-size: 100px; font-weight: 420; position: absolute; top: 5vh; left: 50vh; opacity: 0; animation: fade-in 2.3s ease-in-out forwards infinite;}@keyframes fade-in { 0% { opacity: 0; top: 20vh; } 70%, 90% { opacity: 1; top: 5vh; } 100% { opacity: 0; top: 5vh; }}<body> <section> <h1 id="switch">Hello</h1> </section></body>