Problem Header + parallax slider

Question

I found a Header template, this: http://themes.semicolonweb.com/html/canvas/block-hero-13.html

perfect for my need but it is too high, I changed from vh-100 to vh-50, perfect height but when the page loads there is a brusc scaling and movement of the text, here a short video:
https://www.youtube.com/watch?v=9uC7SwVi3Ko

This test I performed with the latest version of Canvas and without modifying any files.

Thanks for any help.

SemiColonWeb · Accepted Answer

Hello,

Thanks for your Patience!

This is actually the default behavior as everything is loaded according to when the JS is loaded on the Page and since you are using the .slider-parallax Class, there is noticeable shift for Parallax positioning. You can consider using the following CSS Code which is delay the Text Display in a more elegant way:
[ch_pre type="css"]#slider .vertical-middle {
opacity: 0;
transition: opacity .3s 1s ease;
}

.has-plugin-parallax #slider .vertical-middle {
opacity: 1;
}[/ch_pre]

Hope this Helps!

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

flymac · Answer

Hello, great idea, thank you very much!

Semicolon Web · Answer

Hello, Very Happy to Help! :) Do let us know if we can help you with anything else or if you find any further issues with Canvas.