• Eine Überschrift

  • Eine Überschrift

    mit einer Subüberschrift.

  • Eine Überschrift

  • Eine Überschrift

Parallax on Fullwidth Slider

  1. First : see here on GitHub that little parallax script : https://github.com/tgomilar/paroller.js/
  2. Download: https://github.com/tgomilar/paroller.js/archive/master.zip
  3. on your child-theme (if there is no subfolder: js – create one) – Upload the js file ( jquery.paroller.js) to your child-theme/js folder
    or as i do on the right side the minified js file
  4. to enqueue this external js file put this (1) to your functions.php of your child-theme
  5. to have the settings on the given slideshow give to the slide-show a custom-class: parallax-effect
  6. this (2) comes too into your child-theme functions.php

So this script allows to influence background parallax and foreground ( i took here the whole caption content for it)

(1)

add_action( 'wp_enqueue_scripts', 'custom_parallax_script', 100 );
function custom_parallax_script() {
   wp_enqueue_script( 'custom-parallax', get_stylesheet_directory_uri().'/js/jquery.paroller.min.js', array('jquery'), 2, true );
}

(2)

function add_parallax_effect(){
?>
<script>
(function($){
	$(document).ready(function() {
			$('.parallax-effect .avia-slide-wrap').addClass('parallaxie');
			$('.parallaxie img').css("visibility", "hidden");
			$('.parallaxie').each(function() {
				var bgUrl = $(this).find('img').attr('src');
				$(this).css({
					'background-image'	: 'url('+ bgUrl +')',
					'background-size': 'calc(20px + 100vw) auto',
					'background-repeat': 'no-repeat',
				});
				$(this).attr({
					"data-paroller-factor":"0.3",
					"data-paroller-factor-xs":"0.1",
					"data-paroller-type":"background",
					"data-paroller-direction":"vertical",
				});
				$(this).find('.av-slideshow-caption').attr({
					"data-paroller-factor":"-0.6",
					"data-paroller-factor-xs":"0.1",
					"data-paroller-type":"foreground",
					"data-paroller-direction":"horizontal",
				});
			});
		$("[data-paroller-factor]").paroller();
	});
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'add_parallax_effect');