@font-face {
font-family: Blinka;
src: url("Blinka.ttf") format("truetype"),
url("Casselin DEMO VERSION.ttf") format("truetype");
}
@font-face {
font-family: Casselin;
src: url("Casselin DEMO VERSION.ttf") format("truetype");
}
body,
.background,
.slide {
overflow: hidden;
background-color: black;
}
.background {
width: 99vw;
height: 98vh;
background-color: #000000;
z-index: 1;
}
.slide video {
position: relative;
width: 100%;
z-index: 2;
opacity: 1;
transition: opacity 2s ease;
}
.videos {
display: none;
}
.parallax-imgs {
display: none;
}
.slide_img_parts {
position: relative;
z-index: 10;
}
.slide_img_parts img,
p {
position: absolute;
z-index: 100;
transition: top 2s, left 2s, opacity 5s;
}
.text_Backgr_01 {
width: 110%;
height: 300px;
background: rgb(70, 70, 216);
box-shadow: 1px 1px 80px 15px;
opacity: 50%;
filter: blur(30px);
}
.text_Backgr_02 {
width: 110%;
height: 200px;
background: rgb(205, 71, 71);
opacity: 50%;
filter: blur(30px);
}
.text_Backgr_hngKng_01 {
width: 110%;
height: 300px;
background: rgb(255, 0, 0);
box-shadow: 1px 1px 80px 15px;
opacity: 50%;
filter: blur(70px);
}
.text_Backgr_hngKng_02 {
width: 50%;
height: 200px;
background: rgb(255, 187, 0);
opacity: 50%;
filter: blur(80px);
}
.phar_text_01,
.phar_text_02 {
position: absolute;
display: inline-block;
font-size: 100px;
font-family: Blinka;
font-size: 100px;
letter-spacing: 20px;
}
.phar_text_02 {
margin-top: 200px;
font-size: 200px;
letter-spacing: 20px;
width: 0px;
height: 200px;
text-wrap: nowrap;
overflow: hidden;
font-family: Casselin;
}
.ph_txt_01_paris {
color: rgb(246 66 200);
}
.ph_txt_02_paris {
color: rgb(249 217 73);
}
.ph_txt_01_london {
color: rgb(243, 34, 34);
}
.ph_txt_02_london {
color: rgb(207, 215, 249);
}
.ph_txt_02_hngKng {
color: rgb(255, 251, 0);
}
.ph_txt_01_hngKng {
font-size: 80px;
letter-spacing: 5px;
color: rgb(255, 0, 0);
}
/* Անիմացիա - տեքստի հայտնվելու ստվերը աջից */
.anim_text {
animation: text_anim 2s ease;
animation-fill-mode: forwards;
}
.shadow_image {
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
width: 200px;
height: 200px;
}
.shadow_image_anim_paris {
visibility: visible;
top: 270px;
left: -200px;
animation: shadow_imagee_paris 2s ease;
animation-fill-mode: forwards;
}
@keyframes text_anim {
100% {
width: 1005px;
}
}
@keyframes shadow_imagee_paris {
50% {
opacity: 1;
}
100% {
opacity: 0;
left: 805px;
}
}
.shadow_image_anim_london {
visibility: visible;
top: 170px;
left: 9%;
animation: shadow_imagee_london 2s ease;
animation-fill-mode: forwards;
}
@keyframes shadow_imagee_london {
40% {
opacity: 1;
}
55% {
opacity: 0;
}
100% {
opacity: 0;
left: 1122px;
}
}
.shadow_image_anim_hngKng {
visibility: visible;
top: 300px;
left: 6%;
animation: shadow_imagee_hngKng 2s ease;
animation-fill-mode: forwards;
}
@keyframes shadow_imagee_hngKng {
40% {
opacity: 1;
}
60% {
opacity: 0;
}
100% {
opacity: 0;
left: 1122px;
}
}
/* Նկարների դիրքը մինչ հայտնվելը։ */
.other_restrnt :nth-child(1) {
padding: 0;
top: 2000px;
}
.other_restrnt :nth-child(2) {
top: -1000px;
left: 886px;
}
.other_restrnt :nth-child(3) {
top: -1000px;
left: 195px;
}
.other_restrnt :nth-child(4) {
top: -1000px;
left: 1108px;
}
.other_restrnt :nth-child(5) {
top: -500px;
left: 775px;
}
.other_restrnt :nth-child(6) {
top: -500px;
left: 905px;
}
.other_restrnt :nth-child(7) {
top: 2000px;
opacity: 0;
}
.other_restrnt :nth-child(8) {
top: 2000px;
opacity: 0;
}
.other_restrnt :nth-child(9) {
top: -2000px;
}
.other_restrnt :nth-child(10) {
top: -2000px;
}
.other_restrnt_hngKng :nth-child(11) {
top: -2000px;
left: 70%;
}
.other_restrnt_hngKng :nth-child(12) {
top: -2000px;
left: 1%;
}
/* Առաջին սլայդի նկարների վերջնական դիրքը էկրանին 'transition' -ի միջոցով։ */
.paris_restrnt_After :nth-child(1) {
margin-top: 7px;
top: 0;
}
.paris_restrnt_After :nth-child(2) {
top: 0;
left: 900px;
}
.paris_restrnt_After :nth-child(3) {
top: 397px;
left: 209px;
}
.paris_restrnt_After :nth-child(4) {
top: 307px;
left: 1117px;
}
.paris_restrnt_After :nth-child(5) {
top: 328px;
left: 784px;
}
.paris_restrnt_After :nth-child(6) {
top: 295px;
left: 914px;
}
.paris_restrnt_After :nth-child(7) {
top: 350px;
opacity: 35%;
}
.paris_restrnt_After :nth-child(8) {
top: 220px;
opacity: 35%;
}
.paris_restrnt_After :nth-child(9) {
top: 360px;
}
.paris_restrnt_After :nth-child(10) {
top: 70px;
}
/* Երկրորդ սլայդի նկարների վերջնական դիրքը էկրանին 'transition' -ի միջոցով։ */
.london_restrnt_After :nth-child(1) {
margin-top: 8px;
top: 0;
}
.london_restrnt_After :nth-child(2) {
width: 1378px;
height: 667px;
top: 0;
left: 0;
}
.london_restrnt_After :nth-child(3) {
top: 312px;
left: 890px;
}
.london_restrnt_After :nth-child(4) {
top: 385px;
left: 53px;
}
.london_restrnt_After :nth-child(5) {
top: 332px;
left: 600px;
}
.london_restrnt_After :nth-child(6) {
top: 288px;
left: 688px;
}
.london_restrnt_After :nth-child(7) {
top: 140px;
left: -100px;
opacity: 35%;
}
.london_restrnt_After :nth-child(8) {
top: 280px;
left: -100px;
opacity: 35%;
}
.london_restrnt_After :nth-child(9) {
top: 200px;
left: 30%;
}
.london_restrnt_After :nth-child(10) {
top: -40px;
left: 23%;
}
/* Երրորդ սլայդի նկարների վերջնական դիրքը էկրանին 'transition' -ի միջոցով։ */
.hongKong_restrnt_After :nth-child(1) {
width: 1398px;
top: 0;
}
.hongKong_restrnt_After :nth-child(2) {
width: 755px;
top: 356px;
left: 334px;
}
.hongKong_restrnt_After :nth-child(3) {
width: 378px;
top: 521px;
left: 0px;
}
.hongKong_restrnt_After :nth-child(4) {
width: 152px;
top: 25px;
left: 1130px;
}
.hongKong_restrnt_After :nth-child(5) {
width: 645px;
top: 0px;
left: 754px;
}
.hongKong_restrnt_After :nth-child(6) {
width: 277px;
top: 0px;
left: 563px;
}
.hongKong_restrnt_After :nth-child(7) {
width: 202px;
top: 429px;
left: 1158px;
}
.hongKong_restrnt_After :nth-child(8) {
width: 235px;
top: 347px;
left: 838px;
}
.hongKong_restrnt_After :nth-child(9) {
top: 280px;
left: -100px;
opacity: 35%;
}
.hongKong_restrnt_After :nth-child(10) {
top: 200px;
left: 340px;
opacity: 35%;
}
.hongKong_restrnt_After :nth-child(11) {
top: 160px;
left: 30%;
}
.hongKong_restrnt_After :nth-child(12) {
top: 100px;
left: 20%;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="styles.css">
<title>Tourism slide</title>
</head>
<body>
<div class="background">
<!-- Բլոկ, որտեղ պետք է ցուցադրվեն սլայդները։ -->
<div class="slide">
<div class="slide_img_parts slide_img_parts-1" id="1"></div>
<video class="video-1" id="1"></video>
</div>
<!-- Սլայդների հետին ֆոնի վիդեոները։ -->
<div class="videos">
<video class="video-1" autoplay loop muted id="1">
<source src="London_at_nigght.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video class="video-2" autoplay loop muted id="2">
<source src="Hong-Kong_atnight.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<video class="video-3" autoplay loop muted id="3">
<source src="pariss_at_night.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
<!-- Սլայդների նկարները ըստ բլոկների։ -->
<div class="parallax-imgs">
<div class="slide_img_parts slide_img_parts-1 other_restrnt London" id="1">
<img decoding="async" style="z-index: 204;" class="" src="london/London_head.png">
<img decoding="async" style="z-index: 203;" class="" src="london/London_verev.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="london/london-aj.png">
<img decoding="async" style="z-index: 206;" class="imagee" src="london/london_nstaran_dzakh.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="london/london_her_nstaran_dzakh.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="london/london_nstaran_heru_aj.png">
<img style="z-index: 202;" class="text_Backgr_01">
<img style="z-index: 204;" class="text_Backgr_02">
<p style="z-index: 205;" class="phar_text_01 ph_txt_01_london imagee">LONDON</p>
<p style="z-index: 203;" class="anim_text phar_text_02 ph_txt_02_london imagee">SEARCYS</p>
<img style="z-index: 203;" class="shadow_image" src='text_shadow_right.png'>
</div>
<div class="slide_img_parts slide_img_parts-2 other_restrnt other_restrnt_hngKng Hong_Kong" id="2">
<img decoding="async" style="z-index: 202;" class="" src="hong-kong/hong_kong_head.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="hong-kong/hong_kong_seghan_dem.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="hong-kong/hong_kong_dzakh_nstaran.png">
<img decoding="async" style="z-index: 206;" class="imagee" src="hong-kong/hong_kong_aj_lustr.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="hong-kong/hong_kong_arastagh.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="hong-kong/hong_kong_lustr_dem.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="hong-kong/hong_kong_seghan_aj.png">
<img decoding="async" style="z-index: 204;" class="imagee" src="hong-kong/hong_kong_tsaghik.png">
<img style="z-index: 203;" class="text_Backgr_hngKng_01">
<img style="z-index: 204;" class="text_Backgr_hngKng_02">
<p style="z-index: 205;" class="phar_text_01 ph_txt_01_hngKng imagee">HONG-KONG</p>
<p style="z-index: 204;" class="anim_text phar_text_02 ph_txt_02_hngKng imagee">QURA-BAR</p>
<img style="z-index: 204;" class="shadow_image" src='text_shadow_right.png'>
</div>
<div class="slide_img_parts slide_img_parts-3 other_restrnt Paris" id="3">
<img decoding="async" style="z-index: 204;" class="" src="paris/Shangri-La-Paris_head.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="paris/paris-aj.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="paris/paris-nstaran-mot.png">
<img decoding="async" style="z-index: 205;" class="imagee" src="paris/paris-luyser-aj.png">
<img decoding="async" style="z-index: 205; visibility: hidden;" class="up-left imagee" src="paris/paris-luyser-dzak.png">
<img decoding="async" style="z-index: 204;" class="imagee" src="paris/paris-heru-nstaran.png">
<img style="z-index: 202;" class="text_Backgr_01">
<img style="z-index: 201;" class="text_Backgr_02">
<p style="z-index: 204;" class="phar_text_01 ph_txt_01_paris imagee">PARIS</p>
<p style="z-index: 204;" class="anim_text phar_text_02 ph_txt_02_paris imagee">SHANGRI-LA</p>
<img style="z-index: 204;" class="shadow_image" src='text_shadow_right.png'>
</div>
</div>
</div>
<script src="myscript.js"></script>
</body>
</html>
const slides = document.querySelectorAll(".videos video");
const slideHead = document.querySelector(".slide");
const slidesImgParts = document.querySelectorAll(
".parallax-imgs .slide_img_parts"
);
changeSlide("");
function changeSlide(direction) {
const slideImgBefore = slideHead.querySelector("video");
let nextSlideId =
parseInt(slideImgBefore.id) + (direction === "up" ? 1 : -1);
if (nextSlideId < 1) nextSlideId = slides.length;
if (nextSlideId > slides.length) nextSlideId = 1;
const nextSlide = document.querySelector(`.video-${nextSlideId}`);
const slideImgPartsBefore = slideHead.querySelector(".slide_img_parts");
let nextSlideIdImgsParts =
parseInt(slideImgPartsBefore.id) + (direction === "up" ? 1 : -1);
if (nextSlideIdImgsParts < 1)
nextSlideIdImgsParts = slidesImgParts.length;
if (nextSlideIdImgsParts > slidesImgParts.length)
nextSlideIdImgsParts = 1;
const nextSlideImgsParts = document.querySelector(
`.slide_img_parts-${nextSlideIdImgsParts}`
);
slideImgBefore.style.opacity = "0";
const imgsPartsTransformDelete = document.querySelector(
".slide .slide_img_parts"
);
imgsPartsTransformDelete.classList.remove(
"paris_restrnt_After",
"london_restrnt_After",
"hongKong_restrnt_After"
);
setTimeout(() => {
slideHead.innerHTML = "";
slideHead.appendChild(nextSlideImgsParts.cloneNode(true));
slideHead.appendChild(nextSlide.cloneNode(true));
document.querySelector(".slide video").style.opacity = "0";
setTimeout(() => {
const imgsPartsTransformAdd = document.querySelector(
".slide .slide_img_parts"
);
const imgClass = imgsPartsTransformAdd.classList;
imgClass.remove(
"paris_restrnt_After",
"london_restrnt_After",
"hongKong_restrnt_After"
);
if (imgClass.contains("Paris")) imgClass.add("paris_restrnt_After");
else if (imgClass.contains("London"))
imgClass.add("london_restrnt_After");
else if (imgClass.contains("Hong_Kong"))
imgClass.add("hongKong_restrnt_After");
const imgsPartsTransformText = document.querySelector(
".slide .slide_img_parts .anim_text"
);
imgsPartsTransformText.classList.remove("anim_text");
const imgsForShadow = document.querySelector(
".slide .slide_img_parts .shadow_image"
);
const imgShadowClass = imgsForShadow.classList;
imgShadowClass.remove(
"shadow_image_anim_paris",
"shadow_image_anim_london",
"shadow_image_anim_hngKng"
);
document.querySelector(".slide video").style.opacity = "1";
setTimeout(() => {
imgsPartsTransformText.classList.add("anim_text");
if (nextSlideIdImgsParts === 3)
imgShadowClass.add("shadow_image_anim_paris");
else if (nextSlideIdImgsParts === 1)
imgShadowClass.add("shadow_image_anim_london");
else if (nextSlideIdImgsParts === 2)
imgShadowClass.add("shadow_image_anim_hngKng");
//Ապահովում է անիմացիայի ավարտվելուց հետո
//նկարների պտույտը ըստ էկրանի վրա մկնիկի ուղղության։
const images = imgsPartsTransformAdd.querySelectorAll(".imagee");
document.addEventListener("mousemove", (e) => {
images.forEach((image) => {
const { clientX, clientY } = e;
const { left, top, width, height } =
image.getBoundingClientRect();
const centerX = left + width / 2;
const centerY = top + height / 2;
const angleX = (clientY - centerY) / 50;
const angleY = (clientX - centerX) / 150;
image.style.transform = `perspective(1000px) rotateX(${-angleX}deg) rotateY(${-angleY}deg)`;
});
});
}, 1500);
}, 500);
}, 2000);
}
//Ապահովում է 'scroll' -ի ժամանակ սլայդի փոփոխումը։
function debounce(func, delay) {
let timeoutId;
return function (...args) {
clearTimeout(timeoutId);
timeoutId = setTimeout(() => {
func.apply(this, args);
}, delay);
};
}
window.addEventListener(
"wheel",
debounce((event) => {
changeSlide(event.deltaY > 0 ? "up" : "down");
}, 500)
);
Russian 
Armenian