چگونه والپیپر دینامیک مک را در وب سایت خود بازسازی کنید

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

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

1. نشانه گذاری

ما با افزودن پس‌زمینه و عناصر خوشامدگویی به صفحه با استفاده از HTML شروع می‌کنیم:

1

<div id="background">

2

  <h1 id="greeting"></h1>

3

</div>

خوب، این آسان بود.

2. یک ظاهر طراحی با CSS

برای استایل‌مان، تصویر پس‌زمینه‌مان را در ارتفاع کامل نمای نمایش قرار می‌دهیم و تبریک را در مرکز قرار می‌دهیم. همچنین برای بهبود کنتراست بین متن و تصویر پس‌زمینه، یک پوشش کمی تیره‌تر روی پس‌زمینه قرار می‌دهیم.

این چیزی است که CSS ما به نظر می رسد:

1

#background {

2

  height: 100vh;

3

  background-size: cover;

4

  background-position: center;

5

  display: flex;

6

  align-items: center;

7

  justify-content: center;

8

  text-align: center;

9

}

10

11

#background::before {

12

  content: '';

13

  width: 100%;

14

  top: 0;

15

  height: 100%;

16

  left: 0;

17

  position: absolute;

18

  background-color: rgba(0, 0, 0, 0.1);

19

}

20

21

#greeting {

22

  color: white;

23

  position: relative;

24

  padding: 16px;

25

}

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

برای کاغذ دیواری پویا، باید تصمیم بگیریم که چه زمانی می خواهیم پس زمینه را به روز کنیم. در این آموزش، زمان هایی که ما از آنها استفاده خواهیم کرد:

1. ساعات اولیه: 12 صبح تا 6 صبح
2. صبح: 6 صبح تا 12 بعد از ظهر
3. بعدازظهر: از ساعت 12 تا 17
4. عصر: از ساعت 5 تا 9 شب
5. شب: 9 شب تا 12 صبح

ما می‌خواهیم برای هر یک از این زمان‌ها یک تصویر پس‌زمینه و تبریک تنظیم کنیم، بنابراین یک آرایه برای مدیریت این مقادیر ایجاد می‌کنیم.

1

پایان پس زمینه ها = [

2

  {

3

    min: 0,

4

    max: 6,

5

    src: "",

6

    greeting: "Quiet Hours 😴"

7

  },

8

  {

9

    min: 6,

10

    max: 12,

11

    src: "",

12

    greeting: "It's going to be a beautiful day 😊"

13

  },

14

  {

15

    min: 12,

16

    max: 17,

17

    src: "",

18

    greeting: "Good afternoon"

19

  },

20

  {

21

    min: 17,

22

    max: 21,

23

    src: "",

24

    greeting: "Good evening"

25

  },

26

  {

27

    min: 21,

28

    max: 24,

29

    src: "",

30

    greeting: "Good night"

31

  }

32

];

در مرحله بعد، عناصری را که به‌روزرسانی می‌کنیم به متغیرها اختصاص می‌دهیم:

1

const backgroundEl = document.getElementById("background");

2

const greetingEl = document.getElementById("greeting");

منطق را تعریف کنید

اکنون باید منطق نمایش پس زمینه و خوشامدگویی به کاربر را تعریف کنیم:

ابتدا، ساعت فعلی را برای کاربر با استفاده از آن دریافت می کنیم Date() سازنده و getHours() روش:

1

const getCurrentHour = () => {

2

  const currentDate = new Date();

3

  return currentDate.getHours();

4

};

را new Date() سازنده زمان جاری را بر اساس دستگاه کاربر و getHours() ساعت جاری را در قالب 24 ساعته برمی گرداند.

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

با استفاده از array.find() در روش، به دنبال شی پس‌زمینه می‌گردیم که در آن حداقل زمان کمتر یا برابر با ساعت فعلی و حداکثر زمان بیشتر از ساعت فعلی باشد.

1

const currentHour = getCurrentHour();

2

3

const currentBackground = backgrounds.find((background) =>

4

  background.min <= currentHour && background.max > currentHour

5

);

برای مثال، اگر ساعت فعلی 11 باشد، می خواهیم مقادیر شی صبحگاهی را که حداقل 6 و حداکثر 12 دارد، بدست آوریم.

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

1

const setBackground = () => {

2

  const currentHour = getCurrentHour();

3

4

  const currentBackground = backgrounds.find((background) =>

5

    background.min <= currentHour && background.max > currentHour

6

  );

7

8

  backgroundEl.style.backgroundImage = `url(${currentBackground.src})`;

9

  greetingEl.innerHTML = currentBackground.greeting;

10

};

ماشه با شنونده رویداد

ما می توانیم این تابع را به a منتقل کنیم load شنونده رویداد برای تنظیم پس‌زمینه زمانی که کاربر برای اولین بار وارد وب‌سایت ما می‌شود.

1

window.addEventListener("load", () => {

2

  setBackground();

3

});

اضافه کردن فاصله

در نهایت، ما می توانیم یک ایجاد کنیم setInterval() روشی برای به روز رسانی پس زمینه هر ساعت – به این ترتیب پس زمینه و تبریک بدون نیاز به بارگیری مجدد صفحه وب توسط کاربر به روز می شود.

1

window.addEventListener("load", () => {

2

  setBackground();

3

4

  const everyHour = 1000 * 60 * 60;

5

  setInterval(setBackground, everyHour);

6

});

نتیجه

و با آن، ما یک تصویر زمینه پویا با تبریک های شخصی برای وب سایت خود ایجاد کرده ایم. فراموش نکنید که بعداً دوباره بررسی کنید تا ببینید چگونه تغییر کرده است!