Adresse
Webers Webdesign
Ludwig-Schopp-Straße 27
53117 Bonn
Webers Webdesign
Kontakt
Mit dem Laden der Karte akzeptieren Sie die Datenschutzerklärung von Google.
Mehr erfahren
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.
The snippet
custom class is: fade-video. and header-height after scroll is for my example : 70px
function video_background_fade_out_on_scroll() {
?>
<script>
window.addEventListener("DOMContentLoaded", function () {
(function($) {
var trigger = $('.fadeout-video');
var bgSectionColor = trigger.css('background-color');
var newBGColor = trigger.length ? bgSectionColor.replace('rgb', 'rgba').replace(')', ',0)') : 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 triggerHeight = trigger.outerHeight();
var alphaValue = triggerHeight > st ? (0 + (st/triggerHeight)) : 1;
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_out_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.