css animation

Shahad Mohammad · 1 يوليو 2022

احاول عمل انميشن بحيث انه عند النقر على الرابط ينتقل السكرول للديف المحدد ويقوم بعمل انميشن لهذا الديف، لا اعلم كيف استخدم الرابط لعمل انميشن على الديف؟ ، لدي معرفة بعمل هذا الشيء مع اكشن hover لنفس الديف لكني لا اريده بهذه الطريقة اريد ان انقر على رابط ، كيف نقوم بعمل ذلك؟

عمر قره محمد · 1 يوليو 2022

بتاريخ 3 ساعات قال Shahad Mohammad:

احاول عمل انميشن بحيث انه عند النقر على الرابط ينتقل السكرول للديف المحدد ويقوم بعمل انميشن لهذا الديف، لا اعلم كيف استخدم الرابط لعمل انميشن على الديف؟ ، لدي معرفة بعمل هذا الشيء مع اكشن hover لنفس الديف لكني لا اريده بهذه الطريقة اريد ان انقر على رابط ، كيف نقوم بعمل ذلك؟

يمكن عمل التحريك الذي تطلبينه باستخدام js، وذلك بإضافة class خاص بالتحريك لل div عند النقر على الرابط :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <!-- لاحظي كيف اضفنا الوظيفة الخاصة بإضافة الكلاس للرابط -->
    <a href="#mySection" onclick="doTheAnimation()">إضغط هنا للإنتقال إلى قسم الخدمات
    </a>

    <!-- اهم شئ هنا هو إضافة الايدي -->
    <div id="mySection" style="height: 400px; margin-top:800px ;background-color: red;">
        <h2 style="font-size: xxx-large; padding:20px ;">قسم الخدمات</h2>
    </div>

    <!-- يمكنك إضافة الجافاسكربت لصفحة مستقلة أو وضعها هنا كما فعلت أنا -->
    <script>
        // الوظيفة الخاصة بإضافة الكلاس
        const doTheAnimation = () => {
            // هنا نقوم بإمساك الديف الخاص بنا
            const mySection = document.getElementById("mySection");
            // وهنا نقوم بإضافةا لكلاس الخاص بالتحريك
            mySection.classList.add("animationClass");
        }
    </script>

    <!-- يفضل إضافة الستايل لملف سي اس اس منفصل -->
    <style>
        /* انشاء التحريك الذي نريده */
        /* هنا قمت بإنشاء تحريك للون كمثال فقط */
        @keyframes example {
            from {
                background-color: red;
            }

            to {
                background-color: yellow;
            }
        }

        /* نضيف التحريك للكلاس الذي عرفناه باستخدام الجافاسكريبت */
        .animationClass {
            animation-name: example;
            animation-duration: 4s;
        }
    </style>
</body>

</html>

حيث نقوم بتنفيذ الوظيفة doTheAnimation عند النقر على الرابط والتي تقوم بإضافة الـ class المسمى animationClass للdiv خاصتنا، وفي النهاية قمنا بإضافة animation لهذا الـ class باستخدام css.

Shahad Mohammad · 2 يوليو 2022

بتاريخ On 7/1/2022 at 09:21 قال عمر قره محمد:

يمكن عمل التحريك الذي تطلبينه باستخدام js، وذلك بإضافة class خاص بالتحريك لل div عند النقر على الرابط :


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>

<body>
    <!-- لاحظي كيف اضفنا الوظيفة الخاصة بإضافة الكلاس للرابط -->
    <a href="#mySection" onclick="doTheAnimation()">إضغط هنا للإنتقال إلى قسم الخدمات
    </a>

    <!-- اهم شئ هنا هو إضافة الايدي -->
    <div id="mySection" style="height: 400px; margin-top:800px ;background-color: red;">
        <h2 style="font-size: xxx-large; padding:20px ;">قسم الخدمات</h2>
    </div>

    <!-- يمكنك إضافة الجافاسكربت لصفحة مستقلة أو وضعها هنا كما فعلت أنا -->
    <script>
        // الوظيفة الخاصة بإضافة الكلاس
        const doTheAnimation = () => {
            // هنا نقوم بإمساك الديف الخاص بنا
            const mySection = document.getElementById("mySection");
            // وهنا نقوم بإضافةا لكلاس الخاص بالتحريك
            mySection.classList.add("animationClass");
        }
    </script>

    <!-- يفضل إضافة الستايل لملف سي اس اس منفصل -->
    <style>
        /* انشاء التحريك الذي نريده */
        /* هنا قمت بإنشاء تحريك للون كمثال فقط */
        @keyframes example {
            from {
                background-color: red;
            }

            to {
                background-color: yellow;
            }
        }

        /* نضيف التحريك للكلاس الذي عرفناه باستخدام الجافاسكريبت */
        .animationClass {
            animation-name: example;
            animation-duration: 4s;
        }
    </style>
</body>

</html>

حيث نقوم بتنفيذ الوظيفة doTheAnimation عند النقر على الرابط والتي تقوم بإضافة الـ class المسمى animationClass للdiv خاصتنا، وفي النهاية قمنا بإضافة animation لهذا الـ class باستخدام css.

شكرا جوابك جدا مفيد، بس عندي استفسار اخر، لو كنت اريد انه لمايوصل السكرول عند DIv معينه يغير لون Div ولما انتقل لDiv اخر يرجع اللون كما هو والديف الاخر هو اللي يتغير لونه كيف اقوم بعمل هذا الشي؟ وشكرا

Shahad Mohammad · 3 يوليو 2022

بتاريخ 6 ساعات قال Shahad Mohammad:

شكرا جوابك جدا مفيد، بس عندي استفسار اخر، لو كنت اريد انه لمايوصل السكرول عند DIv معينه يغير لون Div ولما انتقل لDiv اخر يرجع اللون كما هو والديف الاخر هو اللي يتغير لونه كيف اقوم بعمل هذا الشي؟ وشكرا

خلاص شكرا عرفت

عمر قره محمد · 3 يوليو 2022

بتاريخ 9 ساعات قال Shahad Mohammad:

شكرا جوابك جدا مفيد، بس عندي استفسار اخر، لو كنت اريد انه لمايوصل السكرول عند DIv معينه يغير لون Div ولما انتقل لDiv اخر يرجع اللون كما هو والديف الاخر هو اللي يتغير لونه كيف اقوم بعمل هذا الشي؟ وشكرا

يمكنك فغل ذلك باستخدام الوظيفة getBoundingClientRect التي تعطينا احداثيات العنصر.

بتاريخ 2 ساعات قال Shahad Mohammad:

خلاص شكرا عرفت

ماهي الطريقة التي استخدمتها ؟

css animation

السؤال

Shahad Mohammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

4 أجوبة على هذا السؤال

Recommended Posts

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Shahad Mohammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

Shahad Mohammad

رابط هذا التعليق

شارك على الشبكات الإجتماعية

عمر قره محمد

رابط هذا التعليق

شارك على الشبكات الإجتماعية

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية