@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-hall-of-fame-carousel {
overflow: hidden;
&__meta {
display: flex;
flex-direction: row;
gap: rem-calc(16);
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
@include margin-bottom( rem-calc(60) );
.heading,
.btn {
color: var( --text-color );
}
.heading {
margin-bottom: 0;
}
.btn {
margin-right: 0;
}
}
.swiper {
overflow: visible;
&.swiper-initialized {
display: flex;
}
&:not(.swiper-initialized) {
.swiper-wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.swiper-slide {
width: 100%;
@include bp(600px) {
width: 50%;
}
}
}
}
}
.swiper-slide {
display: flex;
}
.team-card,
.player-card {
width: 100%;
max-height: rem-calc(320);
position: relative;
overflow: hidden;
background: linear-gradient(to bottom, #00B7F2, #002D98);
display: flex;
flex-direction: row;
@include bp($md) {
max-height: rem-calc(395);
}
.level {
height: 100vh;
color: $white;
background-color: #002D98;
writing-mode: vertical-lr;
margin: 0;
text-align: center;
position: relative;
top: 50%;
left: 0;
transform: scale(-1) translate3d(0,50%,0);
pointer-events: none;
@include fluid-type(28, 50);
display: block;
padding: rem-calc(0 16);
@-moz-document url-prefix() {
transform: scale(-1) translate3d(0, 28.5%, 0);
}
}
picture {
min-width: rem-calc(100);
flex-direction: column;
position: relative;
left: rem-calc(-1);
display: none;
@include bp($md) {
display: flex;
}
@include bp($lg) {
min-width: rem-calc(220);
}
img {
height: 100%;
object-fit: cover;
object-position: center bottom;
}
}
&__meta {
width: 100%;
@include padding( rem-calc(40 32) );
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
@include bp($md) {
justify-content: flex-end;
}
.team-card__logo {
min-width: auto;
margin-bottom: rem-calc(16);
@include bp($md) {
margin-bottom: auto;
}
@include bp($lg) {
margin-left: auto;
}
}
picture {
display: flex;
flex-direction: column;
img {
height: 100%;
object-fit: cover;
}
}
p {
color: $white;
text-transform: uppercase;
margin-bottom: 0;
font-weight: 800;
line-height: 1.2;
&.team-card--competition {
@include fluid-type(14, 18);
@include margin-bottom( rem-calc(10) );
@include margin-bottom( rem-calc(16) );
}
&.team-card--position {
@include fluid-type(14, 84);
@include margin-bottom( rem-calc(10) );
line-height: 1;
}
&.team-card--position-text {
@include fluid-type(14, 36);
line-height: 1;
}
}
.tag-container {
display: flex;
flex-direction: row;
align-items: center;
gap: rem-calc(8);
flex-wrap: wrap;
@include margin-top( rem-calc(16) );
}
.tag {
@include fluid-type( 10, 10 );
line-height: 1.5;
letter-spacing: 1px;
margin-bottom: 0;
text-transform: uppercase;
padding: rem-calc(5 10);
border: 1px solid $white;
font-weight: 500;
}
}
}
.player-card {
&.blue {
background: linear-gradient(to bottom, #005EB8, #242D68);
}
&.red {
background: linear-gradient(to bottom, #CD2F45, #6D0312);
.level {
background-color: #6D0312;
}
}
&.green {
background: linear-gradient(to bottom, #0CA755, #263477);
}
&.red-blue {
background: linear-gradient(to bottom, #005CB8, #CD2F45);
}
.level {
display: block;
padding: rem-calc(0 16);
}
.player-profile {
display: none;
&:before {
width: rem-calc(280);
height: rem-calc(280);
content: '';
background-color: #fff;
filter: blur(70px);
pointer-events: none;
position: absolute;
top: 50%;
left: 40%;
transform: translate3d(-50%, -50%, 0);
border-radius: 100%;
z-index: -1;
}
@include bp($lg) {
position: absolute;
aspect-ratio: 250/350;
bottom: 0;
left: 6%;
display: flex;
}
}
picture {
img {
height: 100%;
object-fit: contain;
object-position: center bottom;
}
}
.team-card__meta {
position: relative;
&:before {
width: 100%;
height: 100%;
content: '';
opacity: 0.15;
background-image: var(--bg-image);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
inset: 0;
pointer-events: none;
}
@include bp($lg) {
padding-left: rem-calc(220);
}
@include bp($xl) {
padding-left: rem-calc(200);
}
}
}
}
class HallOfFameCarousel {
/**
* Create and initialise objects of this class
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor
* @param {object} block
*/
constructor( block ) {
this.block = block;
this.swiper = null;
ScrollTrigger.create({
trigger: this.block,
start: 'top bottom',
end: 'bottom top',
onEnter: () => this.initialiseSwiper(),
});
}
initialiseSwiper() {
if ( this.swiper ) {
return;
}
this.swiper = new Swiper( this.block.querySelector( '.swiper' ), {
slidesPerView: 1.1,
spaceBetween: 12,
speed: 600,
navigation: {
nextEl: this.block.querySelector( '.swiper-button-next' ),
prevEl: this.block.querySelector( '.swiper-button-prev' ),
},
breakpoints: {
500: {
slidesPerView: 1.25,
spaceBetween: 28,
},
768: {
slidesPerView: 1.5,
spaceBetween: 28,
},
1200: {
slidesPerView: 2.1,
spaceBetween: 28,
},
1500: {
slidesPerView: 2.25,
spaceBetween: 28,
},
1600: {
slidesPerView: 2.5,
spaceBetween: 28,
},
}
});
}
}
document.querySelectorAll('.block-hall-of-fame-carousel').forEach((block) => {
new HallOfFameCarousel( block );
});
Animation: