Through this programme, British Esports will work with participants to develop a range of digital and life skills to support their development within the workplace whilst also responding to local skills needs as identified in the NELSIP.
The programme will enable local people to progress into new opportunities and gain skills to support career progression aligned to the key priorities in the Sunderland Digital Inclusion Plan. These skills include communication, leadership, organisation, self-confidence, time management, strategic thinking, data processing, analysis, speaking, listening, staying positive, aiming high, creativity and digital and technical skill development.
@import "../../resources/scss/util/variables";
@import "../../resources/scss/util/mixins";
@import "../../resources/scss/vendor/bootstrap/vendor/rfs";
.block-stats-images-content {
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
overflow: hidden;
&:not([class*="bg--"]) {
.container {
&:before {
width: 75%;
height: 1px;
content: '';
position: absolute;
top: 0;
left: 50%;
transform: translate3d(-50%,0,0);
pointer-events: none;
background-color: $primary;
}
}
}
.count-up-container {
align-items: center;
justify-content: center;
}
.container {
position: relative;
z-index: 5;
@include padding-top( rem-calc(140) );
@include padding-bottom( rem-calc(70) );
}
.heading,
.content-container,
.stat,
.stat-text {
color: var( --text-color );
}
.stat-container {
@include margin-top( rem-calc(60) );
.stat {
@include margin-bottom( rem-calc(60) );
}
.stat-text {
font-weight: 700;
margin-bottom: 0;
}
}
.content-container {
max-width: rem-calc(732);
margin-left: auto;
margin-right: auto;
@include margin-top( rem-calc(40) );
&:last-child {
margin-bottom: 0;
}
}
.btn {
@include margin-top( rem-calc(52) );
}
&__left,
&__right {
width: 33%;
height: 100%;
position: absolute;
top: 0;
left: 0;
opacity: 0.25;
pointer-events: none;
@include bp($lg) {
width: 20%;
opacity: 1;
}
.stat-image {
opacity: 0;
position: absolute;
display: flex;
flex-direction: column;
}
}
&__left {
.left-stat-image-0 {
top: 10%;
left: 30%;
}
.left-stat-image-1 {
top: 45%;
left: 0;
}
.left-stat-image-2 {
top: 55%;
right: -7.5%;
left: auto;
box-shadow: 0px 34px 184px rgba(3, 10, 50, 0.5);
}
.left-stat-image-3 {
top: 80%;
left: 7.5%;
z-index: 2;
}
.left-stat-image-4 {
top: 87%;
left: -7.5%;
z-index: 1;
}
}
&__right {
left: auto;
right: 0;
.right-stat-image-0 {
top: 15%;
right: 0;
left: auto;
z-index: 2;
}
.right-stat-image-1 {
top: 22%;
right: 15%;
left: auto;
z-index: 2;
box-shadow: 0px 34px 184px rgba(3, 10, 50, 0.5);
}
.right-stat-image-2 {
top: 50%;
right: auto;
left: -7.5%;
z-index: 2;
box-shadow: 0px 34px 184px rgba(3, 10, 50, 0.5);
}
.right-stat-image-3 {
top: 52%;
right: 0;
left: auto;
z-index: 1;
}
.right-stat-image-4 {
top: 85%;
right: 5%;
left: auto;
}
}
}
class StatsImagesContent {
constructor( block ) {
this.block = block;
let statImages = this.block.querySelectorAll( '.stat-image' );
statImages.forEach( image => {
gsap.set( image, {
autoAlpha: 0,
});
let tl = gsap.timeline({
paused: true,
});
tl
.to(image, { autoAlpha: 0, duration: 1, stagger: 0.1 })
.to(image, { autoAlpha: 1, duration: 2, stagger: 0.1 })
.to(image, { autoAlpha: 0, duration: 1, stagger: 0.1 }, 3)
ScrollTrigger.create({
trigger: image,
start: 'top bottom',
end: 'top top',
scrub: true,
animation: tl,
});
});
}
}
document.querySelectorAll('.block-stats-images-content').forEach((block) => {
new StatsImagesContent( block );
});
Animation: