<section class="supt-section-media-full supt-parallax-full-image -big">
<div class="supt-section-media-full__shadow"></div>
<img src="/sites/gv/files/flmngr/section-text-media.webp" alt="Section Media Full" class="supt-section-media-full__media supt-parallax-full-image__image" />
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6">
<div class="supt-section-media-full__wrapper">
<div class="supt-section-media-full__content supt-parallax-element">
<h2 class="supt-section-media-full__title supt-parallax-element__item">
Our customers are at the heart of everything we do
</h2>
<div class="supt-section-media-full__description">
<div class="supt-section-media-full__text supt-parallax-element__children">
<p>Our industry-leading security solutions are based on deep customer understanding and specialist local knowledge on an international scale.<br />Using the latest smart technology and innovation, we are able to provide a seamless customer experience that enables millions of families and small businesses to feel protected every day.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-media-full__background"></div>
</section>
No notes defined.
<section class="supt-section-media-full supt-parallax-full-image {{ modifiers|modifiersAttr }}" {{ attrs|attrs }}>
<div class="supt-section-media-full__shadow"></div>
{% if image %}
<img src="{{ path(image.src) }}" alt="{{ image.alt }}" class="supt-section-media-full__media supt-parallax-full-image__image"/>
{% elseif video %}
<video autoplay muted loop playsinline class="supt-section-media-full__media supt-parallax-full-image__image">
{% for source in video.sources %}
<source src="{{ path(source.src) }}" type="{{ source.type }}"/>
{% endfor %}
</video>
{% endif %}
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8{{ modifiers|contains('big') ? ' col-lg-6' : '' }}">
<div class="supt-section-media-full__wrapper">
<div class="supt-section-media-full__content supt-parallax-element">
{% if title %}
<h2 class="supt-section-media-full__title supt-parallax-element__item">
{{ title }}
</h2>
{% endif %}
<div class="supt-section-media-full__description">
{% if subtitle %}
<p class="supt-section-media-full__subtitle supt-parallax-element__item">
{{ subtitle }}
</p>
{% endif %}
<div class="supt-section-media-full__text supt-parallax-element__children">
{{ content }}
</div>
</div>
{% if cta %}
<div
class="supt-section-media-full__cta supt-parallax-element__item">
{# If cta is an array, display button-double, otherwise display button #}
{% if cta is array %}
{% include 'molecules/button-double/button-double.twig' with {
buttons: cta
} only %}
{% else %}
{% include 'atoms/buttons/button/button.twig' with cta only %}
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
</div>
</div>
<div class="supt-section-media-full__background"></div>
</section>
{
"modifiers": [
"big"
],
"title": "Our customers are at the heart of everything we do",
"content": "<p>Our industry-leading security solutions are based on deep customer understanding and specialist local knowledge on an international scale.<br/>Using the latest smart technology and innovation, we are able to provide a seamless customer experience that enables millions of families and small businesses to feel protected every day.</p>",
"image": {
"src": "/sites/gv/files/flmngr/section-text-media.webp",
"alt": "Section Media Full"
}
}
import { animate, onScroll } from 'animejs';
export class SectionMediaFull {
$element: HTMLElement;
$media: HTMLVideoElement | HTMLImageElement;
$shadow: HTMLElement;
$background: HTMLElement;
$content: HTMLElement;
isBig: boolean;
constructor($element: HTMLElement) {
this.$element = $element;
this.$media = $element.querySelector('video, img') as HTMLVideoElement | HTMLImageElement;
this.$shadow = $element.querySelector('.supt-section-media-full__shadow') as HTMLElement;
this.$background = $element.querySelector(
'.supt-section-media-full__background'
) as HTMLElement;
this.$content = $element.querySelector('.supt-section-media-full__content') as HTMLElement;
this.isBig = $element.classList.contains('-big');
// Scroll animation only for big sections
if (!this.isBig) return;
this.handleScrollAnimation();
}
handleScrollAnimation() {
// Parallax on image on scroll
animate(this.$media, {
scale: [1.3, 1],
y: ['-10%', 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'bottom top',
leave: 'bottom bottom',
sync: true,
}),
});
animate(this.$shadow, {
opacity: [1, 0],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center top',
leave: 'bottom bottom',
sync: true,
}),
});
animate([this.$background, this.$content], {
opacity: [0, 1],
ease: 'linear',
autoplay: onScroll({
container: document.body,
target: this.$element,
enter: 'center top',
leave: 'bottom bottom',
sync: true,
}),
});
}
}
.supt-section-media-full {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
@media (min-width: $breakpoint-lg) {
aspect-ratio: 1680/650;
}
&__shadow,
&__background {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 1;
}
&__shadow {
opacity: 0;
background: linear-gradient(0deg, rgba(1, 1, 1, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
&__background {
background: linear-gradient(180deg, rgba(1, 1, 1, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
}
&__media {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.2);
will-change: transform;
}
&__wrapper {
position: relative;
}
&__content {
display: flex;
position: relative;
z-index: 1;
flex-direction: column;
justify-content: center;
align-items: center;
gap: $spacing-4;
color: white;
text-align: center;
height: 100%;
min-height: 650px;
padding: $spacing-7;
z-index: 2;
@media (min-width: $breakpoint-sm) {
padding: 0;
}
}
&__title {
@extend %t-h2;
margin-bottom: 0;
}
&__description {
display: flex;
flex-direction: column;
gap: $spacing-2;
}
&__text {
@extend %t-body-m;
p:not(:last-child) {
margin-bottom: 10px;
}
}
&__subtitle {
@extend %t-h3;
font-weight: 500;
}
&__cta {
margin-top: $spacing-2;
}
.supt-button {
&__wrapper {
box-shadow:
8px 8px 16px 0px rgba(220, 221, 222, 0.3),
-8px -8px 16px 0px rgba(255, 255, 255, 0.3);
}
}
&.-big {
.supt-section-media-full__shadow {
opacity: 1;
}
.supt-section-media-full__background {
opacity: 0;
/* background: linear-gradient(180deg, rgba(1, 1, 1, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%); */
}
.supt-section-media-full__description {
@extend %t-body-m;
}
}
&.-image-top {
.supt-section-media-full__media {
object-position: top;
}
}
&.-image-y-25 {
.supt-section-media-full__media {
object-position: 50% 25%;
}
}
&.-image-x-65 {
.supt-section-media-full__media {
object-position: 65% 50%;
}
}
&.-big {
height: 100vh;
@media (min-width: $breakpoint-lg) {
aspect-ratio: unset;
}
.supt-section-media-full__text {
@extend %t-h4;
font-weight: 400;
}
}
}