เพิ่ม Parallax Blocks ให้กับ Drupal 8 ด้วย ScrollMagic

ในบทช่วยสอนนี้ ฉันจะอธิบายวิธีใช้ประเภทบล็อกที่กำหนดเองเพื่อสร้างเอฟเฟกต์ Parallax ในธีมย่อย Drupal 8 ของคุณ

เพื่อปฏิบัติตามขั้นตอนเหล่านี้ จะช่วยให้มีความเข้าใจที่ดีเกี่ยวกับธีมของ Drupal 8 คุณสามารถคลิกที่นี่เพื่อเข้าร่วม Drupal 8 Themeing Class ของเรา

เพื่อให้สามารถทำตามบทช่วยสอนนี้ได้ คุณจะต้องติดตั้ง 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 ให้คลิกขวาที่ภูมิภาคและเลือกตรวจสอบเพื่อเข้าถึงเครื่องมือตรวจสอบ:

• เพิ่มคำแนะนำเทมเพลตสำหรับบล็อกพารัลแลกซ์ในโฟลเดอร์ธีมของเทมเพลตของคุณ subtheme/templates/block--bundle--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/ แล้วย้ายไฟล์เหล่านี้ไปที่โฟลเดอร์
  • animation.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• ตอนนี้คุณต้องเพิ่ม js แบบกำหนดเองของเรา add parallax.js
• ตอนนี้คุณต้องบอกให้ธีมโหลดไลบรารี js ในการทำเช่นนั้น เปิด subtheme/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));

• ตรวจสอบว่ารูปภาพที่คุณใช้มีขนาดใหญ่เพียงพอสำหรับความกว้างสูงสุดที่คุณต้องการแสดง
• และตอนนี้คุณควรมีเอฟเฟกต์การเลื่อนที่ดีที่คุณได้นำไปใช้กับบล็อกที่เรากำหนดเองเท่านั้น: