{"id":18155215,"url":"https://github.com/femcodersclub/canvastextanimation","last_synced_at":"2026-04-26T12:32:07.516Z","repository":{"id":260705935,"uuid":"882079997","full_name":"femcodersclub/CanvasTextAnimation","owner":"femcodersclub","description":"CanvasTextAnimation","archived":false,"fork":false,"pushed_at":"2024-11-01T23:55:51.000Z","size":49787,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-13T06:46:34.265Z","etag":null,"topics":["canvas","css","html","javascript"],"latest_commit_sha":null,"homepage":"https://femcodersclub.github.io/CanvasTextAnimation/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/femcodersclub.png","metadata":{"files":{"readme":"Readme.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-01T20:55:07.000Z","updated_at":"2024-11-02T00:17:16.000Z","dependencies_parsed_at":"2024-11-02T00:25:22.489Z","dependency_job_id":"373959f1-4ed3-4898-a64c-277b31202c0e","html_url":"https://github.com/femcodersclub/CanvasTextAnimation","commit_stats":null,"previous_names":["femcodersclub/canvastextanimation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/femcodersclub%2FCanvasTextAnimation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/femcodersclub%2FCanvasTextAnimation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/femcodersclub%2FCanvasTextAnimation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/femcodersclub%2FCanvasTextAnimation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/femcodersclub","download_url":"https://codeload.github.com/femcodersclub/CanvasTextAnimation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247574597,"owners_count":20960613,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["canvas","css","html","javascript"],"created_at":"2024-11-02T04:07:57.423Z","updated_at":"2026-04-26T12:32:07.487Z","avatar_url":"https://github.com/femcodersclub.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# CanvasTextAnimation\n\n![CanvasTextAnimation Demo](assets/canvasAnimate.gif)\n\nEste repositorio contiene un ejemplo práctico del artículo de femCoders Club: [\"Introducción a las APIs en HTML: Potencia tus Proyectos Web\"](https://www.femcodersclub.com/recursos/html/apis-html). En este ejemplo, utilizamos el elemento `\u003ccanvas\u003e` en HTML junto con animaciones para mostrar cómo se pueden manipular gráficos y texto en pantalla sin necesidad de librerías externas.\n\n## Descripción\n\nEl proyecto **CanvasTextAnimation** demuestra cómo crear una animación de texto dinámico en HTML5 Canvas, simulando un efecto en el que las letras se desplazan y se alinean para formar la frase \"femCoders Club\". Este efecto utiliza JavaScript para gestionar el movimiento de cada letra, empleando rotaciones y desplazamientos hacia su posición final, así como efectos de opacidad y color para mejorar la experiencia visual.\n\n## Tecnologías utilizadas\n\n- **HTML5**: Estructura básica de la página y del elemento `\u003ccanvas\u003e`.\n- **CSS3**: Estilos para el fondo de la página y sombra del canvas.\n- **JavaScript**: Animación y control de cada letra en el `\u003ccanvas\u003e`, incluyendo posiciones, velocidades y efectos visuales.\n\n## Estructura de Archivos\n\n- `index.html`: Contiene el lienzo `\u003ccanvas\u003e` y la estructura de la página.\n- `styles.css`: Define el estilo de fondo y sombras para el lienzo.\n- `script.js`: Maneja toda la lógica de animación y posicionamiento de las letras en el canvas.\n\n## Explicación del Código\n\n1. **Inicialización**: Definimos el elemento `\u003ccanvas\u003e` en HTML y lo estilizamos en CSS con un fondo degradado animado y sombras para un efecto 3D.\n\n2. **Animación de letras**:\n   - Cada letra de \"femCoders Club\" es un objeto con propiedades individuales de posición, ángulo y color.\n   - En `script.js`, creamos una clase `Letter` para controlar cada letra. La clase incluye métodos para dibujar (`draw()`) y actualizar (`update()`) la posición y el color de cada letra.\n   - Usamos JavaScript para calcular la posición inicial de cada letra en un movimiento de rotación, luego las ralentizamos hasta alcanzar su posición final con un ligero rebote.\n\n3. **Efectos Visuales**:\n   - Efectos de opacidad: Las letras aparecen gradualmente mientras se posicionan.\n   - Cambio de color: Los colores se asignan de forma dinámica y rotativa.\n   - Sombra: Las sombras en cada letra se aplican para mejorar el contraste en el fondo.\n\n## Instalación\n\n1. Clona este repositorio:\n   ```bash\n   git clone https://github.com/femcodersclub/CanvasTextAnimation.git\n   ```\n\n2. Abre el archivo index.html en tu navegador para ver la animación en acción.\nVista Previa\nAquí se muestra un GIF de cómo se ve la animación:\n\n## Contribución\n\nLas contribuciones y sugerencias son bienvenidas. No dudes en abrir un \"Issue\" o \"Pull Request\" para mejorar este ejemplo.\n\n¡Esperamos que este ejemplo sea útil para entender cómo manipular gráficos y texto en canvas de HTML5! 🎨✨\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemcodersclub%2Fcanvastextanimation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffemcodersclub%2Fcanvastextanimation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffemcodersclub%2Fcanvastextanimation/lists"}