• 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

				
					<div id='cursor'></div>

<ul class='tags-cloud'>
    <li class='tag'><span class='wrap'>HTML</span></li>
    <li class='tag'><span class='wrap'>Pug</span></li>
    <li class='tag'><span class='wrap'>CSS</span></li>
    <li class='tag'><span class='wrap'>LESS</span></li>
    <li class='tag'><span class='wrap'>PostCSS</span></li>
    <li class='tag'><span class='wrap'>RSCSS</span></li>
    <li class='tag'><span class='wrap'>SVG</span></li>
    <li class='tag'><span class='wrap'>Javascript</span></li>
    <li class='tag'><span class='wrap'>Gulp</span></li>
    <li class='tag'><span class='wrap'>Webpack</span></li>
    <li class='tag'><span class='wrap'>Canvas</span></li>
    <li class='tag'><span class='wrap'>WebGL</span></li>
    <li class='tag'><span class='wrap'>Three.js</span></li>
    <li class='tag'><span class='wrap'>Anime.js</span></li>
    <li class='tag'><span class='wrap'>Barba.js</span></li>
    <li class='tag'><span class='wrap'>Git</span></li>
    <li class='tag'><span class='wrap'>Linux</span></li>
    <li class='tag'><span class='wrap'>Math</span></li>
</ul>
<script>
    
    function _classPrivateMethodGet(receiver, privateSet, fn) {if (!privateSet.has(receiver)) {throw new TypeError("attempted to get private field on non-instance");}return fn;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}var _points = new WeakMap();class FibonacciSphere {


  get points() {
    return _classPrivateFieldGet(this, _points);
  }

  constructor(N) {_points.set(this, { writable: true, value: void 0 });
    _classPrivateFieldSet(this, _points, []);

    const goldenAngle = Math.PI * (3 - Math.sqrt(5));

    for (let i = 0; i < N; i++) {
      const y = 1 - i / (N - 1) * 2;
      const radius = Math.sqrt(1 - y ** 2);
      const a = goldenAngle * i;
      const x = Math.cos(a) * radius;
      const z = Math.sin(a) * radius;

      _classPrivateFieldGet(this, _points).push([x, y, z]);
    }
  }}var _root = new WeakMap();var _size = new WeakMap();var _sphere = new WeakMap();var _tags = new WeakMap();var _rotationAxis = new WeakMap();var _rotationAngle = new WeakMap();var _rotationSpeed = new WeakMap();var _frameRequestId = new WeakMap();var _initEventListeners = new WeakSet();var _updatePositions = new WeakSet();var _onMouseMove = new WeakSet();var _update = new WeakSet();



class TagsCloud {









  constructor(root) {_update.add(this);_onMouseMove.add(this);_updatePositions.add(this);_initEventListeners.add(this);_root.set(this, { writable: true, value: void 0 });_size.set(this, { writable: true, value: void 0 });_sphere.set(this, { writable: true, value: void 0 });_tags.set(this, { writable: true, value: void 0 });_rotationAxis.set(this, { writable: true, value: void 0 });_rotationAngle.set(this, { writable: true, value: void 0 });_rotationSpeed.set(this, { writable: true, value: void 0 });_frameRequestId.set(this, { writable: true, value: void 0 });
    _classPrivateFieldSet(this, _root, root);
    _classPrivateFieldSet(this, _size, _classPrivateFieldGet(this, _root).offsetWidth);
    _classPrivateFieldSet(this, _tags, root.querySelectorAll('.tag'));
    _classPrivateFieldSet(this, _sphere, new FibonacciSphere(_classPrivateFieldGet(this, _tags).length));
    _classPrivateFieldSet(this, _rotationAxis, [1, 0, 0]);
    _classPrivateFieldSet(this, _rotationAngle, 0);
    _classPrivateFieldSet(this, _rotationSpeed, 0);

    _classPrivateMethodGet(this, _updatePositions, _updatePositions2).call(this);
    _classPrivateMethodGet(this, _initEventListeners, _initEventListeners2).call(this);
    _classPrivateFieldGet(this, _root).classList.add('-loaded');
  }


















































































  start() {
    _classPrivateMethodGet(this, _update, _update2).call(this);

    _classPrivateFieldSet(this, _frameRequestId, requestAnimationFrame(this.start.bind(this)));
  }

  stop() {
    cancelAnimationFrame(_classPrivateFieldGet(this, _frameRequestId));
  }}var _initEventListeners2 = function _initEventListeners2() {window.addEventListener('resize', _classPrivateMethodGet(this, _updatePositions, _updatePositions2).bind(this));document.addEventListener('mousemove', _classPrivateMethodGet(this, _onMouseMove, _onMouseMove2).bind(this));};var _updatePositions2 = function _updatePositions2() {const sin = Math.sin(_classPrivateFieldGet(this, _rotationAngle));const cos = Math.cos(_classPrivateFieldGet(this, _rotationAngle));const ux = _classPrivateFieldGet(this, _rotationAxis)[0];const uy = _classPrivateFieldGet(this, _rotationAxis)[1];const uz = _classPrivateFieldGet(this, _rotationAxis)[2];const rotationMatrix = [[cos + ux ** 2 * (1 - cos), ux * uy * (1 - cos) - uz * sin, ux * uz * (1 - cos) + uy * sin], [uy * ux * (1 - cos) + uz * sin, cos + uy ** 2 * (1 - cos), uy * uz * (1 - cos) - ux * sin], [uz * ux * (1 - cos) - uy * sin, uz * uy * (1 - cos) + ux * sin, cos + uz ** 2 * (1 - cos)]];const N = _classPrivateFieldGet(this, _tags).length;for (let i = 0; i < N; i++) {const x = _classPrivateFieldGet(this, _sphere).points[i][0];const y = _classPrivateFieldGet(this, _sphere).points[i][1];const z = _classPrivateFieldGet(this, _sphere).points[i][2];const transformedX = rotationMatrix[0][0] * x + rotationMatrix[0][1] * y + rotationMatrix[0][2] * z;const transformedY = rotationMatrix[1][0] * x + rotationMatrix[1][1] * y + rotationMatrix[1][2] * z;const transformedZ = rotationMatrix[2][0] * x + rotationMatrix[2][1] * y + rotationMatrix[2][2] * z;const translateX = _classPrivateFieldGet(this, _size) * transformedX / 2;const translateY = _classPrivateFieldGet(this, _size) * transformedY / 2;const scale = (transformedZ + 2) / 3;const transform = `translateX(${translateX}px) translateY(${translateY}px) scale(${scale})`;const opacity = (transformedZ + 1.5) / 2.5;_classPrivateFieldGet(this, _tags)[i].style.transform = transform;_classPrivateFieldGet(this, _tags)[i].style.opacity = opacity;}};var _onMouseMove2 = function _onMouseMove2(e) {const rootRect = _classPrivateFieldGet(this, _root).getBoundingClientRect();const deltaX = e.clientX - (rootRect.left + _classPrivateFieldGet(this, _root).offsetWidth / 2);const deltaY = e.clientY - (rootRect.top + _classPrivateFieldGet(this, _root).offsetHeight / 2);const a = Math.atan2(deltaX, deltaY) - Math.PI / 2;const axis = [Math.sin(a), Math.cos(a), 0];const delta = Math.sqrt(deltaX ** 2 + deltaY ** 2);const speed = delta / Math.max(window.innerHeight, window.innerWidth) / 10;_classPrivateFieldSet(this, _rotationAxis, axis);_classPrivateFieldSet(this, _rotationSpeed, speed);};var _update2 = function _update2() {_classPrivateFieldSet(this, _rotationAngle, _classPrivateFieldGet(this, _rotationAngle) + _classPrivateFieldGet(this, _rotationSpeed));_classPrivateMethodGet(this, _updatePositions, _updatePositions2).call(this);};



function main() {
  {
    const root = document.querySelector('.tags-cloud');
    const cloud = new TagsCloud(root);

    cloud.start();
  }

  {
    const cursor = document.getElementById('cursor');
    const isActivated = false;

    document.addEventListener('mousemove', e => {
      if (!isActivated) {
        cursor.classList.add('-activated');
      }

      cursor.style.transform =
      `translateX(${e.clientX}px) translateY(${e.clientY}px)`;
    });
  }
}


document.addEventListener('DOMContentLoaded', () => {
  main();
});
    
</script>
				
			

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

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

Progressive Blur Modal

COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

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

Integraciones 4.0

Domina el flujo de datos entre apps sin código
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Módulo 1: Fundamentos Avanzados de UI

Comprender y aplicar principios de diseño
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

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

¿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

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

Looping words with GSAP

CodePen Looping words with GSAP
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

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

Fundamentos avanzados de UI

Temario completo del Curso UI
COMPARTIR EN:
Facebook
LinkedIn
WhatsApp

Customiza tus widgets de Elementor de manera fácil

📢 ¡Nuevos Recursos para Personalizar tus Widgets de Elementor! 🎉