ScrollMagic ile Drupal 8'e Paralaks Blokları Ekleyin

Bu eğitimde, Drupal 8 alt temanızda Paralaks efekti oluşturmak için özel blok türlerinin nasıl kullanılacağını açıklayacağım.

Bu adımları takip etmek, Drupal 8 temasını iyi anlamakta yardımcı olacaktır. Drupal 8 Tema Kursumuza katılmak için buraya tıklayabilirsiniz.

Bu öğreticiyi takip edebilmek için ayrıca Bootstrap kurmanız ve CDN klasöründen bir alt tema oluşturmanız gerekir. Rehberimizi daha önceki yazımızda buradan takip edebilirsiniz.

Aşama 1. Bootstrap temasını yapılandırın

Paralaks efektleri genellikle tam genişliktedir, bu nedenle Bootstrap tema menüsünden Akışkan kapsayıcı seçeneğini açmanız gerekir.

• "Görünüm"e gidin ve Bootstrap temasının varsayılan olarak ayarlandığından emin olun.
• Bootstrap tema ayarlarını girin ve Kapsayıcı açılır menüsünü seçin.
• "Sıvı kabı" kutusunu işaretleyin.
• "Yapılandırmayı kaydet"e tıklayın.

Adım 2. Blok oluştur

Şimdi ekran için bazı özel bloklar yapmanız gerekiyor. Özel blokları kullanarak blokları özel olarak temalandırabilirsiniz.

• Yapı > Blok düzeni > Türler'e gidin.
• "Özel blok türü ekle"yi tıklayın.

• Özel bloğu "Parallax" olarak etiketleyin:

• Şimdi "Özel blok ekle"ye gidin ve kullandığınız resimlerin her biri için bir tane olmak üzere iki blok oluşturun. Bu bloklara Paralaks 1 ve Paralaks 2 adını verdim.
• Bölgeyi içeriğe ayarlayın ve blokları kaydedin.

Artık blok düzeni sayfasındaki resimler arasındaki içeriği görüntülemek için özel temel blokları kullanmanız gerekiyor. Ayrıca, genişliğin %100 olmasını önleyeceğinden, kenar çubuklarına yerleştirdiğiniz blokları kaldırın.

Aşama 3. Hata ayıklamayı etkinleştir

• Şimdi etkinleştirmediyseniz hata ayıklamayı açın.
• Sitelere/varsayılana gidin ve 58. satırda default.services.yml dosyasını kopyalayıp services.yml olarak yeniden adlandırın hata ayıklamayı true olarak değiştirin:

• Şimdi tema önerilerini görebilmek için bu kodu subtheme.theme dosyanıza ekleyin:

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

• İşlev adının tema adınızla eşleşmesi gerekir. Bunu tema dosyanıza eklemek, özel blokları temalandırmanıza olanak tanır.
• Tüm önbellekleri temizleyin ve siteyi şimdi incelerseniz tema önerilerini görmelisiniz.
• Google Chrome'da, bölgeye sağ tıklayın ve denetçi aracına erişmek için Denetle'yi seçin:

• Paralaks bloğu için şablon önerisini şablonlar tema klasörünüze ekleyin subtheme/templates/block--bundle--parallax.html.twig
• Bu kodu şablon dosyasına ekleyin:

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

• Bu kod, oluşturduğunuz paralaks özel bloğunu şekillendirecektir. Bunu hata ayıklamanız gerekirse, Devel modülünden kint kullanabilirsiniz.

4. Adım. Blokları stilize edin

Şimdi blokları biçimlendirmek için CSS'yi eklemeniz gerekiyor.

• /css/style.css dosyanızı açın ve şu kodu ekleyin:

 .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'yı bloğunuzla eşleşmesi için güncellemeniz gerekecek:

Bu, özel bloğunuza atanan sınıftır. Parallax bloğunuzu farklı bir şekilde adlandırdıysanız, .parallax--parallax1 ve .parallax--parallax2'yi güncellemeniz gerekecektir.

Adım 5. Görüntüleri ve ScrollMagic'i ekleyin

• Temanıza gidin ve /images/ adlı bir klasör oluşturun. Paralaks efekti için görüntüleri kaydedeceğiniz yer burasıdır.
• Görüntüleri biraz hareket ettirmek için biraz Javascript ekleyin. Bunun için ScrollMagic kullanacaksınız. Dosyaları GitHub'dan indirin ve çıkarın:

• Şimdi temanıza gidin ve /js/ adlı bir klasör oluşturun ve bu dosyaları klasöre taşıyın.
  • animasyon.gsap.min.js
  • ScrollMagic.min.js
  • TweenMax.min.js
• Şimdi özel js eklemeniz gerekiyor parallax.js
• Şimdi temaya js kitaplıklarını yüklemesini söylemeniz gerekiyor. Bunu yapmak için subtheme/subtheme.libraries.yml dosyasını açın:

 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

• Ve son olarak, bu kodu parallax.js dosyanıza ekleyin:

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

• Kullanmakta olduğunuz resimlerin, görüntülemek istediğiniz maksimum genişlik için yeterince büyük olduğundan emin olun.
• Ve şimdi sadece özel bloklarımıza uyguladığınız güzel bir kaydırma efektine sahip olmalısınız: