Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough

Add Parallax Blocks to Drupal 8 With ScrollMagic

Parent Feed: 
Add Parallax Styled Blocks to Your Drupal 8 Theme

In this tutorial, I will explain how to use custom block types to create a Parallax effect in a Drupal 8 subtheme.

It would be preferable but not required for you to have a good understanding of Drupal 8 theming. You can click here to take the Drupal 8 Theming Class.

To be able to follow this tutorial, you need to install Bootstrap and create a subtheme from the CDN folder. You can follow our guide here in our earlier post.

Parallax effects are usually full width so you need to turn on Fluid container option from the theme menu.

  • Go to /admin/appearance Install and set the theme as default 
  • Enter settings and select the Container drop-down and tick the box and select save configuration.

01

  • Now you need to make some custom blocks for the display. By using custom blocks you can theme the blocks specifically.
  • Go to admin/structure/block/block-content/types and create a new block type called Parallax 

02

  • Label the custom block Parallax:

03

  • Now go to 'Add custom block' and create two blocks, one for each of the images you are using Parallax 1 and Parallax 2:

04

  • Set the region to content and save the blocks.

Now you need to use the custom basic blocks to display content between the images on the block layout page. Also, remove any blocks you have placed in the sidebars as this will prevent the width being 100%.

05

  • Now turn on debugging if you don't already have it enabled.
  • Go to sites/default and copy and rename default.services.yml to services.yml on line 58 change debug to true:

000

  • Now, to be able to see the theme suggestions, add this code to your subtheme.theme file:
/**
 * 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());
    }
}
  • The function name needs to match your theme name. Adding this to your theme file allows you to theme custom blocks.
  • Flush all caches and if you inspect the site now you should see theme suggestions.
  • In Google Chrome, right click on the region and select Inspect to access the inspector tool:

06

  • Add the template suggestion for parallax block in your templates theme folder subtheme/templates/block--bundle--parallax.html.twig
  • Add this code to the template file:
<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>

  • This code will style the parallax custom block you created. If you need to debug this you can use kint from the devel module.
  • Now you need to add the CSS to style the blocks. To do this, open your /css/style.css and add this code: 
.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;
   }
}

You will need to update  .block-block-content2b3d7746-776f-484c-8686-c0e00a3978b6 to match your block: 

007

This is the class assigned to your custom block.

  • And if you named your Parallax block differently, you will have to update .parallax--parallax1 and .parallax--parallax2. 
  • Now go to your theme and create a folder called images. This is where you will save the images for the parallax.
  • Add some Javascript to make the images move slightly. For this, you will use ScrollMagic. Download and extract the files from GitHub:

008

  • Now go to your theme and create a folder called js and move these files into the folder
    • animation.gsap.min.js
    • ScrollMagic.min.js
    • TweenMax.min.js
  • Now you need to add our custom js add parallax.js
  • You now need to tell the theme to load the js libraries. To do that, open ubtheme/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

  • And finally, add this code to your parallax.js file:
(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));
  • Make sure the images you are using are big enough for the max width you want to display. 
  • And now you should have a nice scrolling effect that you have applied only to our custom blocks:

Add Parallax Styled Blocks to Your Drupal 8 Theme

Congratulations now you know how to do the following in Drupal 8

  • How to add JS to your theme
  • Working with custom blocks
  • Applying CSS to your blocks

Finally, if you did use debugging you should disable it when the site goes live.


About the author

Daniel is a web designer from UK, who's a friendly and helpful part of the support team here at OSTraining.

Original Post: 

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web