.
I used animate.css and wow.js for all the website animation. The first thing we need is to upload these files into css and js folders, then link them into header:
Kód:
<link rel="stylesheet" href="{$css_dir}animate.css" type="text/css" />
<script type="text/javascript" src="{$js_dir}wow.min.js"></script>
<script>new WOW().init();</script>
It’s a simple thing to apply animation on any element of the site, but it’s some issue with the homeslider. Animations don’t work for default mode of the bxSlider. It works for fade mode only.
So we need to apply fade mode to homeslider. Open file homeslider.js (js/modules/homeslider/js/homeslider.js) and set fade mode:
Kód:
if (!!$.prototype.bxSlider)
$('#homeslider').bxSlider({
useCSS: false,
maxSlides: 1,
slideWidth: homeslider_width,
infiniteLoop: homeslider_loop,
hideControlOnEnd: true,
pager: false,
mode:'fade',
autoHover: true,
auto: homeslider_loop,
speed: parseInt(homeslider_speed),
pause: homeslider_pause,
controls: true
});
Open your global.js file and set animation type and delay for homeslider content .homeslider-description h2 and .homeslider-description p‘ :
Kód:
$(document).ready(function() {
$('.homeslider-description h2').addClass('wow fadeInUp');
$('.homeslider-description p').addClass('wow fadeInUp');
$('.homeslider-description h2').css('-webkit-animation-delay', '0.2s');
$('.homeslider-description p').css('-webkit-animation-delay', '0.4s');
});
That’s all.
.
Přihlásit se
Registrovat
FAQ
Hledat
.
.