Good-Production/triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added play buttons

Browse Source
This commit is contained in:
Aliaksei Karzhou
2024-07-11 16:40:45 +03:00
parent 0cd253a653
commit 0b70e62905
5 changed files with 204 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
assets/css/index.css
View File

@@ -1308,6 +1308,7 @@ h3 {
}
}
.reviews__slide-video {
position: relative;
height: 205px;
margin: 0 0 15px;
overflow: hidden;
@@ -1329,6 +1330,48 @@ h3 {
width: 100%;
height: 100%;
}
.reviews__slide-video::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
}
.reviews__slide-video::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
display: block;
width: 88px;
aspect-ratio: 1/1;
background: url(../img/icons/play.svg) center no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
transition: transform ease-in-out 0.1s;
cursor: pointer;
}
@media (max-width: 768px) {
.reviews__slide-video::after {
width: 64px;
}
}
.reviews__slide-video.active::before, .reviews__slide-video.active::after {
display: none;
}
.reviews__slide-video:hover::after {
transform: translateX(-50%) translateY(-50%) scale(1.06);
}
.reviews__slide-video:active::after {
transform: translateX(-50%) translateY(-50%) scale(0.98);
}
.reviews__slide-name {
margin: 0 0 8px;
font-weight: 600;
@@ -1721,6 +1764,7 @@ h3 {
}
}
.why-program__video-content {
position: relative;
height: 573px;
margin: 0 -48px 30px;
background-color: #878787;
@@ -1738,6 +1782,48 @@ h3 {
height: 100%;
width: 100%;
}
.why-program__video-content::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba(0, 0, 0, 0.1);
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
cursor: pointer;
}
.why-program__video-content::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
display: block;
width: 88px;
aspect-ratio: 1/1;
background: url(../img/icons/play.svg) center no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
transition: transform ease-in-out 0.1s;
cursor: pointer;
}
@media (max-width: 768px) {
.why-program__video-content::after {
width: 64px;
}
}
.why-program__video-content.active::before, .why-program__video-content.active::after {
display: none;
}
.why-program__video-content:hover::after {
transform: translateX(-50%) translateY(-50%) scale(1.06);
}
.why-program__video-content:active::after {
transform: translateX(-50%) translateY(-50%) scale(0.98);
}
.why-program__video-text {
max-width: 812px;
font-weight: 500;

2
assets/js/main.js
View File

@@ -4,6 +4,7 @@ import './team.js';
import './faq.js';
import './nav.js';
import './modals.js';
import './reviews.js';
const maskOptions = {
mask: '+{7} (000) 000 00 00',
@@ -16,3 +17,4 @@ const phoneInputs = phoneInputClassNames
.reduce((acc, array) => [...acc, ...array], []);
phoneInputs.forEach((inputElement) => IMask(inputElement, maskOptions));

22
assets/js/reviews.js Normal file
View File

@@ -0,0 +1,22 @@
const reviewsSlideVideos = document.querySelectorAll('.reviews__slide-video');
const whyProgramVideoContent = document.querySelector('.why-program__video-content');
reviewsSlideVideos.forEach((videoEl) => {
videoEl.addEventListener('click', (event) => {
if (whyProgramVideoContent) whyProgramVideoContent.classList.remove('active');
reviewsSlideVideos.forEach((video) => {
if (video === event.currentTarget) {
video.classList.add('active');
} else {
video.classList.remove('active');
}
});
});
});
if (whyProgramVideoContent) {
whyProgramVideoContent.addEventListener('click', (event) => {
event.currentTarget.classList.add('active');
reviewsSlideVideos.forEach((video) => video.classList.remove('active'));
});
}

47
assets/scss/_l-reviews.scss
View File

@@ -31,6 +31,7 @@
}
&-video {
position: relative;
height: 205px;
margin: 0 0 15px;
overflow: hidden;
@@ -50,6 +51,52 @@
width: 100%;
height: 100%;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba($color: #000000, $alpha: 0.1);
backdrop-filter: blur(10px);
cursor: pointer;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
display: block;
width: 88px;
aspect-ratio: 1 / 1;
background: url(../img/icons/play.svg) center no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
transition: transform ease-in-out 0.1s;
cursor: pointer;
@include tablet {
width: 64px;
}
}
&.active::before,
&.active::after {
display: none;
}
&:hover::after {
transform: translateX(-50%) translateY(-50%) scale(1.06);
}
&:active::after {
transform: translateX(-50%) translateY(-50%) scale(0.98);
}
}
&-name {

47
assets/scss/_l-why-program.scss
View File

@@ -45,6 +45,7 @@
}
&-content {
position: relative;
height: 573px;
margin: 0 -48px 30px;
background-color: $grey;
@@ -61,6 +62,52 @@
height: 100%;
width: 100%;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 10;
background-color: rgba($color: #000000, $alpha: 0.1);
backdrop-filter: blur(10px);
cursor: pointer;
}
&::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
z-index: 11;
display: block;
width: 88px;
aspect-ratio: 1 / 1;
background: url(../img/icons/play.svg) center no-repeat;
background-size: cover;
transform: translateX(-50%) translateY(-50%);
transition: transform ease-in-out 0.1s;
cursor: pointer;
@include tablet {
width: 64px;
}
}
&.active::before,
&.active::after {
display: none;
}
&:hover::after {
transform: translateX(-50%) translateY(-50%) scale(1.06);
}
&:active::after {
transform: translateX(-50%) translateY(-50%) scale(0.98);
}
}
&-text {