snowfall3 – Webers Testseite

Hello

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

_________

give a custom class to that section with the „video background“ – i use here: fade-video – and activate the overlay on that section. The values are not important.

The trick on this is to use a huge inset box-shadow for the generated overlay. The origin background-color is transfered as rgba to that box-shadow – starting with a alpha value of 1 and ending at 0 induced by the scroll progress.

To have a fixed videobackground we detect the position of the section – reaching the top position will change the position to fixed.

this should not be influenced

custom class is: fade-video. and header-height after scroll is for my example : 70px

The snippet

function video_background_fade_in_on_scroll() {
?>
<script>
window.addEventListener("DOMContentLoaded", function () { 
	(function($) {
		var trigger = $('.fade-video');
		var range = 400 ;
		var bgSectionColor = trigger.css('background-color');
		var newBGColor = trigger.length ? bgSectionColor.replace('rgb', 'rgba').replace(')', ',1)') : bgSectionColor ;
		trigger.css('clip-path', 'inset(0 0 0 0)');
		trigger.find('.av-section-color-overlay-wrap').css('height', '100%');    
		trigger.find('.av-section-color-overlay').css({
			'box-shadow': '0 0 0 5000px '+newBGColor+' inset',
			'background-color': 'transparent',
			'opacity': 'unset',
			'z-index': '1',
		});
		$(window).on('scroll', function () {
		    var st = $(this).scrollTop();
		    trigger.each(function () {
		        var offset = $(this).offset().top;
				var alphaValue = (1 - (st - offset + range )/range);
				var newRGBA = bgSectionColor.replace('rgb', 'rgba').replace(')', ', '+alphaValue+')');
				$(this).find('.av-section-color-overlay').css('box-shadow' , 'inset 0 0 0 5000px '+ newRGBA);
				if ( $(window).scrollTop() + 70 > offset  && $(window).width() > 768 ) {
					trigger.find('.av-section-video-bg').css({
						'position': 'fixed',
						'top': '70px',
					});
				}
				else {
					trigger.find('.av-section-video-bg').css({
						'position': 'absolute',
						'top': '0px',
					});
				} 
			});
		});
	})(jQuery);
});
</script>
<?php
}
add_action('wp_footer', 'video_background_fade_in_on_scroll', 999);

The background color will be transfered as rgba value with alpha : 1 to the overlay !

here in this case it is the same bg color as the section before – but this is not necessary.

If there are more than one section like this – we had to play those codes with index. No desire to play through this now. Besides, the performance is probably not that good with a background of this kind! You should probably also work with a debounce here.

Hello

this should not be influenced

The snippet

Kontakt

Telefon

E-Mail