Thiết kế website giá rẻ

Question

-I looked for solutions but didn’t find any that worked

1.There is one more problem: when using mobile, the page cannot be scrolled

2.When the scroll is overridden the content of the following content

-I’m a beginner, I hope everyone can help me understand and solve the problem.

-Below is the code snippet that causes the problem of overriding content. And the error of not being able to scroll I think the error is in LocomotiveScroll, but I lack the knowledge to fix it


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    /*  config local font  */

    @font-face {
      font-family: 'neueFont-regular';
      src: url('/assets/neueFont/NeueMontreal-Regular.otf') format('truetype');
    }

    @font-face {
      font-family: 'neueFont-medium';
      src: url('/assets/neueFont/NeueMontreal-Medium.otf') format('truetype');
    }

    @font-face {
      font-family: 'fjalla';
      src: url('/assets/Fjalla/FjallaOne-Regular.ttf') format('truetype');
    }


    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      font-size: 62.5%;

      &.has-scroll-smooth {
        overflow: hidden;
      }

      &.has-scroll-dragging {
        user-select: none;
      }

      overflow-y: hidden;
    }

    body {
      font-family: 'neueFont-regular';
      font-size: 1.6rem;
      line-height: 1.6;
      color: #333;

      .has-scroll-smooth & {
        overflow: hidden;
      }
    }

    .fjalla {}

    .projects>div>div:last-child {
      margin-bottom: 0;
    }


    .c-scrollbar {
      position: absolute;
      right: 0;
      top: 0;
      width: 11px;
      height: 100%;
      transform-origin: center right;
      transition: transform 0.3s, opacity 0.3s;
      opacity: 0;

      &:hover {
        transform: scaleX(1.45);
      }

      &:hover,
      .has-scroll-scrolling &,
      .has-scroll-dragging & {
        opacity: 1;
      }

      [data-scroll-direction="horizontal"] & {
        width: 100%;
        height: 10px;
        top: auto;
        bottom: 0;
        transform: scaleY(1);

        &:hover {
          transform: scaleY(1.3);
        }
      }

    }

    .c-scrollbar_thumb {
      position: absolute;
      top: 0;
      right: 0;
      background-color: black;
      opacity: 0.5;
      width: 7px;
      border-radius: 10px;
      margin: 2px;
      cursor: grab;

      .has-scroll-dragging & {
        cursor: grabbing;
      }

      [data-scroll-direction="horizontal"] & {
        right: auto;
        bottom: 0;
      }

    }





    [data-scroll-container] {
      .has-scroll-smooth & {
        min-height: 100vh;
      }

      [data-scroll-direction="horizontal"] & {
        height: 100vh;
        display: inline-block;
        white-space: nowrap;
      }
    }

    [data-scroll-section] {
      [data-scroll-direction="horizontal"] & {
        display: inline-block;
        vertical-align: top;
        white-space: nowrap;
        height: 100%;
      }
    }
  </style>

  <script src="https://cdn.tailwindcss.com"></script>


</head>

