أضف كتل Parallax إلى دروبال 8 باستخدام ScrollMagic

في هذا البرنامج التعليمي ، سأشرح كيفية استخدام أنواع الكتل المخصصة لإنشاء تأثير Parallax في موضوع Drupal 8 الفرعي.

لمتابعة هذه الخطوات ، من المفيد أن يكون لديك فهم جيد لسمات دروبال 8. يمكنك النقر هنا لأخذ دروسنا في Drupal 8 Theming.

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

الخطوة 1. تكوين نسق Bootstrap

عادة ما تكون تأثيرات المنظر كاملة العرض لذا تحتاج إلى تشغيل خيار حاوية السوائل من قائمة سمة Bootstrap.

• انتقل إلى "المظهر" وتأكد من تعيين سمة Bootstrap كافتراضي.
• أدخل إعدادات سمة Bootstrap وحدد قائمة الحاوية المنسدلة.
• ضع علامة في المربع بجانب "حاوية السوائل".
• انقر فوق "حفظ التكوين".

الخطوة 2. إنشاء الكتل

أنت الآن بحاجة إلى عمل بعض الكتل المخصصة للعرض. باستخدام الكتل المخصصة ، يمكنك تصميم الكتل على وجه التحديد.

• انتقل إلى الهيكل> تخطيط الكتلة> الأنواع.
• انقر فوق "إضافة نوع كتلة مخصصة".

• تسمية الكتلة المخصصة "Parallax":

• انتقل الآن إلى "إضافة كتلة مخصصة" وأنشئ كتلتين ، واحدة لكل من الصور التي تستخدمها. دعوت هذه الكتل Parallax 1 و Parallax 2.
• اضبط المنطقة على المحتوى واحفظ الكتل.

أنت الآن بحاجة إلى استخدام الكتل الأساسية المخصصة لعرض المحتوى بين الصور على صفحة تخطيط الكتلة. أيضًا ، قم بإزالة أي كتل قمت بوضعها في الأشرطة الجانبية لأن هذا سيمنع العرض من أن يكون 100٪.

الخطوه 3. تمكين التصحيح

• قم الآن بتشغيل تصحيح الأخطاء إذا لم تكن قد قمت بتمكينه بالفعل.
• انتقل إلى المواقع / الافتراضي وانسخ وأعد تسمية default.services.yml إلى services.yml على السطر 58 ، قم بتغيير التصحيح إلى صحيح:

• الآن ، لتتمكن من رؤية اقتراحات السمات ، أضف هذا الرمز إلى ملف Subtheme.theme الخاص بك:

 /** * Implements hook_theme_suggestions_HOOK_alter() for form templates. * @param array $suggestions * I found this code on drupal.org https://www.drupal.org/node/2724333 * @param array $variables */ function subtheme_theme_suggestions_block_alter(array &$suggestions, array $variables) { // Block suggestions for custom block bundles. if (isset($variables['elements']['content']['#block_content'])) { array_splice($suggestions, 1, 0, 'block__bundle__' . $variables['elements']['content']['#block_content']->bundle()); } }

 /** * Implements hook_theme_suggestions_HOOK_alter() for form templates. * @param array $suggestions * I found this code on drupal.org https://www.drupal.org/node/2724333 * @param array $variables */ function subtheme_theme_suggestions_block_alter(array &$suggestions, array $variables) { // Block suggestions for custom block bundles. if (isset($variables['elements']['content']['#block_content'])) { array_splice($suggestions, 1, 0, 'block__bundle__' . $variables['elements']['content']['#block_content']->bundle()); } }

• يجب أن يتطابق اسم الوظيفة مع اسم المظهر الخاص بك. تسمح لك إضافة هذا إلى ملف السمة الخاص بك بتخصيص قوالب مخصصة.
• قم بمسح جميع ذاكرات التخزين المؤقت وإذا قمت بفحص الموقع الآن سترى اقتراحات السمات.
• في Google Chrome ، انقر بزر الماوس الأيمن فوق المنطقة وحدد فحص للوصول إلى أداة المفتش:

• أضف اقتراح القالب لكتلة المنظر في الموضوع الفرعي / قوالب / كتلة - حزمة - parallax.html.twig لمجلد قالب القوالب الخاص بك
• أضف هذا الرمز إلى ملف القالب:

 <div class="parallax parallax--{{ elements['#id'] }}"> <div class="parallax__bg"></div> <div class="parallax__content"> <h2{{ title_attributes }}>{{ label }}</h2> {{ content['body']['0']['#text'] | raw}} </div> </div>

 <div class="parallax parallax--{{ elements['#id'] }}"> <div class="parallax__bg"></div> <div class="parallax__content"> <h2{{ title_attributes }}>{{ label }}</h2> {{ content['body']['0']['#text'] | raw}} </div> </div>

• سيقوم هذا الرمز بتصميم قالب المنظر المخصص الذي قمت بإنشائه. إذا كنت بحاجة إلى تصحيح هذا ، يمكنك استخدام kint من وحدة Devel.

الخطوة رقم 4. نمط الكتل

أنت الآن بحاجة إلى إضافة CSS لتصميم الكتل.

• افتح /css/style.css وأضف هذا الرمز:

 .main-container, .page-header { padding: 0px; } .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 { text-align: center; padding: 10em; font-size: 20px; background-color: #204d74; color: #fff; } .parallax { text-align: center; position: relative; overflow: hidden; height: 500px; } .parallax__bg { position: absolute; width: 100%; height: 140%; } .parallax--parallax1 .parallax__bg { background: url('../images/yourimage'); } .parallax--parallax2 .parallax__bg { background: url('../images/yourimage'); } .parallax__content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; h2 { margin: 0px; font-size: 30px; } p { font-size: 20px; } }

 .main-container, .page-header { padding: 0px; } .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 { text-align: center; padding: 10em; font-size: 20px; background-color: #204d74; color: #fff; } .parallax { text-align: center; position: relative; overflow: hidden; height: 500px; } .parallax__bg { position: absolute; width: 100%; height: 140%; } .parallax--parallax1 .parallax__bg { background: url('../images/yourimage'); } .parallax--parallax2 .parallax__bg { background: url('../images/yourimage'); } .parallax__content { position: relative; top: 50%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); color: #fff; h2 { margin: 0px; font-size: 30px; } p { font-size: 20px; } }

• ستحتاج إلى تحديث .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 لمطابقة الكتلة الخاصة بك:

هذه هي الفئة المخصصة للكتلة المخصصة الخاصة بك. إذا قمت بتسمية كتلة Parallax الخاصة بك بشكل مختلف ، فسيتعين عليك تحديث Parallax - parallax1 و. Parallax - parallax2.

الخطوة رقم 5. أضف الصور و ScrollMagic

• انتقل إلى المظهر الخاص بك وقم بإنشاء مجلد يسمى / images /. هذا هو المكان الذي ستحفظ فيه الصور لتأثير المنظر.
• أضف بعض جافا سكريبت Javascript لجعل الصور تتحرك قليلاً. لهذا ، سوف تستخدم ScrollMagic. قم بتنزيل واستخراج الملفات من GitHub:

• انتقل الآن إلى السمة الخاصة بك وأنشئ مجلدًا يسمى / js / وانقل هذه الملفات إلى المجلد
  • animé.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• أنت الآن بحاجة إلى إضافة js المخصصة إضافة parallax.js
• أنت الآن بحاجة إلى إخبار السمة بتحميل مكتبات js. للقيام بذلك ، افتح الموضوع الفرعي / subtheme.libraries.yml:

 global-styling: css: theme: css/style.css: {} js: js/ScrollMagic.min.js: {} js/animation.gsap.min.js: {} js/TweenMax.min.js: {} js/parallax.js: {} dependencies: - core/drupal - core/jquery

 global-styling: css: theme: css/style.css: {} js: js/ScrollMagic.min.js: {} js/animation.gsap.min.js: {} js/TweenMax.min.js: {} js/parallax.js: {} dependencies: - core/drupal - core/jquery

• وأخيرًا ، أضف هذا الرمز إلى ملف parallax.js الخاص بك:

 (function ($) { 'use strict'; Drupal.behaviors.myBehavior = { attach: function (context, settings) { var controller = new ScrollMagic.Controller(); var blocks = [".parallax--parallax1", ".parallax--parallax2"]; blocks.forEach(function (block, index) { var $bg = $(block).find('.parallax__bg'); var $content = $(block).find('.parallax__content'); var tl = new TimelineMax(); tl .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0) .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4) ; var scene = new ScrollMagic.Scene({ triggerElement: block, triggerHook: 1, duration: "100%" }) .setTween(tl) .addTo(controller); }); } } }(jQuery));

 (function ($) { 'use strict'; Drupal.behaviors.myBehavior = { attach: function (context, settings) { var controller = new ScrollMagic.Controller(); var blocks = [".parallax--parallax1", ".parallax--parallax2"]; blocks.forEach(function (block, index) { var $bg = $(block).find('.parallax__bg'); var $content = $(block).find('.parallax__content'); var tl = new TimelineMax(); tl .from($bg, 2, {y: '-40%', ease: Power0.easeNone}, 0) .from($content, 1, {autoAlpha: 0, ease: Power0.easeNone}, 0.4) ; var scene = new ScrollMagic.Scene({ triggerElement: block, triggerHook: 1, duration: "100%" }) .setTween(tl) .addTo(controller); }); } } }(jQuery));

• تأكد من أن الصور التي تستخدمها كبيرة بما يكفي لأقصى عرض تريد عرضه.
• والآن يجب أن يكون لديك تأثير تمرير لطيف قمت بتطبيقه فقط على الكتل المخصصة لدينا: