Animation upon scrolling

Ahmed Ebrahim11 · 5 أغسطس 2023

السلام عليكم

اري بعض المشاريع يبدا ال elements الخاصه بها ف الظهور اعتمادا عل ظهورها أثناء ال scrolling

مثلا لا يظهر ال section الا عندما ابدا scroll واصل اليه ويظهر عل هيئه animation

انا اعرف استخدام مكتبه animation ولكن المكتبه تبدأ عملها عند refresh فقط

فهل يمكن توضيح كيف يمكنني فعل هذا الانميشن بناء عل ال scrolling

عمر قره محمد · 5 أغسطس 2023

يمكنك تنفيذ هذا التأثير باستخدام js بسهولة وهذا مثال بسيط :

<!DOCTYPE html>
<html>

<head>
	<style>
		/* تعريف الانيميشن */
		@keyframes example {
			from {
				opacity: 0;
			}

			/* تحديد الخصائص الأولية للعنصر */
			to {
				opacity: 1;
			}

			/* تحديد الخصائص النهائية للعنصر */
		}

		body {
			height: 1600px;
		}

		/* تطبيق الانيميشن على العنصر */
		.example {
			opacity: 0;
			/* تحديد الخصائص الأولية للعنصر */
			animation-name: example;
			/* استخدام الانيميشن المعرف سابقًا */
			animation-duration: 4s;
			/* تحديد مدة الانيميشن */
			animation-fill-mode: forwards;
		}
	</style>
</head>

<body>

	<!-- العنصر المراد تحريكه -->
	<div class="example">
		<h1>مرحبًا، بالعالم!</h1>
	</div>

	<!-- هذا السكربت يشغل الانيميشن في كل مرة يظهر فيها العنصر في شاشة العرض -->
	<script>
		const observer = new IntersectionObserver(entries => {
			entries.forEach(entry => {
				if (entry.isIntersecting) {
					entry.target.classList.add('example');
				} else {
					entry.target.classList.remove('example');
				}
			});
		});

		observer.observe(document.querySelector('.example'));
	</script>

</body>

</html>

عبدالباسط ابراهيم · 6 أغسطس 2023

يمكنك استخدام مكتبة AOS لإنشاء رسوم متحركة للعناصر عند التمرير.

لاستخدام مكتبة AOS، عليك أولاً تضمينها في مشروعك. يمكنك القيام بذلك عن طريق إضافة سطر الكود التالي إلى رأس HTML الخاص بك:

<link href="https://unpkg.com/aos@2.3.0/dist/aos.css" rel="stylesheet"> <script src="https://unpkg.com/aos@2.3.0/dist/aos.js"></script>

بعد ذلك، يمكنك استخدام مكتبة AOS لإنشاء رسوم متحركة للعناصر. يمكنك القيام بذلك عن طريق إضافة علامة aos إلى العنصر الذي تريد إنشاء رسوم متحركة له. علامة aos لديها العديد من الخيارات التي يمكنك استخدامها لتحديد كيفية إنشاء الرسوم المتحركة.

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

<div class="aos aos-fade-in"> This text will fade in when the page scrolls down. </div>

لمزيد من المعلومات حول كيفية استخدام مكتبة AOS، يمكنك زيارة موقع الويب الرسمي للمكتبة.

بلال زيادة · 7 أغسطس 2023

يمكنك تحقيق تأثيرات الظهور والتحريك عند التمرير (scrolling) باستخدام تقنيات CSS وJavaScript. هناك طرق مختلفة يمكن استخدامها لتحقيق هذا النوع من التأثيرات.

في هذا المثال، سنستخدم تأثير الظهور باستخدام تحريك (animation) ونستخدم JavaScript لتحديد متى يجب تشغيل التحريك عندما يتم التمرير إلى العنصر المراد ظهوره.

HTML: أضف عنصرك الذي تريد أن يظهر بتأثير التحريك عند التمرير. على سبيل المثال:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <div class="section" id="animated-section">عنصر الظهور الرائع</div>
  <script src="script.js"></script>
</body>
</html>

CSS (styles.css): قم بتحديد تأثير الظهور باستخدام تحريك CSS.

.section {
  opacity: 0; /* يبدأ العنصر بشفافية 0 */
  transform: translateY(20px); /* ينزل العنصر قليلاً */
  transition: opacity 1s, transform 1s; /* تأثير الانتقال للتحريك */
}

.section.visible {
  opacity: 1;
  transform: translateY(0);
}

JavaScript (script.js): تحكم في تفعيل تأثير التحريك عند التمرير.

const section = document.getElementById('animated-section');

function isElementInViewport(el) {
  const rect = el.getBoundingClientRect();
  return (
    rect.top >= 0 &&
    rect.left >= 0 &&
    rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    rect.right <= (window.innerWidth || document.documentElement.clientWidth)
  );
}

function animateOnScroll() {
  if (isElementInViewport(section)) {
    section.classList.add('visible');
    window.removeEventListener('scroll', animateOnScroll);
  }
}

window.addEventListener('scroll', animateOnScroll);

قمنا باستخدام CSS لتحديد تأثير الظهور وJavaScript للتحكم في تنشيط التأثير عند التمرير. عندما يكون العنصر في منطقة العرض الظاهرة (viewport)، سيتم إضافة الفئة visible إلى العنصر، مما سيؤدي إلى تشغيل تأثير التحريك.

Animation upon scrolling

السؤال

Ahmed Ebrahim11

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

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

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

Recommended Posts

عمر قره محمد

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

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

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

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

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

بلال زيادة

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

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

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

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية