In this video tutorial, Elijah discusses creating two types of sticky image column sections for your WordPress website with Oxygen.
The first section will contain a sticky image that fades as the user reads the content and scrolls down the page. We'll use some CSS positions and custom data-attributes to create this effect. This section will be created entirely with Oxygen elements and features and doesn't require JavaScript.
The next sticky image section we'll create adds a transition effect that will change the image as the user scrolls down the page. We'll use some custom CSS to create a custom animation using keyframes and a JS Intersect Observer to perform the transition.
For the code used in the video, please visit https://gist.github.com/Spellhammer/cd7d9674ce484813e6cb9c3a76d2758b.
Video Table of Contents:
- 0:00 Introduction
- 1:32 Setting up the Sticky Image Column
- 4:40 Adding a Fade Effect
- 5:58 Setting up the Content Column
- 9:19 Adding Anchor Animations
- 12:27 Elevating the Design With a Transition Effect
- 12:40 Preparing the Sticky Column
- 13:14 Adding an Observation Class
- 16:00 Writing the Transition Effect's CSS
- 17:41 Creating the Javascript
- 19:25 Adding an Intersect Observer
- 22:00 Final Thoughts
Additional Resources:
- CSS Positions: https://developer.mozilla.org/en-US/docs/Web/CSS/position
- Using Data Attributes: https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes
- CSS keyframes: https://developer.mozilla.org/en-US/docs/Web/CSS/@keyframes
- Document.readyState: https://developer.mozilla.org/en-US/docs/Web/API/Document/readyState
- IntersectObserver: https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver
