gb91 Posted January 5, 2022 Share Posted January 5, 2022 Site URL: https://gabriel-vargas.com/ Hi, I would like to create a loop on my text animation "Hi👋, I'm Gabriel!" , that repeats itself infinitely. I attached the photo of the page where you can find the text animation. Thanks! Link to comment
tuanphan Posted January 7, 2022 Share Posted January 7, 2022 You mean this effect? https://codepen.io/marudhupandiyang/pen/jLEdLR gb91 1 Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
tuanphan Posted January 8, 2022 Share Posted January 8, 2022 Add a Code Block on top of "UI/UX Designer..." text >> paste this code <span class="title-holder"> <span class="title"> Hi, I'm Gabriel! </span> </span> <style> .title-holder { top: 50%; left: 40%; position: absolute; } .title { font-family: 'Lato', sans-serif; font-size: 30px; color: #f9d566; width: 0; overflow: hidden; white-space: no-wrap; display:block; border-right: 3px solid #f9d566; animation: typewriter 5s steps(7) infinite, blinking-cursor 0.8s infinite; animation-fill-mode: forwards } @keyframes typewriter { 0% { width:0 } 25% { width: 70% } 48% { width: 100% } 50% { width: 100% } 55% { width: 100% } 75% { width: 70%; } 85% { width: 30%; } 100% { width: 0; } } @keyframes blinking-cursor { from { border-color: transparent } to { border-color: #f9d566 } } </style> Also, It looks like you used special character after text "Hi"? It doesnt show on my laptop (Dell/Chrome) Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment