Tambahkan Blok Parallax ke Drupal 8 Dengan ScrollMagic

Dalam tutorial ini, saya akan menjelaskan cara menggunakan jenis blok khusus untuk membuat efek Parallax di subtema Drupal 8 Anda.

Untuk mengikuti langkah-langkah ini, akan sangat membantu jika Anda memiliki pemahaman yang baik tentang tema Drupal 8. Anda dapat mengklik di sini untuk mengikuti Kelas Bertema Drupal 8 kami.

Untuk dapat mengikuti tutorial ini, Anda juga perlu menginstal Bootstrap dan membuat subtema dari folder CDN. Anda dapat mengikuti panduan kami di sini di posting kami sebelumnya.

Langkah 1. Konfigurasikan tema Bootstrap

Efek paralaks biasanya lebar penuh sehingga Anda perlu mengaktifkan opsi wadah Cairan dari menu tema Bootstrap.

• Buka "Tampilan" dan pastikan tema Bootstrap diatur sebagai default.
• Masuk ke pengaturan tema Bootstrap dan pilih drop-down Container.
• Centang kotak untuk "Wadah cairan".
• Klik "Simpan konfigurasi".

Langkah 2. Buat blok

Sekarang Anda perlu membuat beberapa blok khusus untuk tampilan. Dengan menggunakan blok khusus, Anda dapat membuat tema blok secara khusus.

• Buka Struktur > Tata letak blok > Jenis.
• Klik "Tambahkan jenis blok khusus".

• Beri label pada blok khusus "Paralaks":

• Sekarang buka "Tambahkan blok khusus" dan buat dua blok, satu untuk setiap gambar yang Anda gunakan. Saya menyebut blok ini Parallax 1 dan Parallax 2.
• Atur wilayah ke konten dan simpan blok.

Sekarang Anda perlu menggunakan blok dasar khusus untuk menampilkan konten di antara gambar pada halaman tata letak blok. Juga, hapus semua blok yang telah Anda tempatkan di bilah sisi karena ini akan mencegah lebarnya menjadi 100%.

Langkah #3. Aktifkan debugging

• Sekarang aktifkan debugging jika Anda belum mengaktifkannya.
• Buka situs/default dan salin dan ganti nama default.services.yml menjadi services.yml pada baris 58 ubah debug menjadi true:

• Sekarang, untuk dapat melihat saran tema, tambahkan kode ini ke file subtema.tema Anda:

 /** * 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()); } }

• Nama fungsi harus sesuai dengan nama tema Anda. Menambahkan ini ke file tema Anda memungkinkan Anda untuk membuat tema blok khusus.
• Bersihkan semua cache dan jika Anda memeriksa situs sekarang, Anda akan melihat saran tema.
• Di Google Chrome, klik kanan pada wilayah dan pilih Periksa untuk mengakses alat inspektur:

• Tambahkan saran templat untuk blok paralaks di folder tema templat Anda subtema/templat/blok--bundel--parallax.html.twig
• Tambahkan kode ini ke file template:

 <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>

• Kode ini akan menata blok khusus paralaks yang Anda buat. Jika Anda perlu men-debug ini, Anda dapat menggunakan kint dari modul Devel.

Langkah #4. Gaya blok

Sekarang Anda perlu menambahkan CSS untuk menata blok.

• Buka /css/style.css Anda dan tambahkan kode ini:

 .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; } }

• Anda perlu memperbarui .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 agar sesuai dengan blok Anda:

Ini adalah kelas yang ditetapkan untuk blok khusus Anda. Jika Anda menamai blok Parallax secara berbeda, Anda harus memperbarui .parallax--parallax1 dan .parallax--parallax2.

Langkah #5. Tambahkan gambar dan ScrollMagic

• Buka tema Anda dan buat folder bernama /images/. Di sinilah Anda akan menyimpan gambar untuk efek paralaks.
• Tambahkan beberapa Javascript untuk membuat gambar bergerak sedikit. Untuk ini, Anda akan menggunakan ScrollMagic. Unduh dan ekstrak file dari GitHub:

• Sekarang buka tema Anda dan buat folder bernama /js/ dan pindahkan file-file ini ke dalam folder
  • animasi.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Sekarang Anda perlu menambahkan js khusus kami tambahkan parallax.js
• Anda sekarang perlu memberi tahu tema untuk memuat perpustakaan js. Untuk melakukannya, buka subtema/subtema.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

• Dan terakhir, tambahkan kode ini ke file parallax.js Anda:

 (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));

• Pastikan gambar yang Anda gunakan cukup besar untuk lebar maksimal yang ingin Anda tampilkan.
• Dan sekarang Anda harus memiliki efek gulir yang bagus yang telah Anda terapkan hanya pada blok khusus kami: