Change Init animation page effect

nano_pillao
Offline
Last seen: 11 months 1 week ago
Sat, 07/16/2016 - 01:34
#1
Change Init animation page effect

Hello Guys,

Could you tell me please where to change the main one-page init animation from cascade to a fade in effect?
Other thing is that I want to place various markers on the map, could yo help me with this?

Thanks,

Fernando

hattt13
Offline
Last seen: 1 week 3 days ago
Mon, 07/18/2016 - 11:31

hi there, This is our default template, you can refer to the following page: https://developers.google.com/maps/documentation/javascript/markers and https://developers.google.com/maps/documentation/javascript/examples/ico... the application to your site. Thanks

nano_pillao
Offline
Last seen: 11 months 1 week ago
Tue, 07/19/2016 - 03:58

Ok, thanks. And where can I change the intro reveal effect of ten page? I want it to be a fade in effect and not a cascade effect as is it by default.

cindy
cindy's picture
Offline
Last seen: 7 hours 29 min ago
Tue, 07/19/2016 - 11:38

Hi,

What do you mean by "the effect of ten page"? 

We do not understand which effect you are talking about

nano_pillao
Offline
Last seen: 11 months 1 week ago
Wed, 07/20/2016 - 03:04

Sorry, I mean "effect of THE page". I´m talking about the intro effect that reveals the page at first time you load it. Is this customizable? Can I change that intro effect to a, for example, fade-in effect?

linhpeter0508
linhpeter0508's picture
Offline
Last seen: 1 week 1 day ago
Wed, 07/20/2016 - 10:19

Hi there,

@Nano_pillao, you save this code to the last line style.css file:

.preloader {
-webkit-transition: all 2s ease 0.5s;
-moz-transition: all 2s ease 0.5s;
-ms-transition: all 2s ease 0.5s;
-o-transition: all 2s ease 0.5s;
transition: all 2s ease 0.5s;
}


.preloader.load-anim {
opacity: 0;
visibility: hidden;
}


.preloader.load-anim:before {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}


.preloader.load-anim:after {
-webkit-transform: translateX(0);
-moz-transform: translateX(0);
-ms-transform: translateX(0);
-o-transform: translateX(0);
transform: translateX(0);
}

nano_pillao
Offline
Last seen: 11 months 1 week ago
Thu, 07/21/2016 - 04:11

Thanks a lot, it worked as I was asking for. Now the intro effect is a Fade-in.

Log in or register to post comments