إضافة تأثير animation on scroll

Hxfhf Ucicic · 17 مايو

كيف يمكنني جعل الموقع عند دخول المستخدم عليه تظهر العناصر بشكل smooth

مثل يلي موجود في صورة

ايضا مثل موقع github

تم التعديل في 17 مايو بواسطة بلال زيادة
تحسين العنوان

محمد_عاطف · 17 مايو

هل تقصد جعل العناصر تأتي من الأسفل إلى الأعلى أم اماذا ؟

إذا كان كذلك فيمكنك إنشاء keyframes لجعل الروابط تظهر من الأسفل إلى الأعلى مع تغير ال opacity لتظهر بشكل باهت أولا .

وال keyframes بسيط كتالي :

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

الآن يجب عليك إنشاء كلاس وليكن مثلا بإسم fade-in-up ونضع له ال animation بال keyframes التي أنشأنها .ولأننا نريد تأخير بعض العناصر عن الأخرى سنقوم بتأخير عرض ال animation لكل عنصر هكذا :

.fade-in-up:nth-child(1) {
  animation: fadeInUp 1s ease-in-out forwards;
}
.fade-in-up:nth-child(2) {
  animation: fadeInUp 1.3s ease-in-out forwards;
}
.fade-in-up:nth-child(3) {
  animation: fadeInUp 1.5s ease-in-out forwards;
}
.fade-in-up:nth-child(4) {
  animation: fadeInUp 1.7s ease-in-out forwards;
}
.fade-in-up:nth-child(5) {
  animation: fadeInUp 1.9s ease-in-out forwards;
}

والآن كل ما عليك هو وضع الكلاس fade-in-up لعناصر القائمة وإليك كود كامل للإختبار :

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        nav {
            background-color: #fff;
            padding: 20px 0;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
        }
        
        .nav-container {
            display: flex;
            justify-content: center;
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .nav-items {
            display: flex;
            list-style: none;
            margin: 0;
            padding: 0;
        }
        
        .nav-item {
            margin: 0 20px;
            opacity: 0;
            transform: translateY(20px);
        }
        
        .nav-item a {
            text-decoration: none;
            color: #333;
            font-weight: 600;
            font-size: 16px;
            transition: color 0.3s;
        }
        
        .nav-item a:hover {
            color: #007bff;
        }
        
        /* تأثيرات الظهور */
        .fade-in-up:nth-child(1) {
            animation: fadeInUp 1s ease-in-out forwards;
        }
         .fade-in-up:nth-child(2) {
            animation: fadeInUp 1.3s ease-in-out forwards;
        }
         .fade-in-up:nth-child(3) {
            animation: fadeInUp 1.5s ease-in-out forwards;
        }
         .fade-in-up:nth-child(4) {
            animation: fadeInUp 1.7s ease-in-out forwards;
        }
         .fade-in-up:nth-child(5) {
            animation: fadeInUp 1.9s ease-in-out forwards;
        }
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(50px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>
<body>
    <nav>
        <div class="nav-container">
            <ul class="nav-items">
                <li class="nav-item fade-in-up"><a href="#">Home</a></li>
                <li class="nav-item fade-in-up"><a href="#">About</a></li>
                <li class="nav-item fade-in-up"><a href="#">Skills</a></li>
                <li class="nav-item fade-in-up"><a href="#">Services</a></li>
                <li class="nav-item fade-in-up"><a href="#">Contact</a></li>
            </ul>
        </div>
    </nav>

</body>
</html>

أو يمكنك إستخدام المكتبة AOS (Animate On Scroll) وهي مكتبة ممتازة لل animation وستوفر عليك الكثير من الوقت في إستخدام animation معقدة .

وهذا هو رابط المكتبة :

https://michalsnik.github.io/aos/

بلال زيادة · 17 مايو

لجعل عناصر الموقع تظهر بشكل سلس عند دخول المستخدم، كما في الصورة أو مثل موقع GitHub، يمكنك استخدام الـ CSS Animations أو الـ JavaScript مع مكتبات مثل GSAP أو ببساطة باستخدام خصائص الـ CSS transitions سأشرح لك طريقة بسيطة باستخدام CSS، يمكنك إضافة تأثير الظهور التدريجي (fade-in) أو الحركة (slide-in) باستخدام opacity و transform.

<!DOCTYPE html>
<html lang="ar">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>تأثير سلس</title>
  <style>
    body {
      background-color: #1a1a1a;
      color: white;
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    /* تحديد العنصر الذي سيظهر بتأثير */
    .element {
      opacity: 0; /* يبدأ شفافًا */
      transform: translateY(20px); /* يبدأ بتحريكه للأسفل قليلاً */
      animation: fadeIn 1s ease-in-out forwards; /* اسم الرسم المتحرك */
    }

    /* تعريف الرسم المتحرك */
    @keyframes fadeIn {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    /* إضافة تأخير لكل عنصر */
    .element:nth-child(1) { animation-delay: 0.2s; }
    .element:nth-child(2) { animation-delay: 0.4s; }
    .element:nth-child(3) { animation-delay: 0.6s; }
  </style>
</head>
<body>
  <div class="element">
    <h1>مرحبًا</h1>
  </div>
  <div class="element">
    <p>أنا مطور ويب</p>
  </div>
  <div class="element">
    <button>تواصلوا معي</button>
  </div>
</body>
</html>

أو يمكنك تحميل مكتبة animation css و استخدام classes التي توفرها. مما يضفي على العناصر تأثيرات سلسة و ناعمة.

Hxfhf Ucicic · 17 مايو

اصبحت تأتي مرة واحدة فقط انا اريد عندما امرر لأسفل يظهر تأثير

بلال زيادة · 17 مايو

بتاريخ 13 دقائق مضت قال Zen:

اصبحت تأتي مرة واحدة فقط انا اريد عندما امرر لأسفل يظهر تأثير

يرجى مراجعة الإجابة هنا

Mustafa Suleiman · 17 مايو

ما تريده يُسمى animation on scroll أو Scroll-triggered Animations الأسهل لك استخدام مكتبة GSAP، تستطيع البحث على اليوتيوب عن GSAP ScrollTrigger، وعامًة إليك مثال، ستحتاج أولاً إلى تضمين المكتبة عبر روابط CDN:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>

ولنقم بالتطبيق على مثال بسيط:

<!DOCTYPE html>
<html lang="ar" dir="rtl">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>GSAP Scroll Animation</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <header>
        <div class="logo">Charlotte <span>Smith</span></div>
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Skills</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>

    <section class="hero">
        <div class="hero-text">
            <p class="intro-line">Hey I'm</p>
            <h1 class="name-line">Charlotte Smith</h1>
            <p class="tagline">A Creative Web Developer & Designer.</p>
        </div>
        <div class="hero-image-container">
            <div class="halo halo1"></div>
            <div class="halo halo2"></div>
            <div class="halo halo3"></div>
            <img src="https://avatar.iran.liara.run/public/73" alt="Charlotte Smith" class="profile-image">
        </div>
    </section>

    <section class="spacer" style="height: 100vh; background: #1a1a1a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;">
        Scroll down to see effects
    </section>
    <section class="spacer" style="height: 100vh; background: #2a2a2a; display: flex; align-items: center; justify-content: center; color: white; font-size: 2em;">
        More Content Here
    </section>


    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/gsap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.5/ScrollTrigger.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

وكود CSS:

body {
    margin: 0;
    font-family: sans-serif;
    background-color: #0a0a0a; 
    color: #f0f0f0;
    overflow-x: hidden; /* لمنع التمرير الأفقي غير المرغوب فيه */
}

header {
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 50px;
    box-sizing: border-box;
    z-index: 100;
    background: rgba(10, 10, 10, 0.5); 
    backdrop-filter: blur(5px);
}

.logo {
    font-size: 1.8em;
    font-weight: bold;
}

.logo span {
    color: #e60000; 
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {
    margin-left: 30px;
}

nav ul li a {
    text-decoration: none;
    color: #f0f0f0;
    font-size: 1em;
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: #e60000;
}

.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 100px 50px 50px; 
    box-sizing: border-box;
    position: relative;
    overflow: hidden; 
}

.hero-text {
    flex-basis: 50%;
    padding-right: 50px; 
}

.hero-text .intro-line {
    font-size: 2em;
    color: #aaa; 
    margin-bottom: 0;
    /* سيتم تحريكه بواسطة GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.hero-text .name-line {
    font-size: 4em; 
    font-weight: bold;
    color: #fff;
    margin-top: 0;
    margin-bottom: 10px;
    /* سيتم تحريكه بواسطة GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.hero-text .tagline {
    font-size: 1.5em;
    color: #ccc;
    /* سيتم تحريكه بواسطة GSAP */
    opacity: 0;
    transform: translateY(30px);
}

.hero-image-container {
    flex-basis: 40%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.profile-image {
    max-width: 70%;
    height: auto;
    border-radius: 50%; 
    z-index: 5;
    position: relative;
    /* سيتم تحريكه بواسطة GSAP */
    opacity: 0;
    transform: scale(0.8) translateX(50px);
}

.halo {
    position: absolute;
    border-radius: 50%;
    background-color: rgba(220, 0, 0, 0.2); 
    opacity: 0; 
    transform: scale(0.5);
    z-index: 1;
}

.halo1 {
    width: 100%;
    padding-bottom: 100%;
    max-width: 400px;
    max-height: 400px;
    z-index: 3;
    background-color: rgba(220, 0, 0, 0.15);
}
.halo2 {
    width: 120%;
    padding-bottom: 120%;
    max-width: 480px;
    max-height: 480px;
    z-index: 2;
    background-color: rgba(220, 0, 0, 0.1);
}
.halo3 {
    width: 140%;
    padding-bottom: 140%;
    max-width: 560px;
    max-height: 560px;
    z-index: 1;
    background-color: rgba(220, 0, 0, 0.05);
}

/* إخفاء العناصر قبل تحميل GSAP للتحكم بظهورها */
.logo, nav ul li {
    opacity: 0;
}

ثم كتابة كود جافاسكريبت باستخدام GSAP وقمت بإضافة تعليقات لشرح ما يحدث:

// تسجيل إضافة ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// 1. تحريكات عند تحميل الصفحة (بدون ScrollTrigger مبدئياً)
// -----------------------------------------------------
const tlOnLoad = gsap.timeline({ defaults: { ease: "power2.out" } });

tlOnLoad
    .from(".logo", { opacity: 0, x: -30, duration: 0.8, delay: 0.2 })
    .from("nav ul li", { opacity: 0, y: -20, stagger: 0.1, duration: 0.5 }, "-=0.5") // يبدأ مع اللوجو تقريباً
    .to(".hero-text .intro-line", { opacity: 1, y: 0, duration: 0.8, delay: 0.3 })
    .to(".hero-text .name-line", { opacity: 1, y: 0, duration: 0.8 }, "-=0.5") // يبدأ بعد النص التمهيدي بقليل
    .to(".hero-text .tagline", { opacity: 1, y: 0, duration: 0.8 }, "-=0.6")
    .to(".profile-image", { opacity: 1, scale: 1, x: 0, duration: 1 }, "-=0.8") // الصورة تظهر
    .to(".halo", { // الهالات تظهر بشكل متتالي
        opacity: 1,
        scale: 1,
        duration: 1.2,
        stagger: 0.2, // تأخير بين كل هالة
        ease: "elastic.out(1, 0.5)"
    }, "-=0.7");


// 2. تحريكات عند التمرير (ScrollTrigger)
// --------------------------------------

// مثال: تأثير parallax على الصورة عند التمرير
gsap.to(".profile-image", {
    yPercent: -30, // تحريك الصورة لأعلى بنسبة 30% من ارتفاعها
    ease: "none",
    scrollTrigger: {
        trigger: ".hero", // العنصر الذي يبدأ عنده التأثير
        start: "top top", // متى يبدأ (عندما يصل أعلى الـ .hero إلى أعلى الـ viewport)
        end: "bottom top", // متى ينتهي (عندما يصل أسفل الـ .hero إلى أعلى الـ viewport)
        scrub: true, // يجعل الحركة متزامنة مع التمرير (true أو رقم لـ "تنعيم" الحركة)
        // markers: true // لإظهار علامات تساعد في تحديد نقاط البدء والنهاية (للتطوير فقط)
    }
});

// مثال: تأثير parallax على الهالات (بسرعات مختلفة)
gsap.utils.toArray(".halo").forEach((halo, i) => {
    gsap.to(halo, {
        yPercent: -20 * (i + 1), // كل هالة تتحرك أسرع قليلاً
        scale: 1.1 + (i * 0.1), // تكبير قليل مع التمرير
        opacity: 0.5 - (i * 0.1), // تتلاشى قليلاً مع التمرير
        ease: "none",
        scrollTrigger: {
            trigger: ".hero",
            start: "top top",
            end: "bottom top",
            scrub: 1.5, // تنعيم أكثر
            // markers: {startColor: "blue", endColor: "blue", indent: 40 * i}
        }
    });
});


// مثال: تلاشي نصوص الـ hero عند التمرير لأسفل
gsap.to(".hero-text", {
    opacity: 0,
    yPercent: -50, // تحريك النص لأعلى
    ease: "power1.in",
    scrollTrigger: {
        trigger: ".hero",
        start: "center center", // عندما يصل منتصف الـ .hero إلى منتصف الـ viewport
        end: "bottom center",   // عندما يصل أسفل الـ .hero إلى منتصف الـ viewport
        scrub: 1,
        // markers: {startColor: "green", endColor: "green"}
    }
});

// مثال: تغيير خلفية الهيدر عند التمرير (إذا لم يكن fixed بالفعل)
// أو تثبيت الهيدر بعد تجاوز قسم معين
ScrollTrigger.create({
    trigger: ".hero", // يمكن أن يكون body أو أي عنصر آخر
    start: "bottom top", // عندما يتجاوز أسفل قسم الـ hero أعلى النافذة
    toggleClass: { targets: "header", className: "scrolled" }, // أضف كلاس CSS
    // markers: true,
    onEnter: () => console.log("Header scrolled class added"),
    onLeaveBack: () => console.log("Header scrolled class removed")
});

عبدالباسط ابراهيم · 17 مايو

هناك العديد من المكتبات التي تساعدك في بناء هذه التأثيرات الرسومية كما يمكنك استخدام ال css وال js فقط ولكن ذلك يكون في الأشياء البسيطة نسبياً ولكن يمكنك تنفيذها بهذه المكتبات الجاهزة مثل

Animate.css حيث تدعمالعديد من الأنيمشن مثل fade, slide, zoom, flip ولا تتطلب جافاسكربت

ولديك أيضاً مكتبة AOS (Animate On Scroll) حيث كما تسمى حيث تضيف الأنيميشن عند دخول العنصر إلى الشاشة أثناء التمرير.

والمكتبات السابقة وغيرها تعتبر مكتبات بسيطة في تحميلها واستخدامها ويمكنها تنفيذ ماتريده ولكن عندما تريد تأثيرات معقدة أو حتى ألعاب صغيرة يمكنك استخدام GSAP و Lottie.

إضافة تأثير animation on scroll

السؤال

Hxfhf Ucicic

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

Recommended Posts

محمد_عاطف

بلال زيادة

Hxfhf Ucicic

بلال زيادة

Mustafa Suleiman

عبدالباسط ابراهيم

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

إعلانات

تابعنا على

الرئيسية

كيف أتعلم؟

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية