En este artículo, aprenderemos cómo crear una animación de escalonamiento de texto usando el complemento TypographyMotion . Este complemento está completamente basado en HTML, CSS y JavaScript. Esta es una de las múltiples técnicas de animación que fomenta la demora incremental de un estado a otro, lo que brinda buenas aplicaciones visuales interactivas.
Nota: descargue el complemento TypographyMotion en la carpeta de trabajo e incluya los archivos necesarios en la sección principal de su código HTML.
<enlace href=”https://use.typekit.net/lwc3axy.css” rel=”hoja de estilo”
type=”text/css”/>
<enlace href=”base.98fd6c19.css” rel=”hoja de estilo” tipo =”text/css”/>
<enlace href=”js.00a46daa.css” rel=”hoja de estilo” type=”text/css”/>
<script src=”https://ajax.googleapis.com/ajax/ libs/webfont/1.6.26/webfont.js”></script>
Ejemplo: El siguiente ejemplo muestra el complemento TypographyMotion que ayuda a los desarrolladores a crear animaciones de texto escalonadas. Se utilizan diferentes elementos HTML como sección , figura , círculo , SVG para desarrollar la estructura de la página web. Se utilizan diferentes clases del archivo CSS del complemento para efectos visuales de contenido, marco, párrafo y cursor, como se muestra en el código a continuación. Después de mover el cursor en los marcos de «span» Acerca de y Cerrar , el usuario puede ver la animación de texto escalonado del párrafo HTML. Consulte la salida para una mejor comprensión.
<!DOCTYPE html> <html lang="en" class="no-js"> <head> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="description" content="Letter stagger animation" /> <link rel="stylesheet" href="https://use.typekit.net/lwc3axy.css" /> <link rel="stylesheet" type="text/css" href="base.98fd6c19.css" /> <script src= "https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"> </script> <link rel="stylesheet" href="js.00a46daa.css" /> </head> <body class="loading"> <main> <div class="frame"> <a class="frame__home"> <span class="frame__home-title"> Home </span> </a> <div class="frame__title-wrap"> <h1 class="frame__title"> Staggered text Motion Effect </h1> </div> <a class="frame__about"> <span class= "frame__about-item frame__about-item--current"> About</span> <span class="frame__about-item"> Close </span> </a> </div> <div class="content"> <section class= "content__item content__item--home content__item--current"> <p class="content__paragraph content__paragraph--large content__paragraph--first" data-splitting=""> HTML is a markup language </p> <p class= "content__paragraph content__paragraph--large content__paragraph--right content__paragraph--last" data-splitting=""> that is used by the browser to manipulate text. </p> </section> <section class="content__item content__item--about"> <p class="content__paragraph" data-splitting=""><b>HTML</b> stands for</p> <p class= "content__paragraph content__paragraph--right" data-splitting=""> Hyper Text Markup Language </p> <p class="content__paragraph" data-splitting=""> It defines link between </p> <p class="content__paragraph" data-splitting=""> Web pages </p> <figure class="content__figure"> <img class="content__figure-img" src="background2.JPG" alt="background2 image" /> <figcaption class="content__figure-caption"> Markup language is used to define the text document within tag which defines the structure of web pages. This language is used to make notes for the computer text so that a machine can understand it and manipulate text accordingly. Most of markup languages are human readable. Language uses tags to define what manipulation has to be done on the text. </figcaption> </figure> </section> </div> </main> <svg class="cursor" width="90" height="90" viewBox="0 0 90 90"> <circle class="cursor__inner" cx="40" cy="40" r="20"> </circle> </svg> <script src="js.00a46daa.js"></script> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA