- الفكرة الأولى أريد استخدام كود لوضع صورة اللوغو لدي بطريقة ال particles . حيث عند مرور المؤشر من خلاله يتناثر وعند ابتعاده يعود اللوغو لوضعه الأصلي تدريجياً. ثم توظيف الكود بالموقع لدي .. هل يوجد كود جاهز ؟
- الفكرة الثانية هل يوجد طريقة في ال parallax لتدريج الألوان لدي في الموقع ؟
علي ملص
بالتأكيد ، يوجد هذا الموقع [سجل الدخول لترى الرابط] .. وبحثت عن الأمر وهو ال particles الجزيئات .. وتمكنت من تصميمها بما يناسب موقعي ، لكنني لم أتمكن من إضافتها كما فعل الموقع ، لذا كيف أتمكن من إضافتها كما فعل ؟ مع العلم أنني جريبت إضافتها من خلال إضافة code snippet لكن لم يفلح الأمر معي . لذا هل هناك طريقة فعالة لإضافتها ؟
علي ملص
بالتأكيد !
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Logo Particle Effect</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #000; overflow: hidden; }
canvas { display: block; } </style></head><body> <canvas id="canvas"></canvas>
<script> // Particle Class class Particle { constructor(x, y, size, baseX, baseY, ctx, color) { this.x = x; // Current X position this.y = y; // Current Y position this.size = size; // Size of the particle this.baseX = baseX; // Original X position this.baseY = baseY; // Original Y position this.ctx = ctx; // Canvas context this.color = color; // Color of the particle this.density = Math.random() * 30 + 2; // Random density for movement }
draw() { this.ctx.fillStyle = this.color; this.ctx.beginPath(); this.ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2); this.ctx.closePath(); this.ctx.fill(); }
update(mouse) { let dx = mouse.x - this.x; let dy = mouse.y - this.y; let distance = Math.sqrt(dx * dx + dy * dy);
if (distance < mouse.radius) { // Move particles away from the mouse let forceDirectionX = dx / distance; let forceDirectionY = dy / distance; let maxDistance = mouse.radius; let force = (maxDistance - distance) / maxDistance; let directionX = forceDirectionX * force * this.density; let directionY = forceDirectionY * force * this.density;
this.x -= directionX; this.y -= directionY; } else { // Return particles to their original positions if (this.x !== this.baseX) { this.x += (this.baseX - this.x) * 0.05; } if (this.y !== this.baseY) { this.y += (this.baseY - this.y) * 0.05; } } } }
// Main App Class class App { constructor(canvas, imageSrc) { this.canvas = canvas; this.ctx = canvas.getContext('2d'); this.image = new Image(); this.image.src = imageSrc; this.particles = []; this.mouse = { x: null, y: null, radius: 150 }; this.init(); this.animate(); this.addEventListeners(); }
init() { this.canvas.width = window.innerWidth; this.canvas.height = window.innerHeight;
this.image.onload = () => { console.log('Image loaded successfully');
// Define the square size for the logo const logoSize = 400; // Fixed square size
// Calculate the aspect ratio of the image const imageAspectRatio = this.image.width / this.image.height;
// Determine the cropping dimensions to make the image square let sourceX = 0, sourceY = 0, sourceWidth = this.image.width, sourceHeight = this.image.height;
if (imageAspectRatio > 1) { // Image is wider than tall sourceWidth = this.image.height; sourceX = (this.image.width - sourceWidth) / 2; } else { // Image is taller than wide sourceHeight = this.image.width; sourceY = (this.image.height - sourceHeight) / 2; }
// Draw the cropped and centered image on the canvas const logoX = this.canvas.width / 2 - logoSize / 2; const logoY = this.canvas.height / 2 - logoSize / 2;
this.ctx.drawImage( this.image, sourceX, // Source X position sourceY, // Source Y position sourceWidth, // Source width sourceHeight, // Source height logoX, // Destination X position logoY, // Destination Y position logoSize, // Destination width logoSize // Destination height );
// Get image data for particles const imageData = this.ctx.getImageData(logoX, logoY, logoSize, logoSize).data;
const cols = 200; // Number of columns const rows = 200; // Number of rows
const particleWidth = logoSize / cols; const particleHeight = logoSize / rows;
for (let y = 0; y < rows; y++) { for (let x = 0; x < cols; x++) { const posX = x * particleWidth + logoX; const posY = y * particleHeight + logoY; const size = Math.random() * 0.5 + 0.5; // Smaller particle size
// Get pixel color const pixelIndex = (y * particleHeight * logoSize + x * particleWidth) * 4; const r = imageData[pixelIndex]; const g = imageData[pixelIndex + 1]; const b = imageData[pixelIndex + 2]; const a = imageData[pixelIndex + 3];
// Skip transparent pixels if (a > 0) { const color = `rgba(${r}, ${g}, ${b}, ${a / 255})`; this.particles.push(new Particle(posX, posY, size, posX, posY, this.ctx, color)); } } } };
this.image.onerror = () => { console.error('Error loading image:', this.image.src); }; }
animate() { this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this.particles.forEach((particle) => { particle.update(this.mouse); particle.draw(); });
requestAnimationFrame(() => this.animate()); }
addEventListeners() { window.addEventListener('mousemove', (event) => { this.mouse.x = event.clientX; this.mouse.y = event.clientY; });
window.addEventListener('mouseleave', () => { this.mouse.x = null; this.mouse.y = null; }); } }
// Initialize the app const canvas = document.getElementById('canvas'); const imageSrc = 'logo3.png'; // Replace with your logo image path or URL new App(canvas, imageSrc); </script></body></html>
(للتنويه: مكان logo3.png) جرب وضع صورة لديك
بدون مكتبات فقط html \ css \ js
عند إضافة أي صورة لديك أسفل الكود بدلاً من logo3.png سيعمل لديك
هنا تحديداً
كل الشكر لحضرتك
وأنا بالانتظار
أنتظر الرد للموضوع
وشكراً لجهودكم
للأسف الكود لم يعمل لدي، لكنني عدلته ليصبح متوافقًا مع ووردبريس. أضف الكود التالي في موقع الووردبريس، وتأكد من تعديل هذا السطر تسجيل الدخول لعرض الكود ليتضمن محدد الصورة التي تريد تطبيق التأثير عليها.
تسجيل الدخول لعرض الكودعلي ملص
تسجيل الدخول لعرض الكود
أين أضيف هذا السطر تحديداً ؟
وأين أضيف الكود الكامل لكي يعمل في الصفحة الرئيسية ؟
وأشكر ردك
