Canvas Support

Replace preloader image

3 replies · opened Sep 14, 2016

LlawmotorsportsSep 14, 2016

Hello,

I read this: http://support.semicolonweb.com/forums/topic/replace-preloader/

But can you give me an idea on the code I'd need to be able to replace the image and change the transition style? (My image is a snowflake, so I'd like it to drop from the top down slowly)

I tried the data-loader-html in the body tag, Do I just use that tag as an HTML page or is there an easier way to do it?

SSemicolon WebSTAFFSep 16, 2016

Hello,

Currently, it is recommended to add Custom Preloaders using the data-loader-html Tag only since it woks seamlessly. Can you please provide us with the Image so that we can check it out and try providing you with a working solution for this. 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.

LlawmotorsportsSep 19, 2016

Thanks

SSemicolon WebSTAFFSep 20, 2016

Hello,

Unfortunately, your Image Type is not currently supported. The Kind of Effect you are planning to Apply for your Image can only be applied by using Multiple Images. Please check out the Example on Our Christmas Demos: http://themes.semicolonweb.com/html/canvas/demo-xmas.php .

Here is the CSS Code that made this Animation possible: 

.snowfall {
	background-image:	url('images/snow/s1.png'),
						url('images/snow/s2.png'),
						url('images/snow/s3.png');
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-animation: snow 10s linear infinite;
	-moz-animation: snow 10s linear infinite;
	-ms-animation: snow 10s linear infinite;
	animation: snow 10s linear infinite;
}

@keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-moz-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 400px 1000px, 200px 400px, 100px 300px;}
}

@-webkit-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

@-ms-keyframes snow {
	0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
	50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
	100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Please consider using this CSS Code to create the Desired Effect using Multiple Snow Flakes Images.

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

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