Different background effects for each slide?

  • Hi there,

    Just a quick question – we would like to use a gradient mesh animation (like https://whatamesh.vercel.app/) to do different colored backgrounds for each slide. We were thinking of creating styles that could be applied to each slide (or classes within each slide if that’s possible). Would something like this be possible?

    Thanks!

Viewing 1 replies (of 1 total)
  • Plugin Author simonpedge

    (@simonpedge)

    Well with some CSS code and absolute positioning this should be possible.

    So in your slide content you will have:

    <div class='gradient-wrapper'>
   <canvas ...
</div>
<div class='slide-content'>
   ... slide content here ...
</div>

    And then you will need some CSS:

    .owl-item .gradient-wrapper {
   position:absolute;
   top:0px;
   left:0px;
   width:100%;
   height:100%;
   z-index:1;
}
.owl-item .slide-content {
   position:relative;
   z-index:2;
}

    So this will make the gradient DIV container cover the full-width & height of the slide content area. You will probably also want to use the ‘Min Height‘ setting to ensure your slides have a consistent height.

    • This reply was modified 2 years, 4 months ago by simonpedge.
Viewing 1 replies (of 1 total)
  • The topic ‘Different background effects for each slide?’ is closed to new replies.