¿Alguien podría ayudarme agregando un simple botón de reproducción/pausa a mi animación de desplazamiento de texto? Necesito que el botón funcione como ícono solo usando <i class="fa-regular fa-circle-play"></i> y <i class="fa-regular fa-circle-pause"></i> pero muestra solo un icono a la vez según el estado de la animación.
Estoy usando el código js para voltear desde @guradio
// for selecting the input field on clicking over the flip text function selectText() { const input = document.getElementById('searchInput'); input.focus(); input.select(); } // for flipping the text $('#searchInput').keyup(function() { if ($(this).val().length == 0) { $('#text-flip').show(); } else { $('#text-flip').hide(); } }).keyup(); #text-flip { height:20px; overflow:hidden; margin-top: -20px; } #text-flip > div > div { color: rgb(43, 43, 43); padding-left: 60px; height:45px; margin-bottom:45px; display:inline-block; font-size: inherit } #text-flip div:first-child { animation: show 10s linear infinite; } @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} } <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#" method="get"> <input id="searchInput" placeholder="Search: "/> <div id="text-flip" onclick="selectText()"> <div><div>Third Text</div></div> <div><div>Second Text</div></div> <div><div>First Text</div></div> </div> </form>Actualicé tu código.
let isPlayed=true; // for flipping the text $('#searchInput').keyup(function() { if ($(this).val().length == 0) { $('#text-flip').show(); } else { $('#text-flip').hide(); } }).keyup(); function btnClicked() { if(isPlayed) $(".controlBtn").html("<i class='fa-solid fa-circle-play' onclick='btnClicked()'></i>"); else $(".controlBtn").html("<i class='fa-solid fa-circle-pause' onclick='btnClicked()'></i>"); $("#text-flip div:first-child").toggleClass("flip-animation"); isPlayed = !isPlayed; } function selectText() { const input = document.getElementById('searchInput'); input.focus(); input.select(); } #text-flip { height:20px; overflow:hidden; margin-top: -20px; } #text-flip > div > div { color: rgb(43, 43, 43); padding-left: 60px; height:45px; margin-bottom:45px; display:inline-block; font-size: inherit } #text-flip div:first-child { animation: show 10s linear infinite; } @keyframes show { 0% {margin-top:-270px;} 5% {margin-top:-180px;} 33% {margin-top:-180px;} 38% {margin-top:-90px;} 66% {margin-top:-90px;} 71% {margin-top:0px;} 99.99% {margin-top:0px;} 100% {margin-top:-270px;} } .controlBtn { margin-top: 10px; } #text-flip div.flip-animation:first-child { animation-play-state: paused !important; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <form action="#" method="get"> <input id="searchInput" placeholder="Search: "/> <div id="text-flip" class="flip-animation" onclick="selectText()"> <div><div>Third Text</div></div> <div><div>Second Text</div></div> <div><div>First Text</div></div> </div> </form> <div class="controlBtn"><i class="fa-solid fa-circle-pause" onclick="btnClicked()"></i></div>