section background image scroll effect for elementor and plain html js css

Question

main background images on this demo has a scroll effect how can this be accomplished in elementor and plain html etc? https://preview.themeforest.net/item/petcare-pet-boarding-and-care-centre-template-kit/full_screen_preview/25888025?_ga=2.175462244.719310231.1674703434-1639562640.1643255003

I tried having two separate divs and explored the sticky option and also absolute position. I am unsure how to customise css for elementor for example i am unsure what we use for elementor classes and how they are differentiated.

Take a look at wordpress.org/plugins/unlimited-elements-for-elementor it helps you build custom html widgets for elementor. Also you can use background-attachment: fixed property in css to achieve that. — Xander Selorm
– Xander Selorm, Commented Jan 27, 2023 at 13:09

Xander Selorm · Accepted Answer · 2023-01-27 13:13:04Z

You can use the background-attachment: fixed property in css to achieve this. Take a look at this codepen: fixed bg while scrolling

Code Snippet:

@import url('https://fonts.googleapis.com/css?family=Quicksand');
html,
body {
  height: 100%;
}

.wrapper {
  height: 100%;
  font-family: 'Quicksand', sans-serif;
  line-height: 1.5;
  word-spacing: 4px;
  letter-spacing: 1px;
}

.fixed-bg {
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 100%;
  width: 100%;
  color: white;
  text-align: center;
  display: table;
}

.fixed-bg h1 {
  display: table-cell;
  vertical-align: middle;
}

.scroll-bg {
  background-color: #0f0f0a;
  padding: 10px 70px;
  color: #676767;
}


/* first section */

.bg-1 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/dk3s266jb5klmba/bg1.jpg');
}


/* third section */

.bg-2 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/jcord1lxh30e02z/bg2.jpg');
}


/* fifth section */

.bg-3 {
  background-image: url('https://www.dl.dropboxusercontent.com/s/rsk15kp7azmsi27/bg3.jpg');
}

<div class="wrapper">
  <!-- wrapper div starts -->

  <div class="fixed-bg bg-1">
    <h1>Fixed Background scrolling</h1>
  </div>

  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna. Etiam sodales arcu at lectus porttitor accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur
      ridiculus mus. Curabitur id urna dolor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin et pharetra justo, quis suscipit risus. Maecenas tincidunt efficitur ex in pharetra.</h3>
  </div>

  <div class="fixed-bg bg-2">
    <h1>Fixed Background scrolling</h1>
  </div>

  <div class="scroll-bg">
    <h3>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec in dolor tempor, posuere mi id, eleifend magna. Nulla at lectus magna.</h3>
  </div>

  <div class="fixed-bg bg-3">
    <h1>Fixed Background scrolling</h1>
  </div>

</div>
<!-- wrapper div ends-->

When it comes to how to implement it in elementor, you can use unlimited elements to create a custom widget and then place it on your elementor page.

I hope this helps in any way. Cheers!

Collectives™ on Stack Overflow

section background image scroll effect for elementor and plain html js css

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related