كيفية إنشاء رسوم متحركة تعتمد على التمرير باستخدام HTML وCSS

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

سنستخدم HTML لتنظيم المحتوى و Css للتعامل مع الرسوم المتحركة المعتمدة على التمرير باستخدام الإطارات الرئيسية keyframes والتحويلات transforms.

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

معاينة الكود

Valley

الوادي الهادئ المحاط بالجبال الشاهقة هو الملاذ المثالي لهدوء الطبيعة.

Island

A جزيرة الجنة الاستوائية ذات المياه الفيروزية والرمال البيضاء الناعمة تدعوك للاسترخاء.

Nature

تجعل المساحات الخضراء المورقة والأزهار الملونة الطبيعة نسيجًا نابضًا بالحياة والجمال.

Fuji

يقف جبل فوجي المهيب شامخًا، وهو رمز مميز لجمال الطبيعة في اليابان.

Sunrise

كن شاهدًا على درجات اللون الذهبي لشروق الشمس بينما يستيقظ العالم على يوم جديد.

Lake

بحيرة هادئة تعكس جمال الجبال والسماء المحيطة بها.

Flowers

تتمايل الأزهار الرقيقة في النسيم، وترسم المناظر الطبيعية بألوان نابضة بالحياة.

Snow

تغطي الثلوج الطازجة الأرض، مما يحول المناظر الطبيعية إلى أرض عجائب الشتاء.

Sunset

تشتعل السماء باللون البرتقالي الناري والوردي مع غروب الشمس في الأفق.

Autumn

أوراق الخريف، التي ترتدي ظلالاً من اللون الأحمر والذهبي، تغطي أرض الغابة.

Stars

تحت ليلة مرصعة بالنجوم، يصبح اتساع الكون واضحًا في سماء منتصف الليل.

Van

شاحنة كلاسيكية متوقفة بجانب الشاطئ، جاهزة لرحلة برية مليئة بالمغامرات.

Cat

قطة فضولية تستكشف محيطها، وتتحرك برشاقة وأناقة.

Lavender

تتمايل حقول اللافندر برفق في النسيم، وتملأ الهواء برائحتها المهدئة.

1. HTML

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

    
     <div class="progress-bar"></div>
     <section>
       <h1>Scroll-driven Animations</h1>
       <div class="card-container">
         <div class="card">
           <h5 class="f23">Valley</h5>
           <a href='' >
           <img src="https://c.wallhere.com/photos/b7/e4/nature_road-286370.jpg!d" alt="Valley" />
           <p>الوادي الهادئ المحاط بالجبال الشاهقة هو الملاذ المثالي لهدوء الطبيعة.</p></a>
         </div>
         <div class="card">
           <h5 class="f24">Island</h5>
           <img src="https://avatars.mds.yandex.net/i?id=e3f91d89f82021856aabbf02f81c0d92_l-9137660-images-thumbs&n=13" alt="Island" />
           <p>A جزيرة الجنة الاستوائية ذات المياه الفيروزية والرمال البيضاء الناعمة تدعوك للاسترخاء.</p>
         </div>
         <div class="card">
         <h5 class="f23">Nature</h5>
           <img src="https://avatars.mds.yandex.net/get-mpic/4032259/img_id1020468524950194956.jpeg/orig" alt="Nature" />
           <p>تجعل المساحات الخضراء المورقة والأزهار الملونة الطبيعة نسيجًا نابضًا بالحياة والجمال.</p>
         </div>
         <div class="card">
           <h5 class="f24">Fuji</h5>
           <img src="https://avatars.mds.yandex.net/i?id=f451a004ded4e425b47366229eec94d8-5578930-images-thumbs&n=13" alt="Mount Fuji" />
           <p>يقف جبل فوجي المهيب شامخًا، وهو رمز مميز لجمال الطبيعة في اليابان.</p>
         </div>
         <div class="card">
           <h5 class="f23">Sunrise</h5>
           <img src="https://avatars.mds.yandex.net/i?id=8e9c19824136efddab96d2c6c01f38e4_l-5175093-images-thumbs&n=13" alt="Sunrise" />
           <p>كن شاهدًا على درجات اللون الذهبي لشروق الشمس بينما يستيقظ العالم على يوم جديد.</p>
         </div>
         <div class="card">
           <h5 class="f24">Lake</h5>
           <img src="https://i.pinimg.com/originals/9a/e1/5b/9ae15b8d879402df564d68277ce2d785.jpg" alt="Lake" />
           <p>بحيرة هادئة تعكس جمال الجبال والسماء المحيطة بها.</p>
         </div>
         <div class="card">
           <h5 class="f23">Flowers</h5>
           <img src="https://avatars.mds.yandex.net/get-mpic/4615030/img_id7062374331688514950.jpeg/orig" alt="Flowers" />
           <p>تتمايل الأزهار الرقيقة في النسيم، وترسم المناظر الطبيعية بألوان نابضة بالحياة.</p>
         </div>
         <div class="card">
           <h5 class="f24">Snow</h5>
           <img src="https://avatars.mds.yandex.net/i?id=439be3f74dc1d2d109de39dd0bdef2fa_l-6356264-images-thumbs&n=13" alt="Snow" />
           <p>تغطي الثلوج الطازجة الأرض، مما يحول المناظر الطبيعية إلى أرض عجائب الشتاء.</p>
         </div>
         <div class="card">
           <h5 class="f23">Sunset</h5>
           <img src="https://avatars.mds.yandex.net/i?id=c7edf27bd73c577f360d9616ef158c98_l-5655541-images-thumbs&n=13" alt="Sunset" />
           <p>تشتعل السماء باللون البرتقالي الناري والوردي مع غروب الشمس في الأفق.</p>
         </div>
         <div class="card">
           <h5 class="f24">Autumn</h5>
           <img src="https://avatars.mds.yandex.net/i?id=47ca691590e0e5c2fd98ce0b650bb955_l-5623485-images-thumbs&n=13" alt="Autumn" />
           <p>أوراق الخريف، التي ترتدي ظلالاً من اللون الأحمر والذهبي، تغطي أرض الغابة.</p>
         </div>
         <div class="card">
           <h5 class="f23">Stars</h5>
           <img src="https://c-s.by/images/virtuemart/product/56_Iskra_Temnaya_Stoleshica_Skif.jpg" alt="Stars" />
           <p>تحت ليلة مرصعة بالنجوم، يصبح اتساع الكون واضحًا في سماء منتصف الليل.</p>
         </div>
         <div class="card">
          <h5 class="f24">Van</h5>
           <img src="https://avatars.dzeninfra.ru/get-zen_doc/5031224/pub_63ef96e220ef67010e414de2_63ef970089230f22b4b8aeff/scale_1200" alt="Van" />
           <p>شاحنة كلاسيكية متوقفة بجانب الشاطئ، جاهزة لرحلة برية مليئة بالمغامرات.</p>
         </div>
         <div class="card">
         <h5 class="f23">Cat</h5>
           <img src="https://avatars.mds.yandex.net/i?id=5b775116f5afa41d4b8933abfdb5acc88324eba9-12523274-images-thumbs&n=13" alt="Cat" />
           <p>قطة فضولية تستكشف محيطها، وتتحرك برشاقة وأناقة.</p>
         </div>
         <div class="card">
           <h5 class="f24">Lavender</h5>
           <img src="https://www.ivd.ru/images/cache/2021/3/9/fit_960_530_false_crop_1280_722_0_0_q90_1673021_707ae49f6770d31dc717925b3.jpeg" alt="Lavender" />
           <p>تتمايل حقول اللافندر برفق في النسيم، وتملأ الهواء برائحتها المهدئة.</p>
         </div>
       </div>
     </section>

