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 enhance the visual and interactive experience of 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.
Additionally, I have 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.
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 seamlessly 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. Additionally, you can 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 seamlessly 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 enhance 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.