Hello there,
To modify the default main slide image animation, you’ll need to extend the default animation function provided by SuperSlides script we’re using in Sydney. See this documentation. Here’s is jQuery code I’ve made for you to scale the background image upon fading.
;(function($) {
$.fn.superslides.fx = $.extend({
fadeandscale: function(orientation, complete) {
var that = this,
$children = that.$container.children(),
$outgoing = $children.eq(orientation.outgoing_slide),
$target = $children.eq(orientation.upcoming_slide);
$target.css({
left: this.width,
opacity: 0,
backgroundSize: '100%',
display: 'block'
}).animate({
opacity: 1,
backgroundSize: '130%',
},
that.options.animation_speed,
that.options.animation_easing
);
if (orientation.outgoing_slide >= 0) {
$outgoing.animate({
opacity: 0
},
that.options.animation_speed,
that.options.animation_easing,
function() {
if (that.size() > 1) {
$children.eq(orientation.upcoming_slide).css({
zIndex: 2
});
if (orientation.outgoing_slide >= 0) {
$children.eq(orientation.outgoing_slide).css({
opacity: 1,
display: 'none',
zIndex: 0
});
}
}
complete();
});
} else {
$target.css({
zIndex: 2
});
complete();
}
}
}, $.fn.superslides.fx);
if ( $( "#slideshow.header-slider" ).length ) {
$('#slideshow.header-slider').superslides({
play: $('#slideshow.header-slider').data('speed'),
animation: 'fadeandscale',
animation_speed: 4000, // Animation speed
pagination: false,
});
}
})(jQuery);
To apply extra jQuery code above to your site, you can use the TC Custom JavaScript. Once installed, go To Appearance > Custom JavaScript. Then paste the following code into the provided box.
Do not forget to clear any applied cache before reloading your site, as it usually blocks new code additions to take effect. https://codex.www.ads-software.com/I_Make_Changes_and_Nothing_Happens
Regards,
Kharis
