Applying animation to upper background image

[kgpthemex]

Hi Everyone,

So I must say, I love the feature in cornerstone that enables you to add an upper and lower background. It would be awesome if you could apply a fade in affect to the upper background instead of the column itself. I inspected the code and it seems the backgrounds are being applied to their own divs.

Is this possible?

[Prasant]

Hello @kgpthemex,

Thanks for reaching out.

For now you will have to make the changes using some CSS. I suggest you to add a CSS class under Section > Customize > Setup > Class. After that add following CSS under X/Pro > Theme Options > CSS:

.animation .x-bg {
    opacity: .5;
    animation-duration: 3s;
    animation-name: slidein;
}

@keyframes slidein {
  from {
    margin-left: 100%;
    width: 300%; 
  }

  to {
    margin-left: 0%;
    width: 100%;
  }
}

Over here, please change the Class name animation as per your requirement. I suggest you to prefix section class name as shown in above code.

1- I have found the proper CSS code selector using the Chrome browser Developer Toolbar: https://www.youtube.com/watch?v=wcFnnxfA70g

2- For the CSS code itself, I suggest that you get started with this tutorial: https://www.youtube.com/watch?v=yfoY53QXEnI

Thanks.

[kgpthemex]

@Prasant, thank you so much!

This is pretty close to what I’m looking for. I was actually trying to replicate the slide in from top, and I was able to adjust the CSS to get close to it. But there still a difference between the native feature and the one you suggested. Can using the transform property be a better fit?

Also, I noticed that this particular css triggers the moment you load the page while the column one triggers when you access the viewport. Is this via JS?

Thanks

[ruenel]

Hello @kgpthemex,

Thanks for updating in! @Prasant gave an alternative solution to mimic the fade in effect since this is not a native feature of the upper and lower background image. Most probably, transform property will have a different effect.

And yes the feature in the column is triggered by JS events which happens when you scroll the page and as the column appear in your browser view.

Please note that custom coding is outside the scope of our support. We may provide a little code and that is to get you started with the customization that you have in mind. Issues that might arise from the use of custom code and further enhancements should be directed to a third party developer.

Regards.

[kgpthemex]

@RueNel, thanks for confirming.

Speaking of features, is there a section devoted to voting on features? If not, I would request this as a feature lol.

[christian]

Regretfully, we currently do not have a feature request area but I’ll take note of your feedback.