- HTML
- OpenAi
- CSS
- GSAP
- Angular
- React
- SVG
- Javascript
- Elementor
- Webpack
- Canva
- WebGL
- Three.js
- Anime.js
- WordPress
- GitHub
- Linux
- Next.js
Efecto de etiquetas animadas
🎨 ¿Te imaginas una nube de etiquetas en 3D que responda a tus movimientos? ¡Eso es exactamente lo que hemos creado con CSS Grid y JavaScript! 🌐
🔍 Características Principales:
- 🌟 Animación 3D: Las etiquetas giran y se desplazan creando un efecto tridimensional sorprendente.
- 🖱️ Interacción del Usuario: La nube responde al movimiento del ratón, haciendo la experiencia más interactiva y divertida.
- 🎯 Diseño Moderno: Utilizamos fuentes de Google para mantener un estilo limpio y profesional.
💡 Tecnologías Utilizadas:
- HTML, CSS Grid, y JavaScript
- Métodos y campos privados en JavaScript para una programación más segura y modular.
HTML + JS
- HTML
- Pug
- CSS
- LESS
- PostCSS
- RSCSS
- SVG
- Javascript
- Gulp
- Webpack
- Canvas
- WebGL
- Three.js
- Anime.js
- Barba.js
- Git
- Linux
- Math
CSS
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'IBM Plex Mono', monospace;
}
body {
background: #1b263b;
color: #778da9;
cursor: none;
}
#cursor {
position: fixed;
top: -16px;
left: -16px;
z-index: 1;
height: 32px;
width: 32px;
border-radius: 50%;
background: #e0e1dd;
opacity: 0;
}
#cursor.-activated {
animation: fadeIn 1s ease-out forwards;
}
.tags-cloud {
position: fixed;
top: calc(50% - 30vmin);
left: calc(50% - 30vmin);
height: 60vmin;
width: 60vmin;
list-style: none;
opacity: 0;
}
.tags-cloud.-loaded {
animation: fadeIn 1s ease-out forwards;
}
.tags-cloud > .tag {
position: absolute;
top: 50%;
left: 50%;
font-size: 5vmin;
font-weight: bold;
transition: transform .5s linear, opacity .5s linear;
}
.tags-cloud > .tag > .wrap {
display: inline-block;
transform: translateX(-50%) translateY(-50%);
}
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
129
Black or White
El efecto “Black or White” crea la ilusión de que la página (o la imagen principal) está dividida en dos mitades de color.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
37
Link-Tree personalizado! 🌐
👉 Con nuestro servicio de link-trees personalizados podrás:
✅ Mostrar tus enlaces más importantes en una interfaz visualmente atractiva.
✅ Reflejar tu identidad con colores, tipografías y estilos exclusivos.
✅ Aumentar la interacción y llevar tráfico directo a tus plataformas.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
60
Integraciones 4.0
Domina el flujo de datos entre apps sin código
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
254
Módulo 1: Fundamentos Avanzados de UI
Comprender y aplicar principios de diseño
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
229
Image Accordion Slider with CSS and JS
🚀 Efecto accordion slider 🖼️ que combina imágenes con animaciones suaves y diseño interactivo.💻🔥
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
370
¿Qué es View Transitions?
View Transitions es una API moderna del navegador que permite crear transiciones fluidas entre diferentes vistas o estados de una página web.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
180
Creando partículas controladas por audio en Three.js
👉 Con tecnología de Three.js y Web Audio API, ahora el sonido no solo se escucha,
¡se ve en tiempo real! 💻🎶
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
204
Looping words with GSAP
CodePen
Looping words with GSAP
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
373
WordPress con React y Gutenberg
Crear una landing page con React y Gutenberg en WordPress es una combinación poderosa para lograr una experiencia de usuario moderna y un control total sobre el desarrollo.
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
1.326
Fundamentos avanzados de UI
Temario completo del Curso UI
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp
1.060
Customiza tus widgets de Elementor de manera fácil
📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