إضافة تأثير الفقاعات الملونة عند النقر بالماوس

أضف لمسة إبداعية وحيوية إلى موقعك الإلكتروني مع إضافة تأثير الفقاعات الملونة عند النقر بالماوس. صُممت هذه الإضافة لتوفير تجربة تفاعلية جذابة، حيث تظهر فقاعات ملونة تنطلق حول مؤشر الماوس بمجرد قيام الزائر بالنقر في أي مكان داخل الصفحة. يضيف هذا التأثير لمسة بصرية ممتعة تجعل الموقع أكثر حيوية دون التأثير على سرعة التصفح أو أداء الموقع.

تتميز الإضافة بخفة حجمها وسهولة دمجها مع مختلف أنواع المواقع، سواء كانت مواقع شخصية، مدونات، متاجر إلكترونية، صفحات هبوط، أو مواقع الشركات. كما أنها تعمل بسلاسة مع معظم القوالب والمتصفحات الحديثة، مما يضمن تجربة مستخدم متوافقة على أجهزة الكمبيوتر والهواتف الذكية.

توفر الإضافة خيارات تخصيص متعددة، مثل تغيير ألوان الفقاعات، التحكم في عددها، تعديل حجمها، سرعة حركتها، ومدة اختفائها، مما يمنحك الحرية الكاملة لتصميم تأثير يتناسب مع هوية موقعك. ولا تحتاج إلى أي خبرة برمجية، حيث يمكن تفعيلها وإعدادها بسهولة خلال دقائق.

يُعد استخدام التأثيرات البصرية التفاعلية وسيلة فعالة لجذب انتباه الزوار وتحسين تجربة المستخدم، وهو ما قد يساهم في زيادة مدة بقاء الزائر داخل الموقع وتعزيز التفاعل مع المحتوى. لذلك تعتبر هذه الإضافة خيارًا مثاليًا لمن يرغب في إضافة لمسة احترافية وعصرية إلى موقعه.

إذا كنت تبحث عن إضافة بسيطة، سريعة، وقابلة للتخصيص لإنشاء تأثير فقاعات ملونة حول مؤشر الماوس عند النقر، فإن هذه الإضافة توفر كل ما تحتاج إليه. استمتع بتجربة استخدام مميزة، وأضف تأثيرًا بصريًا أنيقًا يجعل موقعك أكثر جاذبية وتفاعلاً مع الحفاظ على الأداء والاستقرار.

شرح التركيب

الأكواد الخاصة بأضفة تأثير الفقاعات الملونة حول الماوس

1. نذهب الى المظهر
2. نختارتعديل HTML
3. نبحث بداخل اكواد القالب عن </head> و نضيف الكود التالي اعلاه

<style>

.click-particle{position:fixed;pointer-events:none;width:14px;height:14px;border-radius:50%;z-index:9999;animation:particle-explosion 1.1s ease-out forwards;box-shadow:0 0 6px rgba(255,255,255,0.8)}

.dark .click-particle{box-shadow:0 0 8px rgba(255,255,255,0.4)}

@keyframes particle-explosion{0%{opacity:1;transform:scale(0.4) translate(0,0)}15%{opacity:1;transform:scale(1.3) translate(var(--dx),var(--dy))}60%{opacity:0.8;transform:scale(1) translate(calc(var(--dx) * 2.5),calc(var(--dy) * 2.5))}100%{opacity:0;transform:scale(0.3) translate(calc(var(--dx) * 3.5),calc(var(--dy) * 3.5))}}

.click-particle.color-1{background:#ffc1cc;background:radial-gradient(circle,#ffb3ba 0%,#ffc1cc 100%)}

.click-particle.color-2{background:#bde4ff;background:radial-gradient(circle,#a8d8ff 0%,#bde4ff 100%)}

.click-particle.color-3{background:#fff2a8;background:radial-gradient(circle,#ffe66d 0%,#fff2a8 100%)}

.click-particle.color-4{background:#e6ccff;background:radial-gradient(circle,#d4a5ff 0%,#e6ccff 100%)}

.click-particle.color-5{background:#c1ffc1;background:radial-gradient(circle,#a8e6a8 0%,#c1ffc1 100%)}

.click-particle.color-6{background:#ffd4a3;background:radial-gradient(circle,#ffcc99 0%,#ffd4a3 100%)}

.click-particle.color-7{background:#c4e8ff;background:radial-gradient(circle,#b3deff 0%,#c4e8ff 100%)}

.click-particle.color-8{background:#f8d7da;background:radial-gradient(circle,#f5c2c7 0%,#f8d7da 100%)}

.click-particle.color-9{background:#d1f2d1;background:radial-gradient(circle,#c3e6c3 0%,#d1f2d1 100%)}

.click-particle.color-10{background:#fff0d4;background:radial-gradient(circle,#ffe8b3 0%,#fff0d4 100%)}

.dark .click-particle.color-1{background:#ff6b8a;background:radial-gradient(circle,#ff4757 0%,#ff6b8a 100%)}

.dark .click-particle.color-2{background:#4fc3f7;background:radial-gradient(circle,#29b6f6 0%,#4fc3f7 100%)}

.dark .click-particle.color-3{background:#ffd54f;background:radial-gradient(circle,#ffca28 0%,#ffd54f 100%)}

.dark .click-particle.color-4{background:#ba68c8;background:radial-gradient(circle,#ab47bc 0%,#ba68c8 100%)}

.dark .click-particle.color-5{background:#81c784;background:radial-gradient(circle,#66bb6a 0%,#81c784 100%)}

.dark .click-particle.color-6{background:#ffb74d;background:radial-gradient(circle,#ffa726 0%,#ffb74d 100%)}

.dark .click-particle.color-7{background:#64b5f6;background:radial-gradient(circle,#42a5f5 0%,#64b5f6 100%)}

.dark .click-particle.color-8{background:#f48fb1;background:radial-gradient(circle,#f06292 0%,#f48fb1 100%)}

.dark .click-particle.color-9{background:#a5d6a7;background:radial-gradient(circle,#81c784 0%,#a5d6a7 100%)}

.dark .click-particle.color-10{background:#ffe082;background:radial-gradient(circle,#ffd54f 0%,#ffe082 100%)}

</style>

• نبحث عن </body> و نضيف كود الجافا سكربت أعلاه

<script>//<![CDATA[

document.addEventListener('DOMContentLoaded', () => {

  function createParticle(

    x,

    y,

    angle,

    distance,

    colorIndex

  ) {

    const particle = document.createElement('div')

    particle.className = `click-particle color-${colorIndex}`

    const dx = Math.cos(angle) * distance

    const dy = Math.sin(angle) * distance

    

    particle.style.setProperty('--dx', dx + 'px')

    particle.style.setProperty('--dy', dy + 'px')

    

    particle.style.left = x + 'px'

    particle.style.top = y + 'px'

    

    const size = Math.random() * 6 + 8

    particle.style.width = size + 'px'

    particle.style.height = size + 'px'

    

    document.body.appendChild(particle)

    

    setTimeout(() => {

      if (particle.parentNode) {

        particle.parentNode.removeChild(particle)

      }

    }, 1100)

  }

  document.addEventListener('click', (e) => {

    const particleCount = 10

    const baseDistance = 18

    for (let i = 0; i < particleCount; i++) {

      const angle = ((Math.PI * 2) / particleCount) * i

      const distance = baseDistance + Math.random() * 8

      const colorIndex = (i % 10) + 1

      setTimeout(() => {

        createParticle(e.clientX, e.clientY, angle, distance, colorIndex)

      }, i * 12)

    }

    

    for (let i = 0; i < 4; i++) {

      const randomAngle = Math.random() * Math.PI * 2

      const randomDistance = baseDistance + Math.random() * 10

      const colorIndex = Math.floor(Math.random() * 10) + 1

      setTimeout(

        () => {

          createParticle(e.clientX, e.clientY, randomAngle, randomDistance, colorIndex)

        },

        (particleCount + i) * 12

      )

    }

  })

})

//]]></script>

ثم تقوم بالحفظ و شاهد النتيجة

وفي الختام !

شكرًا لوقتكم واهتمامكم بقراءة موضوع أضافة تأثير الفقاعات الملونة عند النقر بالماوس في قالب بلوجر . إذا صادفتكم أي مشكلة أثناء استخدام الكود أو كان لديكم أي استفسار، فلا تترددوا في طرحه ضمن التعليقات أو التواصل معنا عبر صفحة الاتصال بنا . ولا تنسوا الانضمام إلى متابعي مدونة هلا تك ليصلكم كل ما هو جديد.

اضافات بلوجر