<section class="supt-section-image-innovation ">
<div class="supt-section-image-innovation__shadow"></div>
<div class="supt-section-image-innovation__content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 supt-parallax-element">
<p class="supt-section-image-innovation__text supt-parallax-element__item">
</p>
</div>
</div>
</div>
</div>
<div class="supt-section-image-innovation__background"></div>
</section>
No notes defined.
<section class="supt-section-image-innovation {{ modifiers|modifiersAttr }}" {{ attrs|attrs }}>
<div class="supt-section-image-innovation__shadow"></div>
{% if image %}
<img src="{{ path(image.src) }}" alt="{{ image.alt }}" loading="eager"/>
{% elseif video %}
<video autoplay muted loop playsinline>
{% for source in video.sources %}
<source src="{{ path(source.src) }}" type="{{ source.type }}"/>
{% endfor %}
</video>
{% endif %}
<div class="supt-section-image-innovation__content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-sm-10 col-md-8 col-lg-6 supt-parallax-element">
{% if title %}
<h2 class="supt-section-image-innovation__title supt-parallax-element__item">
{{ title }}
</h2>
{% endif %}
<p class="supt-section-image-innovation__text supt-parallax-element__item">
{{ text }}
</p>
</div>
</div>
</div>
</div>
<div class="supt-section-image-innovation__background"></div>
</section>
/* No context defined. */
import { animate, onScroll } from 'animejs';
export class SectionImageInnovation {
private $element: HTMLElement;
private $media: HTMLVideoElement | HTMLImageElement;
private $shadow: HTMLElement;
private $background: HTMLElement;
private $content: HTMLElement;
constructor($element: HTMLElement) {
this.$element = $element;
this.$media = $element.querySelector('video, img') as HTMLVideoElement | HTMLImageElement;
this.$shadow = $element.querySelector('.supt-section-image-innovation__shadow') as HTMLElement;
this.$background = $element.querySelector(
'.supt-section-image-innovation__background'
) as HTMLElement;
this.$content = $element.querySelector(
'.supt-section-image-innovation__content'
) as HTMLElement;
this.setupScrollAnimation();
}
private setupScrollAnimation() {
// 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-image-innovation {
position: relative;
height: 100vh;
overflow: hidden;
&__shadow,
&__background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
}
&__shadow {
background: linear-gradient(0deg, rgba(1, 1, 1, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
}
&__background {
opacity: 0;
background: linear-gradient(180deg, rgba(1, 1, 1, 0.4) 0%, rgba(0, 0, 0, 0.6) 100%);
}
video,
img {
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.3);
}
&__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
justify-content: center;
align-items: center;
}
&__title,
&__text {
text-align: center;
color: $color-white;
}
&__title {
@extend %t-h2;
margin-bottom: $spacing-4;
}
&__text {
@extend %t-h4;
font-weight: 400;
}
&.-image-x-65 {
video,
img {
object-position: 65% 50%;
}
}
}