ایجاد افکت پیمایش اختلاف منظر (با جلوه متن متضاد)

وقت آن است که دانش اختلاف منظر خود را با تمرینی جدید تازه کنیم، مردم! در آموزش امروز، ما قصد داریم یک انیمیشن پیمایش اختلاف منظر زیبا ایجاد کنیم و متن عنوان را در مقابل تصویر پشت آن قرار دهیم.

1. با نشانه گذاری HTML شروع کنید

نشانه گذاری شامل دو بخش خواهد بود:

• اولین بخش قهرمان به صورت بصری فقط شامل عنوان و تصویر نمایه می شود. اما در واقعیت، ما یک عنوان و یک عنصر wrapper قرار می دهیم که تصویر را محصور می کند و یک کلون/تکراری عنوان. منظور ما از کلون، محتوا و ظاهر آن با عنصر هدف یکسان خواهد بود.
• بخش دوم شامل محتوای اصلی صفحه خواهد بود. البته، شما می توانید بخش های بیشتری را در صفحات خود داشته باشید.

در اینجا نشانه گذاری مورد نیاز است:

1

<section class="section section-hero">

2

  <h1 class="h1 hero-title">Visual <br> Designer</h1>

3

  <div class="hero-img-wrapper">

4

    <img width="1308" height="1220" src="man-visual-designer.jpg" alt="">

5

    <div class="h1 hero-title-clone">

6

      Visual <br> Designer

7

    </div>

8

  </div>

9

</section>

10

<section class="section section-text">

11

  <div>...</div>

12

</section>

2. CSS را اضافه کنید

بیایید اکنون روی سبک های کلیدی تمرکز کنیم.

ما با آن اهداف در بخش قهرمان شروع می کنیم.

• عنوان سفید خواهد بود در حالی که ماهی قزل آلا شبیه سازی می شود.
• کلون کاملاً در داخل عنصر پوشش تصویر قرار می گیرد. آن top و left مقادیر موقعیت از طریق جاوا اسکریپت تنظیم خواهد شد. هدف نهایی این است که آن را در بالای سر در همان موقعیت قرار دهید. بیشتر در مورد آن در بخش بعدی. برای تحقق این امر، باید اطمینان حاصل کنیم که ترتیب انباشتگی آن بالاتر از سرفصل است. در مورد ما، این اتفاق زمانی رخ می دهد که لفاف بعد از عنوان می آید.
• عنصر wrapper تصویر خواهد بود overflow: hidden بنابراین کلون نمی تواند از مرزهای خود فراتر رود.

سبک های مرتبط:

1

/*CUSTOM VARIABLES HERE*/

2

3

.section-hero {

4

  display: flex;

5

  flex-direction: column;

6

  align-items: center;

7

  justify-content: center;

8

  max-width: 1000px;

9

  margin: 0 auto;

10

}

11

12

.section-hero .h1 {

13

  font-size: 20vmin;

14

  line-height: 0.9;

15

  font-weight: bold;

16

  text-align: center;

17

  text-shadow: 2px 2px 10px #1a1423;

18

}

19

20

.section-hero .hero-title-clone {

21

  position: absolute;

22

  color: var(--salmon);

23

}

24

25

.section-hero .hero-img-wrapper {

26

  position: relative;

27

  margin-top: -10vh;

28

  overflow: hidden;

29

}

30

31

.section-hero .hero-img-wrapper img {

32

  border-radius: 10px;

33

}

در مورد سبک های محتوای اصلی، یک جنبه مهم این است که تمام بخش های خواهر و برادر بعد از قهرمان باید دارای بالاتری باشند. z-index ارزش. به این ترتیب، عنوان پیمایش همیشه در زیر آن بخش ها خواهد بود.

در مورد ما، تمام چیزی که در زیر داریم یک تصویر پس زمینه ثابت با متن در بالای آن است. برای اطمینان از خوانایی متن، یک تصویر همپوشانی قرار می دهیم.

سبک های مربوطه:

1

.section-hero ~ .section {

2

  position: relative;

3

  z-index: 2;

4

}

5

6

.section-text {

7

  background: url(man-walking.jpg) no-repeat fixed center right / cover;

8

  margin-top: 20vh;

9

}

10

11

.section-text::before {

12

  content: "";

13

  position: absolute;

14

  top: 0;

15

  left: 0;

16

  right: 0;

17

  bottom: 0;

18

  background: rgba(56, 36, 52, 0.5);

19

}

20

21

.section-text div {

22

  position: relative;

23

  max-width: 700px;

24

  padding: 100px 0;

25

  margin: 0 auto;

26

}

27

28

.section-text p {

29

  margin-top: 20px;

30

}

3. جاوا اسکریپت را اعمال کنید

اولین کاری که باید انجام دهیم این است که کلون را در محل عنوان به این صورت قرار دهیم:

این باید زمانی اتفاق بیفتد که تمام دارایی های صفحه بارگذاری شده اند و در طول تغییر اندازه پنجره. در پروژه های خود، برای جلوگیری از این پرش تا زمانی که کلون موقعیت صحیح را به دست آورد، می توانید یک پیش بارگذاری یا چیزی شبیه به آن اضافه کنید.

در آن نقطه، ما با آن تماس می گیریم setPos() عمل کنید و این طرح را دنبال کنید:

• چنگ زدن به x و y موقعیت های عنوان نسبت به درگاه دید.
• چنگ زدن به x و y موقعیت عنصر پوشش تصویر نسبت به درگاه دید.
• را تنظیم کنید top و left مقادیر ویژگی کلون با کم کردن مقادیر عنوان از مقادیر wrapper. به خصوص برای جلوگیری از انحراف کلون ما در حالی که به طور ناگهانی اندازه ارتفاع پنجره را تغییر می دهیم، باید از نهایی نیز کم کنیم. top مقدار اسکرول ما را ارزش گذاری کنید (در پاراگراف بعدی نحوه محاسبه آن را توضیح می دهیم).

برای ایجاد افکت اختلاف منظر، همانطور که پیمایش می کنیم، از آن استفاده می کنیم transform ویژگی برای حرکت عنوان و کلون آن در یک زمان و جهت به طوری که آنها مانند یک عنصر به نظر می رسند. حرکت سرعت توسط getSpeed() تابع. سرعت پایه ما 1.1 خواهد بود که به این معنی است که عناصر هدف 10٪ سریعتر از سایر عناصر حرکت می کنند. این مقدار را تغییر دهید تا تفاوت اثر را ببینید.

با در نظر گرفتن همه اینها، در اینجا تمام کدهای جاوا اسکریپت مورد نیاز ما آمده است:

1

const sectionHero = document.querySelector(".section-hero");

2

const heroTitle = sectionHero.querySelector(".hero-title");

3

const heroTitleClone = sectionHero.querySelector(".hero-title-clone");

4

const heroImgWrapper = sectionHero.querySelector(".hero-img-wrapper");

5

const speed = 1.1;

6

7

window.addEventListener("load", setPos);

8

window.addEventListener("resize", setPos);

9

10

function setPos() {

11

  const { x: heroTitleX, y: heroTitleY } = heroTitle.getBoundingClientRect();

12

  const {

13

    x: heroImgWrapperX,

14

    y: heroImgWrapperY

15

  } = heroImgWrapper.getBoundingClientRect();

16

17

  heroTitleClone.style.top = `${heroTitleY - getSpeed() - heroImgWrapperY}px`;

18

  heroTitleClone.style.left = `${heroTitleX - heroImgWrapperX}px`;

19

}

20

21

window.addEventListener("scroll", function () {

22

  const speed = `translateY(${getSpeed()}px)`;

23

  heroTitle.style.transform = speed;

24

  heroTitleClone.style.transform = speed;

25

});

26

27

function getSpeed() {

28

  return window.pageYOffset * speed;

29

}

نتیجه

با کمتر از 30 خط کد جاوا اسکریپت، ما موفق شدیم این افکت منظر دوست داشتنی را بسازیم که یک سناریوی عالی برای یک وب سایت نمونه کارها یا هر زمان که بخواهید بین متن و پس زمینه آن تضاد ایجاد کنید. امیدواریم که به اندازه کافی متقاعد شده باشید که آن را در یکی از پروژه های خود جاسازی کنید.

قبل از بسته شدن، بیایید دوباره به آنچه امروز ایجاد کردیم نگاه کنیم: