Fixed Background Image Change After Scrolling To A Section

Viewed 280

I'm a front end intern and was asked to try and replicate a website mockup video which shows sliding content with a fixed background, but after reaching a certain section tag, the fixed background would switch to a different background. I'm using tailwind CSS to try and emulate the effect. Below is my way to emulating something which I think is similar:

<section class="bg-bg0 md:bg-bgB bg-fixed bg-no-repeat bg-center">

I achieve the effect by giving the sections tailwind css the aforementioned classes. When it reaches to the section I want to change backgrounds, the background is changed by switching the background class from bg-bgA to bg-bgB, and the effect is achieved, however on transition, the page lags TERRIBLY. Is there a more efficient way to go about achieving this effect? I want to apologize in advance if my solution is a dumpster fire, or if the way I ask is wrong.

1 Answers

Found out the issue, the background images were too large, decreasing them by 75% of their original size did the trick.

Related