Atmospheric Split-View Gallery

This Atmospheric Split-View Gallery creates an immersive, story-driven experience reminiscent of a digital scrapbook. It combines a full-screen horizontal slider with a “flip-card” mechanic to reveal hidden content. The visual style defines the component, utilizing CSS mix-blend-mode to fuse historical black-and-white photography with a grunge paper texture, creating a cohesive, vintage aesthetic.

Core Technique

The slider logic is built on a “sliding strip” technique. The main container (#absinthe) is given a width of 900vw (100vw × 9 pages). Instead of using CSS Transforms, this script updates the container’s class (.page0, .page1, etc.) to trigger a margin-left transition.

Visually, the vintage look is achieved by layering a green paper texture over the content using mix-blend-mode: overlay and multiply. This tints the underlying images without needing to edit the assets in Photoshop.

/* Moving the slider using negative margins */
#absinthe {
  width: 900vw;
  transition: margin 0.5s ease-in-out;
}

#absinthe.page0 { margin-left: 0vw; }
#absinthe.page1 { margin-left: -100vw; }
/* ...and so on for other pages */

/* Creating the texture effect */
.absinthe-overlay {
  background-image: url("paper-bg.jpg");
  mix-blend-mode: overlay; /* The magic blending property */
  filter: saturate(0.25) brightness(1.25);
  pointer-events: none; /* Allows clicking through the texture */
}

Customization

To add or remove slides, you must update both the CSS margin classes and the JavaScript configuration variables.

// JS Configuration
var pageStart = 0; 
var pageEnd = 8; // Change this if you add more slides

// CSS - Add new classes for extra pages
/*
#absinthe.page9 { margin-left: -900vw; }
*/

To change the color theme, update the CSS variable in the :root.

:root {
  --green: #4d8426; /* Main theme color */
}

Tips

1. Performance Refactoring: This code uses margin-left for animation, which triggers a browser layout reflow on every frame. For better performance, especially on mobile, refactor the CSS to use transform: translateX(-100vw) instead.

2. Swipe Dependency: The JavaScript includes event listeners for swiped-left, swiped-right, etc. These are not native DOM events. They rely on a lightweight library swiped-events.js by John Doherty. Ensure you include that micro-library, otherwise, touch gestures on mobile will not work.

3. Keyboard Navigation: The script uses evt.keyCode, which is deprecated. Modernize the keyboard handler using evt.code:

// Deprecated
// switch (keycode) { case 38: ... }

// Modern
switch (evt.code) {
  case "ArrowUp": nextPage(); break;
  case "ArrowDown": prevPage(); break;
}