How To Make A Sticky Image Columns Section In WordPress With Oxygen
Join Elijah as he creates two different Sticky Image Column sections to display content for your WordPress website with Oxygen.
The first sticky section will contain a simple fade effect as the user scrolls down the page. This effect will be made entirely with Oxygen.
The second sticky section will use custom CSS and JS to perform a transition effect on the image as the user scrolls down the page. We'll use CSS keyframes and a JS Intersect Observer to create this effect.
For the code used in the video, please visit https://gist.github.com/Spellhammer/c....
Get Oxygen ➜ https://oxygenbuilder.com/
Subscribe ➜ https://oxygenbuilder.com/ytsubscribe
JOIN THE OXYGEN FACEBOOK GROUP FOR HELP & SECRET INFO ➜ https://oxygenbuilder.com/facebook
Table of Contents:
0:00 Introduction
1:32 Setting up the Sticky 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
Watch video How To Make A Sticky Image Columns Section In WordPress With Oxygen online without registration, duration hours minute second in high quality. This video was added by user Oxygen 11 June 2023, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,577 once and liked it 91 people.