صفحه متحرک صفحه تقسیم صفحه متحرک ایجاد کنید

محتوا

• 01. راه اندازی کنید
• 02. HTML را تمام کنید
• 03. متغیرهای Sass را کاوش کنید
• 04. یک ظاهر طراحی شده بدن را تنظیم کنید
• 05. عناوین بخش را سبک کنید
• 06. CTA ها را برجسته کنید
• 07. زمینه و صفحه های ظرف را تنظیم کنید
• 08. تصاویر پس زمینه را اضافه کنید
• 09. انتقال ها و جلوه های شناور را اضافه کنید
• 10. به JavaScript بروید
• 11. یک کلاس اضافه و حذف کنید
• 12. آن را پاسخگو کنید

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

• برای این آموزش به CodePen در حال کار مراجعه کنید

در این آموزش ، ما در مورد چگونگی ساختن یک صفحه جذاب برای یک مارک تجاری داستانی آشنا خواهیم شد. این مرکز در اطراف یک طرح تقسیم صفحه با تصاویر بزرگ و انتقال متحرک است که در شناور اتفاق می افتد.این صفحه دارای دو دکمه روشن برای عمل خواهد بود و ما از HTML ، Sass برای یک ظاهر طراحی شده و لمس جاوا اسکریپت وانیلی استفاده می کنیم که از نحو ES6 استفاده می کند (به یاد داشته باشید که میزبانی وب شما متناسب با نیاز وب سایت شما باشد) خیلی پیچیده؟ وب سایت بدون نیاز به کد ایجاد کنید ، یک وب سایت ساز ساده را امتحان کنید.

01. راه اندازی کنید

اگر از CodePen استفاده می کنید ، اطمینان حاصل کنید که CSS در تنظیمات Pen روی 'SCSS' تنظیم شده است. می توانید با کلیک روی برگه تنظیمات ، این تغییر را ایجاد کنید ، "CSS" را انتخاب کرده و در گزینه های کشویی پیش پردازنده CSS را به SCSS تغییر دهید.

سپس می توانیم HTML خود را اضافه کنیم. ما قصد داریم بخشی به نام "چپ" و بخشی به نام "راست" را در یک کلاس کانتینر قرار دهیم ، که به هر دو بخش یک کلاس "صفحه" داده شده است.

div> بخش> / بخش> بخش> / بخش> / div>

02. HTML را تمام کنید

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

div> section> h1> Mens Fashion / h1> button> a href = "#"> بیشتر بیاموزید / a> / button> / section> section> h1> Womens Fashion / h1> button> a href = "#"> بیاموزید بیشتر / a> / دکمه> / بخش>

03. متغیرهای Sass را کاوش کنید

چیزی که همه ما در مورد ساس دوست داریم استفاده از متغیرها است. حتی اگر متغیرهای بومی CSS از پشتیبانی بیشتری برخوردار شوند ، ما با استفاده از Sass امنیت را حفظ خواهیم کرد. ما اینها را در قسمت بالای خود قرار خواهیم داد .scss، و شما می توانید هر رنگی را که می خواهید انتخاب کنید ، اما با استفاده از rgba ارزش ها انعطاف پذیری بیشتری به ما می دهند.

/ * * متغیرها * * / $ container-BgColor: # 444؛ $ left-bgColor: rgba (136، 226، 247، 0.7)؛ دکمه سمت چپ شناور: rgba (94 ، 226 ، 247 ، 0.7) ؛ $ right-bgColor: rgba (227، 140، 219، 0.8)؛ دکمه سمت راست شناور $: rgba (255 ، 140 ، 219 ، 0.7)؛ عرض شناور $: 75٪؛ عرض کوچک $: 25٪ $ animateSpeed: 1000ms؛

04. یک ظاهر طراحی شده بدن را تنظیم کنید

در مرحله اول ، ما تمام padding و حاشیه پیش فرض را بر روی بدنه پاک می کنیم و سپس خانواده قلم را روی Open Sans تنظیم می کنیم. این فقط روی دکمه تأثیر می گذارد ، بنابراین خیلی مهم نیست که از قلم استفاده کنیم. سپس عرض و ارتفاع را بر روی تنظیم می کنیم 100% و اطمینان حاصل کنید که هر چیزی که در محور X سرریز شود مخفی شود.

html، body {padding: 0؛ حاشیه: 0؛ font-family: 'Open Sans'، sans-serif؛ عرض: 100٪ قد: 100٪ overflow-x: پنهان ؛ }

05. عناوین بخش را سبک کنید

زمان انتخاب فونت Google برای عناوین بخش ها است - ما Playfair Display را انتخاب کرده ایم. سپس استفاده کنید ترجمه X می توانیم اطمینان حاصل کنیم که عناوین بخش همیشه در محور X قرار دارند.

h1 {font-size: 5rem؛ رنگ: #fff؛ موقعیت: مطلق؛ سمت چپ: 50٪؛ بالا: 20٪؛ تبدیل: translateX (-50٪)؛ فضای سفید: nowrap؛ font-family: 'Playfair Display'، serif؛ }

06. CTA ها را برجسته کنید

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

.button {display: block؛ موقعیت: مطلق؛ سمت چپ: 50٪؛ بالا: 50٪؛ ارتفاع: 2.6rem؛ padding-top: 1.2rem؛ عرض: 15rem؛ text-align: مرکز؛ رنگ سفید؛ حاشیه: 3px solid #fff؛ شعاع مرز: 4px؛ وزن قلم: 600؛ تبدیل متن: بزرگ؛ دکوراسیون متن: هیچ؛ تبدیل: translateX (-50٪)؛ انتقال: همه .2 ها؛

دکمه های اصلی جلوه شناور ساده خوبی دارند و ما از متغیرهای Sass که برای رنگ مشخص کردیم استفاده خواهیم کرد که رنگی مشابه پس زمینه صفحه خواهد بود.

.screen.left .button: شناور {background-color: $ left-button-hover؛ حاشیه رنگ: $ دکمه سمت چپ شناور؛ } .screen.right. دکمه: شناور {background-color: $ right-button-hover؛ حاشیه رنگ: $ right-button -over؛

07. زمینه و صفحه های ظرف را تنظیم کنید

کلاس کانتینر به عنوان بسته بندی صفحه ما عمل خواهد کرد و ما موقعیت این را به نسبی تنظیم خواهیم کرد ، فقط به این دلیل که می خواهیم صفحه ها را در موقعیت مطلق قرار دهیم. ما به ظرف رنگ زمینه پیش فرض خواهیم داد ، اما مطمئناً این مورد مشاهده نخواهد شد زیرا در هر دو پس زمینه صفحه نمایش ، رنگ های مختلفی را تنظیم خواهیم کرد.

. کانتینر {موقعیت: نسبی؛ عرض: 100٪ قد: 100٪ پس زمینه: $ container-BgColor؛ .screen {موقعیت: مطلق؛ عرض: 50٪ قد: 100٪ سرریز: پنهان }}

08. تصاویر پس زمینه را اضافه کنید

هر دو بخش چپ و راست یک تصویر را نشان می دهد و شما می توانید تصاویر سهام بدون حق امتیاز را از وب سایت هایی مانند Unsplash ، Pixabay یا Pexels (که من در این آموزش استفاده کرده ام) پیدا کنید. برای سهولت کار ، من از یک سرویس میزبانی و اشتراک تصویر رایگان به نام imgbb استفاده کرده ام که می توانیم آن را در CSS خود پیوند دهیم.

.screen.left {چپ: 0؛ پس زمینه: url ('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.webp') مرکز مرکز تکرار نمی شود؛ background-size: جلد؛ &: قبل از {موقعیت: مطلق؛ محتوا: ""؛ عرض: 100٪ قد: 100٪ پس زمینه: $ left-bgColor؛ }}

در سمت راست صفحه نیز با استفاده از imgbb تصویر پس زمینه نمایش داده می شود و ما رنگ پس زمینه را روی صورتی قرار می دهیم. باز هم ، اندازه پس زمینه را بر روی تنظیم می کنیم پوشش دادن. این به ما امکان می دهد تا کل عنصر حاوی آنچه در مورد ما است را پوشش دهیم صفحه نمایش کلاس

.screen.right {راست: 0؛ background: url (’https://preview.ibb.co/mToPCR/seth_doyle_82563_1.webp’) مرکز مرکز تکرار نمی شود ؛ background-size: جلد؛ &: قبل از {موقعیت: مطلق؛ محتوا: ""؛ عرض: 100٪ قد: 100٪ پس زمینه: $ right-bgColor؛ }}

09. انتقال ها و جلوه های شناور را اضافه کنید

سرعت انیمیشن برای اثر شناور ما در هر دو صفحه با یک انتقال که مقدار متغیر ما را در اختیار دارد کنترل می شود $ animateSpeed، که 1000 میلی ثانیه (یک ثانیه) است. در پایان کار با تسهیل ساخت انیمیشن به پایان خواهیم رسید ، این یک سهولت در ورود و خروج است که به ما کمک می کند تا انیمیشن روان تری داشته باشیم.

.screen.left ، .screen.right ، .screen.right: قبل ، .screen.left: قبل از {گذار: $ animateSpeed ​​all easy-in-out؛ }

آنچه اکنون می خواهیم اتفاق بیفتد این است که وقتی روی صفحه سمت چپ حرکت می کنید ، یک کلاس با استفاده از JavaScript به آن بخش اضافه می شود (که در مرحله بعد خواهیم نوشت). وقتی این کلاس اضافه شود ، آن صفحه به اندازه عرض متغیری که تعیین کردیم کشیده می شود - که 75٪ خواهد بود و سپس سمت راست روی متغیر عرض کوچکتر (25٪) تنظیم می شود.

.hover-left .left {width: $ hover-width؛ } .Hover-left .right {width: $ small-width؛ } .hover-left .right: قبل از {z-index: 2؛ }

این دقیقاً همانند سمت چپ عمل می کند ، جایی که یک کلاس جدید با استفاده از JavaScript به شناور ماوس اضافه می شود و صفحه سمت راست بر این اساس کشیده می شود. ما همچنین باید اطمینان حاصل کنیم که z-index تنظیم شده است 2 بنابراین دکمه CTA برجسته تر می شود.

.Hover-right .right {width: $ hover-width؛ } .Hover-right .left {width: $ small-width؛ } .Hover-right .left: قبل از {z-index: 2؛ }

10. به JavaScript بروید

ما از JavaScript وانیلی برای کمک به ما در افزودن و حذف کلاسهای CSS استفاده خواهیم کرد و همچنین از برخی از ویژگیهای جدید ES6 استفاده خواهیم کرد. اولین کاری که باید انجام دهیم اعلام برخی متغیرهای ثابت است.

زیرا ما استفاده خواهیم کرد سند بیش از یک بار ، یک متغیر ثابت به نام تنظیم خواهیم کرد سند و سند را در آن ذخیره کنید تا بتوانیم کلمه 'document' را زیبا و کوتاه نگه داریم.

doc doc = سند؛

حالا باید سه ثابت دیگر تنظیم کنیم که ذخیره شوند .درست, .ترک کرد و کانتینر انتخاب کنندگان دلیل استفاده ما از ثابت ها این است که می دانیم نمی خواهیم مقدار اینها را تغییر دهیم ، بنابراین استفاده از ثابت ها منطقی است. با تنظیم این موارد ، می توانیم پیش برویم و برخی از رویدادهای موس را به آنها اضافه کنیم.

const right = doc.querySelector (". راست")؛ const چپ = doc.querySelector (". چپ")؛ کانتینر کانتینر = doc.querySelector (". ظرف")؛

با استفاده از ترک کرد متغیر ثابت که در مرحله آخر اعلام کردیم ، اکنون می توانیم یک شنونده رویداد را به آن اضافه کنیم. این رویداد مرکز موش event و به جای استفاده از یک تابع callback ، از ویژگی ES6 دیگری به نام توابع پیکان '(() =>).

// یک کلاس به عنصر کانتینر در شناور left.addEventListener اضافه می کند ("mouseenter"، () => {container.classList.add ("hover-left")؛})؛

11. یک کلاس اضافه و حذف کنید

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

// کلاسی را که در hover left.addEventListener اضافه شده بود حذف می کند ("mouseleave"، () => {container.classList.remove ("hover-left")؛})؛

تاکنون همه کارها را در صفحه سمت چپ انجام داده ایم. اکنون JavaScript را تمام کرده و کلاسها را در عناصر بخش سمت راست اضافه و حذف می کنیم. باز هم ما در اینجا از نحو تابع arrow استفاده کرده ایم تا همه چیز زیبا و مرتب به نظر برسد.

right.addEventListener ("mouseenter"، () => {container.classList.add ("شناور راست")؛})؛ right.addEventListener ("mouseleave"، () => {container.classList.remove ("شناور راست")؛})؛

12. آن را پاسخگو کنید

هیچ پروژه ای - چه بزرگ و چه کوچک - نباید از پاسخگو بودن جلوگیری کند. بنابراین ، در این مرحله ما برخی از درخواست های رسانه ای را به CSS خود اضافه می کنیم و این پروژه کوچک را تا آنجا که می توانیم سازگار با دستگاه های تلفن همراه می کنیم. ارزش بررسی CodePen اصلی را دارد تا ببینید که چگونه این کار می کند.

media (حداکثر عرض: 800 پیکسل) {h1 {font-size: 2rem؛ } دکمه {عرض: 12rem؛ }

ما اطمینان حاصل کرده ایم که وقتی عرض صفحه ما به 800px کاهش می یابد ، اندازه قلم و دکمه ها کاهش می یابد. بنابراین ، برای پایان دادن به کارها ، می خواهیم ارتفاع را نیز هدف قرار دهیم و مطمئن شویم که وقتی ارتفاع صفحه به زیر 700 پیکسل می رسد ، دکمه های ما به سمت پایین صفحه حرکت می کنند.

media (حداکثر قد: 700px) {.button {بالا: 70٪؛ }}

می خواهید صفحات خود را ذخیره کنید؟ آنها را به صورت PDF صادر کرده و در فضای ذخیره سازی امن ابر ذخیره کنید.

رویداد طراحی وب لندن تولید کنید در تاریخ 19-21 سپتامبر 2018 بازگشت ، با ارائه یک برنامه کامل از سخنرانان برجسته صنعت ، یک روز کامل از کارگاه ها و فرصت های ارزشمند شبکه - آن را از دست ندهید. اکنون بلیط Generate خود را تهیه کنید.

این مقاله در اصل در مجله نت منتشر شده است شماره 305. اکنون مشترک شوید.