Splash Media Group

Sticky Image Scrolling

Scroll Down to Find the Sticky Image Scrolling Section

This area is meant to display content sections on the left, and an image area on the right that stays still while you scroll, and changes depending on the content displaying next to it. It’s done using html blocks, CSS, and JavaScript.

Custom Data Attribute

Since a custom data attribute is necessary on the content containers, I’m unable to use standard WordPress blocks.

The data attribute is what controls which image is being displayed, and how the JavaScript takes it’s commands. The only way to convert this cowbell into standard WordPress blocks would possibly be to use additional JavaScript to inject the data attributes, which takes additional steps and time.

Standard Images

This animation uses standard WEBP images, and they all need to be the same size in order to fit properly.

In this example, each image is set to have the dimensions of 1000px by 1000px. In order for the content to stay in position, and avoid shifting awkwardly, each image needs to follow the same dimension rules. They can be any size you want (within reason) as long as they are ALL that size.

Lorem ipsum dolor sit elit.

Vestibulum vehicula efficitur felis nec auctor. In sed nisl scelerisque, finibus velit vitae, accumsan elit. Duis ut dui nec felis aliquet commodo. Maecenas nec sollicitudin nibh, quis tempor enim. Fusce id ante neque. Vestibulum gravida felis ac fringilla sagittis. Cras quam orci, dapibus sed diam a, pretium maximus enim.

Sed ac justo elit. Phasellus elit libero, tempus eget dapibus et, tempus in lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vulputate est ac augue volutpat, eu aliquet est sodales.

Lorem ipsum dolor sit elit.

This is just placeholder content to demonstrate how the animation ends and the content continues.

This animation is made to be flexible in the sense that it can placed anywhere on a webpage. Whether it’s the beginning, middle or end of a webpage, this animation should function as it does here.

In porta eget risus id blandit. Fusce vel nulla quis felis porttitor interdum blandit ac augue. Etiam hendrerit ultrices ante a pellentesque. In non volutpat ante, vestibulum aliquam lorem. Ut at iaculis quam. Etiam lobortis velit ante, quis ornare ligula sollicitudin quis. Vivamus pretium erat nec massa tempus tempus. Etiam ex dui, cursus et cursus et, pulvinar et leo. Donec eu feugiat ex, et semper ex.