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

لذا فإن الفكرة هي تغيير العنصر الخاص بنا ليكون نوعًا ما من الأجزاء، وهذه الأجزاء قد تأتي منه إذا كان عنصرًا نصيًا مثل العناوين، فستكون أحرفًا، وإذا كانت صورة فستكون بمثابة عينات من الجسيمات الملونة، الآن يوضح CodePen أدناه المفهوم الأساسي لإنشاء التأثير:

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

const rand = (min, max) => Math.floor(Math.random() * (max - min)   min)

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

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

  const div = document.querySelector("div");
        let parts = [];
        let animations = [];

return Promise.all(animations.map(animation => animation.finished)).then(() => {
                div.remove()
                poof.remove()
            })

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

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

                    --cloud: 
url(https://static.vecteezy.com/system/resources/thumbnails/013/994/726/small/white-3d-cloud-png.png);
                    position: absolute;
                    width: 50px;
                    height: 50px;
                    background: linear-gradient(crimson, crimson) no-repeat center / contain, var(--cloud) no-repeat center / contain;
                    background-blend-mode: multiply;
                    mask: var(--cloud) no-repeat center / contain;
                    top:50%;
                    left: 50%;
                    translate: -50% -50%; 
                    `

كما قلت في أول المقال، أن هناك تأثير poof للصور التي تستخدم وحدات البكسل الخاصة بها لأخذ عينات من الألوان منها ثم استخدام هذه الألوان للجسيمات، لذلك سيكون هذا التأثير poof للصور هو مقالنا القادم

إذا أتيت إلى هنا، فهذا يعني أنك أكملت القراءة، ولديك نوع من الهوس بهذا النوع من الأشياء، لذا أظهر ذلك بإسقاط إعجاب/حب ❤️.

تابعوني للمزيد ?✅
ديف.إلى
تويتر/X
ينكدين