ایجاد شده در ۲۶ مرداد ۱۴۰۲
با عرض سلام و خسته نباشید
چرا وقتی ترنسلیت به spanها میدم یا برای بالا آمدن صفحه ی سوم ترنسلیت میدهم؛ در ابتدا و زمان اسکرول به پایین به درستی کار میکند اما در زمان برگشت یعنی اسکرول به بالا اگر سرعت اسکرول بالا باشد، المنت‌ها کامل به مکان اصلی خود برنمیگردند؟(البته اگر اسکرول با سرعت پایین باشد این مشکل پیش نمیاد)
سوال دوم:
در همین مورد بالا که عرض کردم ؛ اومدم برای اون المنت هایی که در سرعت بالای اسکرول کامل به مکان خودشون برنمیگشتند ؛ تعریف کردم که در فلان بازه ی اسکرول همون ترنسلیت مکان قبلیشون که صفر بود رو بگیرن و مشکل حل شد؛ اما چون سریع اتفاق میفتاد خیلی زیبا نبود لذا اومدم بوسیله ی classlist یک کلاس به جای اینکه ترنسلیت رو مستقیم بوسیله ی .style.transform بدم تعریف کردم تا یک انیمیشن هم بهش بدم ولی مشکل اینجا بود که ترنسلیت در زمان پایین اومدن اسکرول کار میکرد ولی در زمان بالا رفتن رفتن اسکرول کار نمیکرد در حالی که بقیه ی مقدارها مثل scale به درستی کار میکردند.
چرا؟
کد رو هنوز کامل نکردم ولی فعلا اینجا برای سوالم میزارمش:
html> <html lang="fa-IR" dir="rtl"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="../assets/css/style.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.rtl.min.css" integrity="sha384-PRrgQVJ8NNHGieOA1grGdCTIt4h21CzJs6SnWH4YMQ6G5F5+IEzOHz67L4SQaF0o" crossorigin="anonymous"> <title>پارالاکسtitle> head> <body> <div class="position-fixed w-100 h-100"> <section class="firstPage fixed-top z-2"> <div> <div class="bg-sky">div> div> <div id="image" class="position-absolute top-0 w-100"> <img src="../assets/image/brown.png" alt="" class="w-100"> div> <div class="position-absolute top-50 start-50 h-25"> <h3>سایت منh3> div> section> <section class="secondPage fixed-top z-1"> <div class="bg-beige"> <h3 class="position-absolute top-50 start-50 h-25"> <span>سایتspan> <span>محبوبspan> <span>منspan> h3> <img src="../assets/image/logo.svg" alt="logo" class="w-25 position-absolute top-50 start-50 h-25" style="transform: scale(0);"> div> section> <section class="thirdPage bg-black" style="transform: translateY(100%);"> <div class="h-100 text-light text-center" style="background-color: rgb(17, 13, 13);"> <h3 class="pt-2">Hello parallaxh3> <figure class="h-50" style="transform: translateY(-100%);"> <img src="../assets/image/1.jpg" alt="car-red" class="w-50 h-75" style="margin-left: -6px;"> <img src="../assets/image/2.jpg" alt="car-black" class="w-25 h-50" style="margin-top: -30px;"> figure> div> section> div> <script src="../assets/js/para.js">script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous">script> body> html> ---------------------------------------------------------------- * { box-sizing: border-box; height: 100%; margin: 0; padding: 0; } body { height: 4300px; } .bg-sky { background-color: rgb(35, 144, 207); } .bg-beige { background-color: #9f8c76; } span { display: inline-block; } ---------------------------------------------------------------------------------------- 'use strict' const firstPage = document.querySelector('.firstPage'); const Mountain = document.querySelector('.firstPage div img'); const text_Of_First_Page = document.querySelector('.firstPage div h3'); const secondPage = document.querySelector('.secondPage'); const spans = document.querySelectorAll('.secondPage div h3 span'); const thirdPage = document.querySelector('.thirdPage'); const logoMe = document.querySelector('img[alt="logo"]'); const FIRST_PAGE_MAX_SCROLL = 500; const FIRST_PAGE_BEGIN_OPACITY = 200; const SECOND_PAGE_BEGIN_TRANSLATE = 650; const SECOND_PAGE_BEGIN_TRANSLATE_HORIZONTAL = 950; const SECOND_PAGE_BEGIN_SCALE = 1450; const THIRD_PAGE_BEGIN = 1600; document.addEventListener("scroll", function (event) { let scroll = window.scrollY; console.log(scroll); if (scroll <= FIRST_PAGE_MAX_SCROLL) { let myScroll = scroll / FIRST_PAGE_MAX_SCROLL; firstPage.style.opacity = 1; text_Of_First_Page.style.transform = `scale(${1 + myScroll})`; Mountain.style.transform = `scale(${1 + (0.1 * myScroll)})`; } if (scroll >= FIRST_PAGE_BEGIN_OPACITY && scroll <= FIRST_PAGE_MAX_SCROLL) { firstPage.style.display = "block"; spans[0].style.transform = 'translate3d(0, 0, 0)'; spans[1].style.transform = 'translate3d(0, 0, 0)'; spans[2].style.transform = 'translate3d(0, 0, 0)'; let opacityValue = FIRST_PAGE_BEGIN_OPACITY / scroll; firstPage.style.opacity = opacityValue; } else if (scroll > FIRST_PAGE_MAX_SCROLL) { firstPage.style.display = "none"; } if (scroll >= SECOND_PAGE_BEGIN_TRANSLATE && scroll < SECOND_PAGE_BEGIN_SCALE) { spans[0].hidden = false; spans[2].hidden = false; let tra = scroll - SECOND_PAGE_BEGIN_TRANSLATE; spans[0].style.transform = `translate3d(0, ${tra}px, 0)`; spans[2].style.transform = `translate3d(0, -${tra}px, 0)`; } if (scroll >= SECOND_PAGE_BEGIN_TRANSLATE_HORIZONTAL && scroll < SECOND_PAGE_BEGIN_SCALE) { logoMe.style.transform = "scale(0)"; spans[1].hidden = false; let tra2 = scroll - SECOND_PAGE_BEGIN_TRANSLATE_HORIZONTAL; spans[1].style.transform = `translate3d(-${tra2}px, 0, 0)`; } if (scroll >= SECOND_PAGE_BEGIN_SCALE && scroll < THIRD_PAGE_BEGIN) { spans[0].hidden = true; spans[1].hidden = true; spans[2].hidden = true; secondPage.style.transform = 'translateY(0)'; thirdPage.style.transform = 'translateY(100%)'; let scaleLogo = (scroll / SECOND_PAGE_BEGIN_SCALE * 9) - 9; logoMe.style.transform = `scale(${scaleLogo})`; } if (scroll >= THIRD_PAGE_BEGIN) { let translateYthis = THIRD_PAGE_BEGIN - scroll + 100; if (translateYthis >= 0) { let translateYthis2 = translateYthis; secondPage.style.transform = `translateY(${translateYthis2 - 100}%)`; thirdPage.style.transform = `translateY(${translateYthis2}%)`; } else { let translateYthis2 = 0; secondPage.style.transform = `translateY(${translateYthis2 - 100}%)`; thirdPage.style.transform = `translateY(${translateYthis2}%)`; } } })
