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.
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.
Sie sehen gerade einen Platzhalterinhalt von Facebook. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr InformationenSie sehen gerade einen Platzhalterinhalt von Instagram. Um auf den eigentlichen Inhalt zuzugreifen, klicken Sie auf die Schaltfläche unten. Bitte beachten Sie, dass dabei Daten an Drittanbieter weitergegeben werden.
Mehr Informationen