How to add a "floating" effect to a background image? (to mimic movement)

Questions
1

So let’s say you set your background to be a forest, but static it might look a bit “dull” or boring, so the point here is to mimic movement or a hovering feeling. Is there something that can make some sort of zoom in, or movement to make the background appear as if you’re somewhat hovering on it? A bit like how there’s a parallax effect on desktop, something that can make it look more “alive”, both mobile as well.

I thought of just making a gif that loops, but gifs take a long time to load sometimes/are really heavy. Or maybe my app is just heavy and gifs should load alright… either way any ideas? :slight_smile:

2

It might be tricky with Bubble elements. But with some html it is pretty straight forward.

See example below:
ezgif-1-e177077569

This just has an HTML element in the center of the page covering the whole page (align to parent layout). and It has the following code. Play with it to see some other variations. For example other animations are possible: animation - CSS: Cascading Style Sheets | MDN

<style>.ken {
  animation: kenny 5s linear 2s infinite alternate;
  background-image: url('https://images.unsplash.com/photo-1548704686-f0a484c1bd67?crop=entropy&cs=tinysrgb&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NzQ2ODk3NTI&ixlib=rb-4.0.3&q=80');
  background-size: cover;
  background-position: center;
  height: 100vh;
  width: 100vw;
  opacity: 1;
  overflow: hidden;
  scale: 2;
}

@keyframes kenny {
  100% {
    opacity: 1;
    scale: 1;
  }
}</style>

<div class="ken"></div>

And here is the sample page if you want to check details:

And here is the resource I used. Thanks to these wonderful people: Moving Backgrounds | CSS-Tricks - CSS-Tricks

3

Nice work bro