@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
.body.single-post,
.body.single-game {
.site-content {
contain: none;
}
.block-background-gradients {
display: none;
&:before {
content: none;
}
}
}
.block-background-gradients {
position: relative;
&:before {
width: 100%;
aspect-ratio: 1080/1920;
content: '';
position: absolute;
top: 0;
left: 0;
z-index: -1;
pointer-events: none;
background-repeat: no-repeat;
background-size: cover;
opacity: 0;
transition: 0.6s var(--ease);
transition-property: opacity;
@include bp($lg) {
aspect-ratio: 1920/1080;
background-size: contain;
}
}
&.active {
&:before {
opacity: 0.5;
}
}
&.left {
&:before {
transform: translate3d(0,-15%,0);
background-position: left center;
background-image: url('/wp-content/themes/british-esports/assets/images/bg-gradient--left.svg');
}
}
&.right {
&:before {
background-position: right center;
background-image: url('/wp-content/themes/british-esports/assets/images/bg-gradient--right.svg');
}
}
}
class BackgroundGradients {
/**
* @param {object} block
*/
constructor( block ) {
this.block = block;
this.swiper = null;
ScrollTrigger.create({
trigger: this.block,
start: 'top 80%',
end: 'bottom -80%',
toggleClass: {
targets: this.block,
className: "active",
},
});
}
}
document.querySelectorAll('.block-background-gradients').forEach((block) => {
new BackgroundGradients( block );
});