Now is your last chance to buy a lifetime license before we switch to annual pricing. Existing licenses will be unaffected.
read more
Posted on June 11, 2023

Tutorial: How To Make A Sticky Image Columns Section In WordPress

hello world!

In this video tutorial, we'll create two different sticky image column sections for your WordPress website with Oxygen.

The first section contains a fading sticky image on one side and content on the second side. The fading effect occurs as the user scrolls down the page. To create this effect, we'll use some CSS positions, and some custom data-attributes, and the design will be made entirely with Oxygen elements and features.

Next, we'll create a second sticky image section that uses a transition effect to change the image as a user scrolls through the content on the page. To make this design, we'll create a custom animation using keyframes via some custom CSS, and then create an Intersect Observer in JavaScript.

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

Leave a Reply

Your email address will not be published. Required fields are marked *

Get Oxygen Today

Lifetime, unlimited site license

Copyright © 2024 Soflyy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram