css animation

Shahad Mohammad · 1 يوليو 2022

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

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

بتاريخ On 1‏/7‏/2022 at 02:09 قال 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 1‏/7‏/2022 at 06: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

بتاريخ On 2‏/7‏/2022 at 19:26 قال Shahad Mohammad:

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

أظهر المزيد

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

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

بتاريخ On 2‏/7‏/2022 at 19:26 قال Shahad Mohammad:

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

أظهر المزيد

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

بتاريخ On 3‏/7‏/2022 at 01:54 قال Shahad Mohammad:

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

أظهر المزيد

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

css animation

السؤال

Shahad Mohammad

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

Recommended Posts

عمر قره محمد

Shahad Mohammad

Shahad Mohammad

عمر قره محمد

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية