Swap sticky image on content scroll - custom markers plus enter and leave viewport events trick

This is a Bricks builder tutorial on how to swap or change images on content scroll. In this video I’ll teach you how to use the Bricks Builder Interactions feature in conjunction with custom markers to achieve that effect. No need for extra plugins or custom code JavaScript, only the Bricks builder, and a simple CSS.
-------------------------------------------------- EXTRAS!
The training file:
ooohboi.gumroa...
You might consider buying me a coffee if you find my work helpful for your business:
www.paypal.me/...

[@PicSta]

As commented on a previous video I'm happy you landed into the great world of Bricks. Now it's time to forget the limitations which Elementor has offered you for long time and use the best thing about Bricks. The CSS class system: Example! Instead of changing each Block-Card height to 100vh you could have made a class for this and attach the class for this. The big advantage will be, if you consider changing it later to say 90vh as you want the next content to show up early on to suggest there is more content (so please scroll). Without a class you must go to all blocks, adjust the value and so on. This is monkey business my booooiii!

[@fredtrivett]

Please, we need more great bricks tutorials like this one!

[@humberto_cabana]

Please!! more videos for bricks!! you are awesome!!

[@petrajovkov8622]

Hey Oooh Boi! I've been following your Elementor Tutorials since long time now and I am very happy to see you working with Bricks 🥳 Thank you for this very helpful tutorial!!!! Please keep on doing your creative work which helps so many people out there including me of course ✌

[@eduardopereira-fr5nw]

Man!!! You are a genius!! I see that you are gradually migrating to Bricks Builder (which in my opinion is far better than Elementor). Two questions about forms in Bricks: 1- How do I style checkboxes and radial fields? 2- How do I change the months in the DATE fields. Cause I need to change the language of the months to Portuguese. Many thanks for your videos!!!

[@John.Rearden]

This is fantastic content on interactions with Bricks. You should consider making more videos on the interactions feature of Bricks and showcase use cases which would highlight the interactions feature in all its glory. Cheers.

[@OscarObians]

Amazing! I was literally in need of this kind of design few days ago. So excited to see you on the Bricks bandwagon

[@NOALNOM]

This is Super Awesome mate! Now Bricks video tutorials are a Dream Team with the new super star Oooh Boi!!! 🏆🏆🏆

[@pixelnthings]

Great tutorial...love to see more content on Bricks Interactions..

[@KariposTheOne]

Thank you! Great to see you making Tutorials about Bricks Builder

[@rgurukumar]

As Usual You Have Posted A Fantastic Video Tutorial, On Your New Design Invention With Elementor. I Appreciate Your Hard Work, God Bless You.

[@eljaybos]

As usual a genius at work. Thanks Oooh Boi!

[@GeneralEnthusiast]

Nice. I like your style. It's super clear... Do more Bricks tuts

[@wotwot2]

I hope you're doing well. I've been a big fan of your plugin, Steroids for Elementor, and have used it to build quite a few websites. Recently, though, I've been trying to enable Elementor containers on my sites, and I've run into a bit of a snag. I've found that my existing layouts, which were all created using your plugin, seem to break when I enable containers. This makes the migration process difficult because it's hard to retain the original design of the websites during the switch. I'm really curious, do you have any plans in the pipeline to make this migration process smoother and more seamless for us, your users? If you could offer any guidance or solutions on how we could maintain our original designs during the transition, that would be incredibly helpful. Thank you so much for your time, and keep up the fantastic work. Looking forward to your response.

[@LudovicCharlier]

Did you find a solution ? I setup Steroids for Elementor on a lot of websites and I don't know what to do.

[@zeeshansiddiqui5801]

Great tutorial. Please continue making such brilliant stuff.

[@thewebstylist]

Always fantastic content OB! Curious is Bricks your fav WP page builder now days?

[@tandaramandaraba]

Im fucking love you man! :D one of the best tut for lovely bricks ❤

[@FeyTheKing]

Great tuts.. don't ever stop keep keeping it up. By the way where do you download the images you use in ur tuts?

[@haroonahmad1416]

great tutorial , how can we do similar with the elementor ? should have elementor version of video as well :)

[@marclegoux4615]

Hey! Can I ask why you switched to Bricks from Elementor? Will you continue doing Elementor videos? Thanks

[@sumerianbrother]

Quality stuff. Much appreciated! 👌🙏

[@odinaka_joshua]

Keep em coming Oooh Boi 🔥👏

[@elevateyoursoul8]

Can Do I tha same effect on elementor pro? i need this beautiful features :) thank you for your great work!

[@mirzaumairfarooq]

Genius. Thanks Oooh Boi!

[@mdyeasin6562]

Wow very nice and helpfull video for me😀😀😀😀

[@davidsanchez370]

Great video! Amazing work. I have a quick question, I'm trying to set a hero with a fixed background but it seems to be messing up the scrolling, especially when I get to the sticky image container. Seems like it's not scrolling smoothly, any ideas? Thanks! and love your work

[@sinchro]

Like it! But who needs in 2023 a web site effect that works on a desktop only? 80% of customer will browse your site from mobile phone.

[@odinaka_joshua]

Can I ask why you usually put your CSS class in the Custom CSS instead of Bricks default class manager above?

[@ljubov_studio]

Probably bad habit from Elementor days

[@OoohBoi]

I've noticed some issues when global classes used with the custom JS... but hence I actually didn't use any custom JS in this tutorial, yes I could have. Feel free to give it a shot, why not. Thanks!

[@marionpaolo319]

Does this still work on the latest version of Bricks?

[@DjLITO]

please more tutorials

[@stewtech]

Amazing!!

[@leokiss69]

Is this possible with Elementor?

[@mirzaumairfarooq]

please also make this tutorial for elementor builder. Thank You Oooh Boi

[@OoohBoi]

But Elementor doesn't have anything similar to the Bricks builder "Interactions" feature. With Elementor everything should be custom coded.

[@glencoe1266]

So whats better? Bricks or elementor? Ive gone back to using html+css+js and gsap.

[@OoohBoi]

It wouldn't be fair to answer that. Love them both, but Bricks is definitely faster and thus more pleasant to work with.

[@brunoaguilar689]

Any insight to achieve this kind of frontend functionality with elementor?

[@OoohBoi]

Well I guess the only solution would be a custom JS code. Way more complicated than this. To be honest, I'm not sure how long Elementor will be able to load new features - infrastructure-wise, and whether anything similar to Brick's Interactions will be available. Elementor developers do not listen to what users want/need, that's the fact.

[@brunoaguilar689]

@@OoohBoi Thanks for the information man. I really appreciate it

[@peteharrison3241]

Sorry, not directly about this video, I have found a problem that I reported as an Elementor bug, but turns out to be caused by your plugin. Not a big deal, but I'd like to report it to you, but cannot find where to report anything. Please dm me to allow me to show you the details

[@dileepbatchala1590]

Sir Can we make same in elementor?

[@OoohBoi]

No, I'm afraid not, Elementor is way behind Bricks builder. At least not with "tools" available by Elementor. You'll need to code everything in JS.

[@pdesignsconsult2144]

How do I do this in with Elementor?

[@OoohBoi]

Well, I guess some custom JS will be needed. Elementor is now AI powered, it should be way easier to custom code now.

[@haroonahmad1416]

can you create a video tutorial on it as well for elementor ? @@OoohBoi

[@cailynlynn8972]

Promo_SM ✋