<body data-scroll-container class="max-w-[1580px] mr-auto ml-auto">



  <main class="px-4  md:px-14 ">


    <!--  skills -->
    <section class="skills" id="skills">
      <div class="skill bg-white ">
        <div class="flex md:flex-row flex-col md:justify-between max-h-[450px]  h-[70vh]  p-2 bg-white">

          <div class="w-[20%] text-[14px] md:mb-0 mb-5">1</div>
          <div class="md:w-[50%] w-full">
            <div class="text-[28px] font-bold">Program languages</div>
            <div class="md:mt-10 mt-6">Javascript, Python, Rust</div>
          </div>
          <div class="md:w-[30%] w-full md:mt-0 mt-10 hover:saturate-0 transition-all">
            <img src="https://i.pinimg.com/736x/77/b5/2a/77b52a0a2fe2210beed8039017c5b5b7.jpg" alt=""
              class=" h-[368px] md:h-full w-full object-cover max-h-[480px]">
          </div>
        </div>
        <img src="/assets/images/line.svg" alt="" id="line" class="w-full inline-block   h-[1px] ">
      </div>

      <div class="skill bg-white">
        <div class="flex md:flex-row flex-col md:justify-between  max-h-[480px] h-[70vh]  p-2 bg-white">

          <div class="w-[20%] text-[14px] md:mb-0 mb-5">2</div>
          <div class="md:w-[50%] w-full">
            <div class="text-[28px] font-bold">Libraries / Frameworks</div>
            <div class="md:mt-10 mt-6">ReactJS, NextJs, Tailwindcss, Shadcn, NodeJS, ExpressJS,
              Zustand, SWR, GSAP(Basic)</div>
          </div>
          <div class="md:w-[30%] w-full md:mt-0 mt-10 hover:saturate-0 transition-all">
            <img src="https://i.pinimg.com/564x/b7/89/de/b789de965d64b26497a24534c25622dd.jpg" alt=""
              class=" h-[368px] md:h-full w-full object-cover max-h-[480px]">
          </div>
        </div>
        <img src="/assets/images/line.svg" alt="" id="line" class="w-full inline-block  h-[1px]  ">
      </div>
      <div class="skill bg-white">
        <div class="flex md:flex-row flex-col md:justify-between max-h-[480px]  h-[70vh]  p-2 bg-white">

          <div class="w-[20%] text-[14px] md:mb-0 mb-5">3</div>
          <div class="md:w-[50%] w-full">
            <div class="text-[28px] font-bold">Tools / Platform</div>
            <div class="md:mt-10 mt-6">Git, Github, VS Code, Docker(basic)</div>
          </div>
          <div class="md:w-[30%] w-full md:mt-0 mt-10 hover:saturate-0 transition-all">
            <img src="https://i.pinimg.com/736x/46/5e/a9/465ea96c45061d301c7a4461c2b8c300.jpg" alt=""
              class=" h-[368px] md:h-full w-full object-cover max-h-[480px]">
          </div>
        </div>
        <img src="/assets/images/line.svg" alt="" id="line" class="w-full inline-block  h-[1px]  ">
      </div>
      <div class="skill bg-white">
        <div class="flex md:flex-row flex-col md:justify-between  max-h-[480px] h-[70vh]  p-2 bg-white">

          <div class="w-[20%] text-[14px] md:mb-0 mb-5">4</div>
          <div class="md:w-[50%] w-full">
            <div class="text-[28px] font-bold">Databases</div>
            <div class="md:mt-10 mt-6">MYSQL, MongoDB</div>
          </div>
          <div class="md:w-[30%] w-full md:mt-0 mt-10 hover:saturate-0 transition-all">
            <img src="https://i.pinimg.com/736x/ca/52/4d/ca524d3001b4bb1c86683705a6d7eeab.jpg" alt=""
              class=" h-[368px] md:h-full w-full object-cover max-h-[480px]">
          </div>
        </div>
        <img src="/assets/images/line.svg" alt="" id="line" class="w-full inline-block  h-[1px]  ">
      </div>
    </section>


    <!--  contact -->
    <section class="py-[50px] contact" id="contact">
      <div class="text-[48px] font-semibold  ">CONTACT ME</div>

      <div class="flex items-start flex-wrap mt-10  leading-[42px]">
        <div class="w-1/2">Email</div>
        <div class="w-1/2">Instagram</div>
        <div class="w-1/2">Github</div>
        <div class="w-1/2">Facebook</div>
        <div class="w-1/2">Telegram</div>
        <div class="w-1/2">Resume</div>
      </div>


    </section>

    <img src="/assets/images/line.svg" alt="" id="line" class="w-full inline-block  h-[1px]  ">

    <!--  footer -->
    <section>

      <div class="text-[15px] font-semibold  text-center mt-10">2024</div>
    </section>


  </main>




  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/gsap.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Flip.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Observer.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollToPlugin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/Draggable.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/MotionPathPlugin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/EaselPlugin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/PixiPlugin.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/TextPlugin.min.js"></script>

  <!-- RoughEase, ExpoScaleEase and SlowMo are all included in the EasePack file -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/EasePack.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/CustomEase.min.js"></script>


  <!-- smoother -->

  <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll@beta/bundled/locomotive-scroll.min.js"></script>



  <script>

    const aboutBtn = document.querySelector("#aboutBtn");
    const projectBtn = document.querySelector("#projectBtn");
    const skillBtn = document.querySelector("#skillBtn");
    const contactBtn = document.querySelector("#contactBtn");

    const aboutTarget = document.querySelector("#about");
    const projectTarget = document.querySelector("#projects");
    const skillTarget = document.querySelector("#skills");
    const contactTarget = document.querySelector("#contact");

    const scroll = new LocomotiveScroll({
      el: document.querySelector("[data-scroll-container]"),
      smooth: true,
      // direction: "horizontal",
      // mobile: {
      //   breakpoint: 0,
      //   smooth: true,
      //   direction: "horizontal",
      // },
      // tablet: {
      //   breakpoint: 0,
      //   smooth: true,
      //   direction: "horizontal",
      // },
      // smartphone: {
      //   smooth: true,
      // },
    });
    document.addEventListener("DOMContentLoaded", (event) => {
      gsap.registerPlugin(
        Flip,
        ScrollTrigger,
        Observer,
        ScrollToPlugin,
        Draggable,
        MotionPathPlugin,
        EaselPlugin,
        PixiPlugin,
        TextPlugin,
        RoughEase,
        ExpoScaleEase,
        SlowMo,
        CustomEase
      );

      // Your code here
      gsap
        .timeline()
        .from(
          ".intro",
          {
            duration: 1,
            y: 20,
            opacity: 0,
            ease: "power3.out",
          },
          0.9
        )
        .from(
          ".role1",
          {
            y: 20,
            opacity: 0,
            duration: 1.8,
            ease: "power4.out",
          },
          0.5
        )
        .from(
          ".role2",
          {
            y: 20,
            opacity: 0,
            duration: 1.8,
            ease: "power4.out",
          },
          0.7
        );

      gsap.utils.toArray(".project").forEach((project, i) => {
        const img = project.querySelector("img");
        const projectName = project.querySelector(".project_name");

        ScrollTrigger.create({
          trigger: img,
          toggleActions: "play none none reverse",

          onEnter: () => {
            gsap.set(img, {
              height: "100%",
              transition: "height 1.2s ease",
            });
            gsap.from(projectName, {
              opacity: 0,
              y: 16,
              duration: 1,
              ease: "power4.out",
              delay: 0.8,
            });
          },
        });
      });

      ScrollTrigger.create({
        trigger: ".aboutme",
        start: "+=200px 100%",

        onEnter: () => {
          gsap.set(".aboutme_avt", {
            height: "100%",
            transition: "height 1.2s ease",
          });

          gsap.from(".aboutme_content", {
            duration: 1.4,
            y: 68,
            opacity: 0,
            ease: "power3.out",
            delay: 0.8,
          });
        },
      });

      gsap.utils.toArray(".skill").forEach((skill, i) => {
        ScrollTrigger.create({
          trigger: skill,
          start: "top top ",
          endTrigger: ".skill",
          pin: true,
          end: "+=50%",
          pinSpacing: false,
          ease: "power4.out",
          // onToggle: (self) => {
          //   const img = skill.querySelector("img");

          //   img.style.filter = "saturate(0) !important";
          // },
        });
      });

      aboutBtn.addEventListener("click", () => {
        list.style.display = "none !important";
        scroll.scrollTo(aboutTarget);
      });

      projectBtn.addEventListener("click", () => {
        scroll.scrollTo(projectTarget);
      });

      skillBtn.addEventListener("click", () => {
        scroll.scrollTo(skillTarget);
      });

      contactBtn.addEventListener("click", () => {
        scroll.scrollTo(contactTarget);
      });
    });
    window.addEventListener("beforeunload", function () {
      window.scrollTo(0, 0);
      location.reload();
    });

    window.addEventListener("resize", () => {
      const width = innerWidth;
      if (width > 768) {
        list.style.display = "none";
      }
    });

    const menuBtn = document.querySelector(".menu");
    const closeBtn = document.querySelector(".close");
    const list = document.querySelector(".menu_list");

    const body = document.querySelector("body");


    menuBtn.addEventListener("click", (e) => {
      list.style.display = "flex";
      body.style.overflow = "hidden !important";
    });

    closeBtn.addEventListener("click", (e) => {
      list.style.display = "none";
    });






  </script>



</body>

</html>

Thiết kế website giá rẻ

Danh mục

Gsap ScrollTrigger overrides other elements