2.  Css:

   تحتوي ورقة الأنماط هذه Css على تنسيقات لصفحة ويب باستخدام خط Poppins، وتحديد نمط box-sizing بشكل عام، وتطبيق لون خلفية فاتح ولون نص داكن. 
   يتم تنسيق العناوين والفقرات والأقسام لتحسين قابلية القراءة والتباعد. تم تصميم البطاقات بمظهر أنيق مع ظل ورسوم متحركة. يتكيف التصميم مع الشاشات الأصغر، ويحتوي شريط التقدم في الأعلى على تدرج لوني ورسوم متحركة تعتمد على التمرير.

   
   @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap");
   
   * {
     box-sizing: border-box;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
   
   html, body {
     width: 100%;
     margin: 0;
     padding: 0;
   }
   
   body {
     color: #001c35;
     background-color: #e3eafc;
     font-family: "Poppins", sans-serif;
   }
   
   h1 {
     font-size: 32px;
     font-style: italic;
     margin-bottom: 3rem;
   }
   
   h2 {
     font-size: 20px;
     margin: 0 0 1rem 0;
     line-height: 1.2;
     white-space: normal;
     overflow-wrap: break-word;
     text-overflow: ellipsis;
   }
   
   p {
     font-size: 14px;
     margin: 0.5rem 0;
     overflow-wrap: break-word;
   }
   
   section {
     width: 100%;
     max-width: 800px;
     padding: 4rem 1rem;
     margin: 0 auto;
   }
   
   section img {
     width: 100%;
     max-width: 520px;
     height: 100%;
     max-height: 200px;
     object-fit: cover;
     margin: 1rem 0;
     display: block;
     border-radius: 8px;
     transform-origin: center;
   }
   
   .card {
     width: 100%;
     max-width: 520px;
     padding: 16px;
     background-color: #fff;
     border-radius: 8px;
     box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
     animation: fade-in linear both;
     animation-timeline: view();
     animation-range: entry 10% entry 80%;
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
   }
   
   .card h2, .card p {
     margin-bottom: 0.5rem;
   }
   
   .card-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 16px;
   }
   
   @media screen and (max-width: 580px) {
     .card-container {
       grid-template-columns: 1fr;
     }
   }
   
   @keyframes scaleProgress {
     from {
       transform: scaleX(0);
     }
     to {
       transform: scaleX(100%);
     }
   }
   
   .progress-bar {
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 1rem;
     z-index: 1;
     background: #feac5e;
     background: -webkit-linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
     background: linear-gradient(to right, #4bc0c8, #c779d0, #feac5e);
     transform-origin: 0 50%;
     animation: scaleProgress auto linear;
     animation-timeline: scroll(root);
   }
   
   @keyframes fade-in {
     from {
       opacity: 0.3;
       transform: scale(0.9);
     }
     to {
       opacity: 1;
       transform: scale(1);
     }
   }
   

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

تحميل الكود المصدري

كيفية إنشاء رسوم متحركة تعتمد على التمرير باستخدام HTML و CSS.zip 5.65Mb