Skip to content

Commit 80a5e07

Browse files
DeveloperVaibhav1DeveloperVaibhav1
authored
Add files via upload
 💻 Tech Stack : - HTML for structure 🏗️ CSS for styling and animations 🎨 JavaScript for interactivity 🤖 jQuery to simplify DOM manipulation and event handling 💡 📱 Responsive Design : - Adapts beautifully to all screen sizes, from desktops to mobile devices. 📱📺 Responsive breakpoints and flexible layouts ensure a consistent user experience. 📏 🔧 Key Features : - Smooth Video Playback : - Integrated with Plyr for intuitive video controls. 🎬 Seamless Navigation : - Utilizes Owl Carousel for effortless navigation between videos. 🕹️ Loading Animation : - A sleek loader ensures a polished interface from the start. 🔄 🚀 This project was not only a fantastic learning experience but also a testament to the power of modern web development tools. Looking forward to leveraging these skills in future projects! 🌟
1 parent 7c629fc commit 80a5e07

File tree

8 files changed

+449
-0
lines changed

8 files changed

+449
-0
lines changed

‎app.js

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
$(document).ready(function() {
2+
const players = Array.from(document.querySelectorAll('.plyr')).map(p => new Plyr(p));
3+
4+
$(window).on('load', function() {
5+
$('#loader').fadeOut();
6+
});
7+
8+
players.forEach(player => {
9+
const videoElement = player.elements.video;
10+
11+
if (videoElement) {
12+
videoElement.addEventListener('click', () => {
13+
if (player.paused) {
14+
player.play();
15+
} else {
16+
player.pause();
17+
}
18+
});
19+
} else {
20+
console.error('Video element not found for player', player);
21+
}
22+
23+
player.on('play', () => {
24+
players.forEach(otherPlayer => {
25+
if (otherPlayer !== player) {
26+
otherPlayer.pause();
27+
}
28+
});
29+
});
30+
});
31+
32+
function adjustCenteredVideo() {
33+
$('.owl-carousel .item').each(function() {
34+
const videoElement = $(this).find('video')[0];
35+
if (videoElement) {
36+
if ($(this).hasClass('active')) {
37+
$(this).find('video').css({
38+
transform: 'scale(1.5)',
39+
transition: 'transform 0.3s ease',
40+
});
41+
} else {
42+
$(this).find('video').css({
43+
transform: 'scale(1)',
44+
transition: 'transform 0.3s ease',
45+
});
46+
}
47+
}
48+
});
49+
}
50+
51+
adjustCenteredVideo();
52+
53+
var owl = $('.owl-carousel');
54+
owl.owlCarousel({
55+
loop: true,
56+
margin: 10,
57+
nav: false,
58+
responsive: {
59+
0: {
60+
items: 1
61+
},
62+
768: {
63+
items: 2
64+
},
65+
1024: {
66+
items: 3
67+
}
68+
}
69+
});
70+
71+
owl.on('changed.owl.carousel', function(event) {
72+
players.forEach(player => player.pause());
73+
74+
setTimeout(() => {
75+
adjustCenteredVideo();
76+
77+
const playersInView = Array.from(document.querySelectorAll('.owl-item.active .plyr')).map(p => new Plyr(p));
78+
playersInView.forEach(player => {
79+
player.on('play', () => {
80+
playersInView.forEach(otherPlayer => {
81+
if (otherPlayer !== player) {
82+
otherPlayer.pause();
83+
}
84+
});
85+
});
86+
});
87+
}, 300);
88+
});
89+
});

‎fav logo.ico

96.4 KB
Binary file not shown.

‎index.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Dev_Vaibhav</title>
7+
<link rel = "icon" href = "fav logo.ico">
8+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel/dist/assets/owl.carousel.min.css">
9+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/owl.carousel/dist/assets/owl.theme.default.min.css">
10+
11+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/plyr.css">
12+
13+
<link rel="stylesheet" href="style.css">
14+
15+
<link href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap" rel="stylesheet">
16+
</head>
17+
<body>
18+
19+
<div class="loader-overlay" id="loader">
20+
<div class="loader"></div>
21+
</div>
22+
23+
<div class="carousel-container">
24+
<div class="carousel-heading">Video Carousel</div>
25+
26+
<div class="owl-carousel owl-theme">
27+
<div class="item carousel-item">
28+
<div class="center-box">
29+
<div class="animated-border-box-glow"></div>
30+
<div class="animated-border-box">
31+
<video class="plyr" id="video1" controls >
32+
<source src="video1.mp4" type="video/mp4">
33+
</video>
34+
</div>
35+
</div>
36+
</div>
37+
<div class="item carousel-item">
38+
<div class="center-box">
39+
<div class="animated-border-box-glow"></div>
40+
<div class="animated-border-box">
41+
<video class="plyr" id="video2" controls >
42+
<source src="video2.mp4" type="video/mp4">
43+
</video>
44+
</div>
45+
</div>
46+
</div>
47+
<div class="item carousel-item">
48+
<div class="center-box">
49+
<div class="animated-border-box-glow"></div>
50+
<div class="animated-border-box">
51+
<video class="plyr" id="video3" controls>
52+
<source src="video3.mp4" type="video/mp4">
53+
</video>
54+
</div>
55+
</div>
56+
</div>
57+
</div>
58+
</div>
59+
60+
<div class="footer">
61+
<span>Dev_Vaibhav | <a href="https://www.instagram.com/vaibhavsarkar_1/" target="_blank">Insta - vaibhavsarkar_1</a></span>
62+
</div>
63+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/plyr.js"></script>
64+
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
65+
<script src="https://cdn.jsdelivr.net/npm/owl.carousel/dist/owl.carousel.min.js"></script>
66+
<script src="loader.js"></script>
67+
<script src="app.js"></script>
68+
69+
</body>
70+
</html>

‎loader.js

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
document.addEventListener('DOMContentLoaded', function () {
2+
const loaderOverlay = document.createElement('div');
3+
loaderOverlay.classList.add('loader-overlay');
4+
5+
const loader = document.createElement('div');
6+
loader.classList.add('loader');
7+
8+
for (let i = 0; i < 4; i++) {
9+
const loaderBar = document.createElement('div');
10+
loader.appendChild(loaderBar);
11+
}
12+
13+
loaderOverlay.appendChild(loader);
14+
15+
document.body.appendChild(loaderOverlay);
16+
17+
const style = document.createElement('style');
18+
style.innerHTML = `
19+
.loader-overlay {
20+
position: fixed;
21+
top: 0;
22+
left: 0;
23+
width: 100%;
24+
height: 100%;
25+
background-color: rgb(0, 0, 0);
26+
display: flex;
27+
justify-content: center;
28+
align-items: center;
29+
z-index: 9999;
30+
}
31+
32+
.loader {
33+
display: flex;
34+
justify-content: center;
35+
width: 120px;
36+
height: 50px;
37+
background-color: rgba(0, 0, 0, 0.5);
38+
z-index: 1000;
39+
}
40+
41+
42+
.loader div {
43+
width: 12px;
44+
height: 100%;
45+
margin: 0 4px;
46+
background-color: rgb(238, 130, 130);
47+
box-shadow: 0 0 10px rgba(123, 72, 243, 0.5);
48+
animation: bar-animation 1.5s ease-out infinite;
49+
z-index: 1000;
50+
}
51+
52+
53+
@keyframes bar-animation {
54+
0% {
55+
height: 100%;
56+
background-color: rgb(238, 130, 130);
57+
}
58+
50% {
59+
height:-150%;
60+
background-color: white;
61+
}
62+
100% {
63+
height: 100%;
64+
background-color: rgb(238, 130, 130);
65+
}
66+
}
67+
`;
68+
document.head.appendChild(style);
69+
70+
window.onload = function() {
71+
setTimeout(() => {
72+
loaderOverlay.style.display = 'none';
73+
}, 2000);
74+
};
75+
});

0 commit comments

Comments
 (0)