css-template_05

RSTRNTS անիմացիա։ Այն կարող է դառնալ ձեր կայքի հիմնական էջի առաջնային ֆոնը։ Կայքն այցելուների համար դարձրեք ավելի գրավիչ։

Overlay Image Overlay Image
				
					      @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)
      );

				
			
hyArmenian