كيفية عمل هيرو سيكشن مثل هذا بالووردبريس

من الممكن تنفيذ ذلك من خلال جافاسكريبت فقط أي كود نقي بدون مكتبة من خلال Intersection Observer API ابحث على اليوتيوب عنه وستجد شروحات توضح لك.

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

بالإضافة للحلول السابقة يمكنك استخدام المكتبات الخفيفة وإضافات الوردبريس التالية 

• Animate.css - إضافة رائعة توفر مجموعة واسعة من تأثيرات الأنيميشن بكل بساطة.
• WOW.js - تظهر العناصر بأنيميشن عند دخولها في مجال الرؤية أثناء التمرير.
•  Animate It - إضافة وردبريس سهلة الاستخدام لأنواع متعددة من الأنيميشن.

كما أن المكتبة التي أقترحها مصطفى في التعليق السابق GSAP فهي مكتبة قوية تمكنك من تنفيذ أصعب ال animations بسهولة ولكن ينبغي عليك تعلمها بشكل جيد

بتاريخ 11 ساعة قال Mustafa Suleiman:

من الممكن تنفيذ ذلك من خلال جافاسكريبت فقط أي كود نقي بدون مكتبة من خلال Intersection Observer API ابحث على اليوتيوب عنه وستجد شروحات توضح لك.

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

 

 

جزاك الله خير استاذي الكريم وبارك فيك هل من مراجع مفضلة لدراسة هذه المكتبات استاذي هل هناك شرح معين تنصح به ؟

بتاريخ 7 ساعة قال عبدالباسط ابراهيم:

بالإضافة للحلول السابقة يمكنك استخدام المكتبات الخفيفة وإضافات الوردبريس التالية 

• Animate.css - إضافة رائعة توفر مجموعة واسعة من تأثيرات الأنيميشن بكل بساطة.
• WOW.js - تظهر العناصر بأنيميشن عند دخولها في مجال الرؤية أثناء التمرير.
•  Animate It - إضافة وردبريس سهلة الاستخدام لأنواع متعددة من الأنيميشن.

كما أن المكتبة التي أقترحها مصطفى في التعليق السابق GSAP فهي مكتبة قوية تمكنك من تنفيذ أصعب ال animations بسهولة ولكن ينبغي عليك تعلمها بشكل جيد

جزاك الله خير وبارك فيك ساجربها باذن الله