Hiệu Ứng Quả Cầu Từ Khóa Đám Mây

“Hiệu ứng Quả Cầu Từ Khóa” là hiển thị các từ khóa trên lưới quả cầu 3D xoay tròn. Các từ khóa hiển thị dựa vào thông tin mảng từ khóa: từ khóa, liên kết, màu sắc. Hiệu ứng chuyển động xoay liên tục.

Độ trong suốt và kích thước của các từ khóa thay đổi tùy theo vị trí. Người dùng có thể điều khiển quả cầu bằng cách kéo thả hoặc để nó tự động xoay. Hiệu ứng phù hợp tạo đám mây từ khóa, văn bản tương tác cho các module, plugin cần tích hợp tính năng này.

HTML

CSS

JavaScript

const canvas = document.getElementById('canvas');

const texts = [
  { text: 'POD', color: '#E34C26', link: 'https://wikipoly.com/?s=POD' },
  { text: 'PolyXGO', color: '#FC0000', link: 'https://wikipoly.com/?s=PolyXGO' },
  { text: 'HTML', color: '#F7DF1E', link: 'https://wikipoly.com/?s=HTML' },
  { text: 'CSS', color: '#1572B6', link: 'https://wikipoly.com/?s=CSS' },
  { text: 'JS', color: '#F0DB4F', link: 'https://wikipoly.com/?s=JS' },
  { text: 'Python', color: '#3776AB', link: 'https://wikipoly.com/?s=Python' },
  { text: 'tshirt', color: '#00BFFF', link: 'https://wikipoly.com/?s=tshirt' },
  { text: 'mockup', color: '#A9A9A9', link: 'https://wikipoly.com/?s=mockup' },
  { text: 'auto mockup', color: '#FF4500', link: 'https://wikipoly.com/?s=auto%20mockup' },
  { text: 'phần mềm', color: '#6A5ACD', link: 'https://wikipoly.com/?s=phần%20mềm' },
  { text: 'perfex crm', color: '#32CD32', link: 'https://wikipoly.com/?s=perfex%20crm' },
  { text: 'API', color: '#FF6347', link: 'https://wikipoly.com/?s=API' },
  { text: 'website', color: '#4682B4', link: 'https://wikipoly.com/?s=website' },
  { text: 'WordPress', color: '#21759B', link: 'https://wikipoly.com/?s=WordPress' },
  { text: 'plugin', color: '#8A2BE2', link: 'https://wikipoly.com/?s=plugin' },
  { text: 'module', color: '#FFD700', link: 'https://wikipoly.com/?s=module' },
  { text: 'code', color: '#00FF7F', link: 'https://wikipoly.com/?s=code' },
  { text: 'theme', color: '#FF8C00', link: 'https://wikipoly.com/?s=theme' },
  { text: 'download', color: '#1E90FF', link: 'https://wikipoly.com/?s=download' },
  { text: 'PolyDev', color: '#FF1493', link: 'https://wikipoly.com/?s=PolyDev' }
];

const counts = [1, 2, 4, 5, 4, 2, 1];
let bgKeywordsOpacity = 0.1;
let padding = 8;
let autoRotateRZ = 0.002;
let autoRotateRX = 0.001;

const options = {
  tilt: Math.PI / 9,
  initialVelocityX: 0.09,
  initialVelocityY: 0.09,
  initialRotationX: Math.PI * 0.14,
  initialRotationZ: 0,
  width: 500,
  height: 500,
  radius: 150,
  fontSize: 22,
};

wordSphere(canvas, texts, counts, options);

function wordSphere(canvas, texts, counts, options) {
  const π = Math.PI;
  const { width, height, radius, fontSize, tilt, initialVelocityX, initialVelocityY, initialRotationX, initialRotationZ } = options;

let vx = initialVelocityX, vy = initialVelocityY;
  let rx = initialRotationX, rz = initialRotationZ;

let ctx = canvas.getContext('2d');
  ctx.textAlign = 'left'; // Use left alignment for accurate position calculations

canvas.width = width * 2;
  canvas.height = height * 2;
  canvas.style.width = `${width}px`;
  canvas.style.height = `${height}px`;
  ctx.scale(2, 2); // Adjust canvas scale for Hi-DPI displays

let clicked = false, lastX, lastY, isDragging = false;
  let textPositions = [];

function autoRotate() {
    rz += autoRotateRZ;
    rx += autoRotateRX;
    render();
  }

canvas.addEventListener('mousedown', event => {
    clicked = true;
    isDragging = false;
    lastX = event.screenX;
    lastY = event.screenY;
  });

canvas.addEventListener('mousemove', event => {
    if (!clicked) {
      const mouseX = event.offsetX;
      const mouseY = event.offsetY;
      let hovering = false;

// Check if mouse is hovering over any text
      for (const { x, y, width, height } of textPositions) {
        if (mouseX >= x && mouseX <= x + width && mouseY >= y && mouseY <= y + height) {
          canvas.style.cursor = 'pointer'; // Change cursor to pointer if hovering over text
          hovering = true;
          break;
        }
      }
      if (!hovering) {
        canvas.style.cursor = 'default'; // Revert cursor to default if not hovering over any text
      }
      return;
    }

isDragging = true; // Mark dragging state
    const dx = event.screenX - lastX;
    const dy = event.screenY - lastY;
    lastX = event.screenX;
    lastY = event.screenY;

// Update rotation based on mouse movement
    rz -= dy * 0.01;
    rx += dx * 0.01;

vx = dx * 0.1;
    vy = dy * 0.1;

if (!looping) startLoop();
  });

canvas.addEventListener('mouseup', () => {
    clicked = false;
    setTimeout(() => isDragging = false, 50); // Reset dragging flag after mouse release
  });

canvas.addEventListener('mouseleave', () => {
    clicked = false;
    isDragging = false;
  });

canvas.addEventListener('click', function (event) {
    if (isDragging) return; // Ignore click event if just finished dragging
    const clickX = event.offsetX;
    const clickY = event.offsetY;

// Check if click is on any keyword
    for (const { x, y, width, height, link } of textPositions) {
      if (clickX >= x && clickX <= x + width && clickY >= y && clickY <= y + height) {
        window.open(link, '_blank');
        break;
      }
    }
  });

// Rotate coordinates by a given angle
  function rot(x, y, t) {
    return [x * Math.cos(t) - y * Math.sin(t), x * Math.sin(t) + y * Math.cos(t)];
  }

function render() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

let ix = 0, iz = 0;
    textPositions = [];

for (const { text, color, link } of texts) {
      const degZ = (π / (counts.length - 1)) * iz; // Calculate Z rotation based on layer index
      const degX = (2 * π / counts[iz]) * ix; // Calculate X rotation based on text index in layer

// Calculate sphere coordinates
      let x = radius * Math.sin(degZ) * Math.cos(degX);
      let y = radius * Math.sin(degZ) * Math.sin(degX);
      let z = radius * Math.cos(degZ) + 8 * (ix % 2); // Apply randomization in Z position

[y, z] = rot(y, z, tilt);
      [x, z] = rot(x, z, rz);
      [x, y] = rot(x, y, rx);

// Calculate transparency and font size based on X position
      const alpha = 0.6 + 0.4 * (x / radius);
      const size = fontSize + 2 + 5 * (x / radius);
      ctx.font = `${size}px "Helvetica Neue", sans-serif`;

const textMetrics = ctx.measureText(text);
      const textWidth = textMetrics.width;
      const textHeight = size;

const textX = y + width / 2 - textWidth / 2;
      const textY = -z + height / 2 - textHeight / 2;
      const bgX = textX - padding;
      const bgY = textY - padding;

// Draw background with padding
      ctx.fillStyle = `rgba(255, 255, 255, ${bgKeywordsOpacity})`;
      ctx.fillRect(bgX, bgY, textWidth + 2 * padding, textHeight + 2 * padding);

// Draw the text itself
      ctx.fillStyle = color || `rgba(0, 0, 0, ${alpha})`;
      ctx.fillText(text, textX, textY + textHeight);

// Store position data for click detection
      textPositions.push({
        text,
        x: bgX,
        y: bgY,
        width: textWidth + 2 * padding,
        height: textHeight + 2 * padding,
        link,
      });

ix--;
      if (ix < 0) {
        iz++;
        ix = counts[iz] - 1;
      }
    }
  }

let looping = false;
  function rendererLoop() {
    if (looping) window.requestAnimationFrame(rendererLoop);
    render();

if (vx > 0) vx -= 0.01;
    if (vy > 0) vy -= 0.01;
    if (vx < 0) vx += 0.01;
    if (vy < 0) vy += 0.01;
    if (Math.abs(vx) < 0.01) vx = 0;
    if (Math.abs(vy) < 0.01) vy = 0;

rz += vy * 0.01;
    rx += vx * 0.01;
  }

function startLoop() {
    looping = true;
    window.requestAnimationFrame(rendererLoop);
  }

function stopLoop() {
    looping = false;
  }

setInterval(autoRotate, 16);
  startLoop();
}

Preview: Hiệu Ứng Quả Cầu Từ Khóa Đám Mây

<body>

@polyxgo

PolyXGO

HTML

CSS

JavaScript

Preview: Hiệu Ứng Quả Cầu Từ Khóa Đám Mây

Về WikiPoly

Liên hệ

HTML

CSS

JavaScript

Preview: Hiệu Ứng Quả Cầu Từ Khóa Đám Mây

Đăng nhập