Add Parallax Nodes from a View to Drupal 8 With ScrollMagic

In this tutorial I will explain how I accomplished taking a listing of nodes that came from a View and created a Parallax effect using the Bootstrap theme from Drupal 8.

The code in this tutorial can be found on GitLab. 

To use the code in the repos, you can:

1. Clone the repos locally
2. Run composer install from the root folder
3. Run drush config:import -y 

I would like to refer to this article which explains how to Add Parallax Blocks to Drupal 8 With ScrollMagic. I got my ideas and most of the code from there.

You will need to have Drupal 8 installed with Views and a Bootstrap subtheme set up.

For this tutorial, I am using a simple Page content type that I created with 3 fields: Title, Body and Background Image.

You should then create a View that lists this Page content type. I am listing the Body field and Background Image field in my example. I am keeping my Page content type and View very simple for explanation purposes. But you can set up more complex Views and content types as you wish. You just need at least an image field (or you can place a background image to an existing content type field via CSS as well).

Step #1 - Configure the Bootstrap theme

Because Parallax effects are usually full width, you should turn on the Fluid container option in the Bootstrap theme menu.

• Enter your subtheme Boothstrap theme settings.
• Under General >> Container check the Fluid container box

Step #2 - Set up your Content Type and Views.

Here is my Page content type with 3 fields: Title (not show in in screenshot), Body and Background image

Here is my View. It's a pretty much standard View which just lists the Page content type and creates a page out of it. I am using the image field here as the background image for the Parallax. You can also use another field (text or whatever) and set a CSS background as the image.

Now create some Page content and go to the View page to see the listing of your content.

Step #3 - Style the View using CSS

Here is my CSS:

.view-homepage {

  .views-row { text-align: center; position: relative; overflow: hidden; height: 500px; }

  .views-field-field-background-image { position: absolute; width: 100%; height: 140%; }

  .views-field-body {

    position: relative; top: 50%;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #fff;
  }
}

Step #4 - Get the ScrollMagic files

Go to Github and download/extract library.

Now go to your theme folder and create a folder called /js/ and move these files into the folder

• animation.gsap.min.js
• ScrollMagic.min.js
• TweenMax.min.js
• and also manually create a blank parallax.js

You now need to tell the theme to load the js libraries. To do that, open your_theme/your_theme.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

Step #5 Add the Parallax JS code to parallax.js

(function ($) {
    'use strict';
    Drupal.behaviors.myBehavior = {
        attach: function (context, settings) {

            var controller = new ScrollMagic.Controller();

            $('.views-row').each(function (index) {

                var $bg = $(this).find('.views-field-field-background-image');
                var $content = $(this).find('.views-field-body');

                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: this,
                    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.

You should now have a nice parallax scrolling effect for each node in the View list.