Views Parallax - Views Vanilla JavaScript Parallax (VVJP)

The Vanilla Views suite F.L.A.S.H.C.R.P.T.B FlashCrptb is a collection of ten powerful Drupal modules designed to add visual and interactive features to Drupal Views using pure, lightweight Vanilla JavaScript. Originally developed as Paragraphs Bundles, these modules Accordion, Basic Carousel, 3D Carousel, 3D FlipBox, Hero, Lightbox, Parallax, Reveal, Slideshow, and Tabs.

I have also created a demo for each module: Accordion Demo, 3D Carousel Demo, Carousel Demo, 3D FlipBox Demo, Hero Demo, Lightbox Demo, Parallax Demo, Reveal Demo, Slideshow Demo, and Tabs Demo.
To get started, check out our Video Demo for a step-by-step guide on using the module effectively. Explore our mixed demos here: Live Demo One | Live Demo Two. The site for the live demo is built with the Solo Theme.

VVJ v2.x requires VVJ Core ^2.0.1 (composer require drupal/vvjp:^2.0.1 pulls it in automatically). Requires Drupal ^11.3 || ^12 and PHP 8.3+; Drupal 10 is not supported by 2.x. v2 runs front-end behavior in custom elements via the shared vvj_core foundation; token and JavaScript API details below reflect v2.

Overview

The Views Vanilla JavaScript Parallax module (machine name: vvjp) enables you to create visually engaging parallax effects for displaying content items on your Drupal site. This module integrates with the Views module, offering a new display style that you can select when creating or editing views. It utilizes pure vanilla JavaScript with no jQuery dependency, ensuring a lightweight and modern user experience. You can also create full-width parallax effects, similar to a hero full-width layout, if you have the correct layout configuration.

Features

• Parallax Effects: Renders content items with smooth parallax effects for an engaging visual display, customizable across different breakpoints.
• Customizable Height and Width: Allows users to define the section height using various units like viewport height (vh), pixels, percentage, em, and rem, and set the maximum width for the parallax content.
• Responsive Design: Includes breakpoints to ensure the parallax adapts to different screen sizes, with options to disable parallax at specific breakpoints.
• Scroll Effects: Choose from a variety of effects, including fade-in effects, to improve the visual transition of the parallax content.
• Overlay Options: Set a background color with adjustable opacity, with the ability to apply the background overlay to the entire image or only under the parallax content.
• Background Animation: Set the speed and easing function of the background animation to create dynamic visual effects.
• Lightweight and Fast: Uses vanilla JavaScript without jQuery dependencies for improved performance.
• CSS Library Integration: Option to enable the CSS library specifically for styling the parallax effects.

Accessibility

The Views Vanilla JavaScript Parallax module includes several accessibility features to ensure that your parallax effects are usable by all visitors, including those using screen readers. Features include:

• ARIA Roles and Properties: Proper ARIA roles and properties are used to provide context and state information to screen readers.
• Keyboard Navigation: Users can navigate through parallax content using keyboard shortcuts, ensuring full functionality without a mouse.
• Focus Management: Ensures that the currently displayed content is focused, providing a better experience for keyboard and screen reader users.

Configuration

After installing and enabling the module, you can configure it through the Views UI:

1. Parallax Speed: Set the speed of the parallax effect (e.g., 0.1 for slow, 2 for fast).
2. Background Position: Choose the position of the background image (e.g., center, top, bottom, left, right).
3. Overlay Color: Select a color overlay for the parallax background.
4. Overlay Opacity: Define the opacity level for the overlay.
5. Background Animation Speed: Set the speed of the background animation.
6. Background Animation Easing: Choose the easing function for the animation (e.g., ease, ease-in, ease-out, linear).
7. Scroll Effect: Select from various effects like fade, scale, rotate, 3D transformations, shadow, glow, smooth transitions, hover interactions, or combined effects.
8. Section Height: Define the height of the parallax section in viewport height units.
9. Available Breakpoints: Select the maximum screen width (in pixels) at which the parallax effect should be disabled. Selecting "none" will keep the parallax effect active on all screen sizes.

Custom Token for views header/footer from first row

In Views header/footer, if you add a field using Global: Text area or Global: Unfiltered text, there is an option called "Use replacement tokens from the first row."
The default tokens will not work in this case. Please use the custom tokens created by VVJP instead.
For example:

• The default token {{ title }} should be replaced with [vvjp:title].
• The default token {{ field_image }} should be replaced with [vvjp:field_image].

You can append :plain to the token to strip any HTML.

Example: [vvjp:title:plain]

Note: The [vvjp:*] tokens pull data directly from the rendered View fields.
Fields using complex rewrites (e.g., Global: Custom text with {{ tokens }}) are not supported by default for token replacement. Please use individual field tokens like [vvjp:title], [vvjp:field_image], etc.

v2 note: Token resolution is handled by the shared vvj_core.token_resolver service; the [vvjp:field] and [vvjp:field:plain] syntax is unchanged from v1.

Example Usage

1. Install and enable the Views Vanilla JavaScript Parallax module.
2. Create or edit a view in the Views module.
3. In the Format section, select Parallax from the available display styles.
4. Configure the various options available under the Format Settings to customize the parallax according to your needs.
5. Set the number of items to display in the Pager settings, keeping in mind that pagination does not work with this display style. It is recommended to limit the number of items for optimal performance.

Additional Information

• Dependencies: VVJ Core ^2.0.1 (installed automatically by Composer) and Drupal core's Views module. No other contributed modules.

Upgrading from VVJ 1.x

Update VVJ Core to 2.0.1 or later before running database updates, then update this module and all other VVJ modules to 2.x together (do not mix 1.x and 2.x on one site):

composer update drupal/vvjp --with-dependencies
drush updb -y
drush cr

The update hook converts views saved with the v1 option shape (numbers stored as strings, booleans as integers) to the v2 types so they pass the v2 schema; it is safe to run again. The update also repairs the stored Available breakpoints value in every view that uses the Parallax style; before it, the shipped example view caused an HTTP 500 on the page that displayed it.

Installation

1. Download and install the VVJP module from Drupal.org:
   

   composer require drupal/vvjp:^2.0.1

2. Enable the module through the Drupal admin interface or using Drush:
   

   drush en vvjp

3. Clear caches to ensure the new plugin is available:
   

   drush cr

Support and Contributions

If you encounter any issues or have suggestions for improvements, please open an issue in the module's issue queue. Contributions are welcome and appreciated!

Parallax - Developer & Site Builder Tips:

• Every view created with this plugin has a CSS class vvj-parallax placed alongside js-view-dom-id.
• You must choose "Row Style" as the format, with at least two fields.
• The first field must be a URL to an image. Under the formatter, you should select URL to image.
• All other fields will be grouped as the parallax content.
• All parallax views have the option to be active on all screens or collapsed into cards at specific breakpoints on small screens.
• The visible scrolled parallax content has the CSS class visible.

Module Limitation Notice: Grouping Field Feature

Please note that the current version of this module does not support the
Grouping Field feature available in Drupal Views. The
"Grouping Field" option allows you to group records by a specified field,
but this functionality is not compatible with the module's current implementation.

We recommend avoiding the use of this feature with this module to ensure
proper functionality and display of your Views.

Support and maintenance

Questions, ideas, and bug reports are welcome. Please use this project’s issue queue so discussions and solutions remain available to the Drupal community.

Maintainers monitor issues, but response times depend on availability.

Developed and maintained by Alaa Haddad of Flash Web Center, LLC.

AI disclosure: AI tools assisted with drafting and reviewing this project description. The maintainer verified the final content against the project source.