Here is a small tip on how to make homeslider content animated. Examples of animation can be found in the following themes I’ve created: СRAFT and GLAM
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:
|
1 2 3 |
<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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
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 }); |
Ecommerce Development
Take your online store to the next level with BelVG ecommerce development
Visit the pageOpen your global.js file and set animation type and delay for homeslider content .homeslider-description h2 and .homeslider-description p‘ :
|
1 2 3 4 5 6 |
$(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.
Looking for an outstanding ready-made PrestaShop theme? Visit BelVG PrestaShop store and find a wide selection of modern design templates.
Partner With Us
Looking for a partner to grow your business? We are the right company to bring your webstore to success.
Talk to Igor
Oscar,
wow.js applies animation while the page is loading or scrolling.
Hi Lena,
I’ve got. wow is changed by animated
$(‘.homeslider-description h2’).addClass(‘wow fadeInUp’);
$(‘.homeslider-description p’).addClass(‘wow fadeInUp’);
$(‘.homeslider-description h2’).addClass(‘animated fadeInUp’);
$(‘.homeslider-description p’).addClass(‘animated fadeInUp’);
Thanks
Hi,
I´m working in localhost.
I set the configuration as in the post but only once has the effect on the images, when again the first image again, will no longer load the configuration
homeslider.js
$(document).ready(function(){
if (typeof(homeslider_speed) == ‘undefined’)
homeslider_speed = 500;
if (typeof(homeslider_pause) == ‘undefined’)
homeslider_pause = 3000;
if (typeof(homeslider_loop) == ‘undefined’)
homeslider_loop = true;
if (typeof(homeslider_width) == ‘undefined’)
homeslider_width = 2050;
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
});
$(‘.homeslider-description’).click(function () {
window.location.href = $(this).prev(‘a’).prop(‘href’);
});
});
global.js
$(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’);
});
Thanks.
Hi Oscar.
Please, provide your link to take a look at, for fade mode it should work.
Hi Lena,
I’ve done the steps and not working properly.
Only makes the effect on the images the first time that images change when restarts again, the first image is not doing.
Please, can you help me?
Thanks