Animation and parallax help

5 replies · opened Sep 29, 2019

SsupermanageSep 29, 2019

Hi guys,

  1. I have an issue with the animation. None of it is working I can't debug it.

  2. Also can you tell me how to parallax the entire image so no dark colour is shown whilst scrolling I want the image to scroll (it is tall enough)

  3. Do you have any demos for image shortcodes, I think that would be great because I am not sure how to add effects/overlay opacity/ show - hide caption on hover etc.

This is where my demo is:

https://abushah.in/lmt/

Thanks so much

SSemicolon WebSTAFFOct 1, 2019

Hello,

  1. Please let us know which specific elements you are facing issues with so that we can provide you with further assistance.

  2. You can use the HTML5 "data-" Attributes to define a Set of Styles. You can consider using the: data-bottom-top="background-position:0px 0px;" data-top-bottom="background-position:0px -300px;" on the Parallax Section and change the values accordingly. You can consider checking this cheatsheet for the available "data-" Attributes: https://ihatetomatoes.net/wp-content/uploads/2014/10/skrollr-cheatsheet-v02.png .

  3. This is currently not available. We are already in the Process of Adding more Image Functionalities and Design Features in the coming updates and will update you once it is available. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

SsupermanageOct 1, 2019

Regarding animations there are plenty of data-animate, however none of them are working. If you see the slider/image at top there is:

`<div class="swiper-slide dark" style="background-image: url('images/site/tasty-mixed-indian-grill.jpg'); background-position: center top;">
<div class="container clearfix">
<div class="slider-caption">
<h2 data-animate="fadeInUp">Great Performance</h2>
<p class="d-none d-sm-block" data-animate="fadeInUp" data-delay="200">You'll be surprised to see the Final Results of your Creation & would crave for more.</p>

There are more on the page, but none seem to work.

SSemicolon WebSTAFFOct 2, 2019

Hello,

The issue you are facing is definitely due to Customized Codes used on your Page as we have just checked the Default Files and everything seems to be working perfectly. Also, consider checking and fixing these HTML Validation error: https://validator.w3.org/nu/?doc=https%3A%2F%2Fabushah.in%2Flmt%2F .

Let us know if we can help you with anything else or if you find any further issues.

SsupermanageOct 2, 2019

OK so I have fixed it according to w3c validator but animation still not working.

SSemicolon WebSTAFFOct 4, 2019

Hello,

Can you please check the default files and let us know if the animations are not working on that files too? As this appears to be an issue with the Customized Codes and unfortunately, in-spite of checking extensively we are currently not able to find the exact reason for the animations not working. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard