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

• CodePen برای این آموزش ببینید

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

01. تنظیم کنید

روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید

اگر شما از CodePen استفاده می کنید، مطمئن شوید که CSS در تنظیمات قلم «SCSS» تنظیم شده است. شما می توانید این تغییر را با کلیک روی زبانه تنظیمات، CSS را انتخاب کرده و CSS Preprocessor را به گزینه SCSS تغییر دهید. 

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

02. پایان دادن به HTML

روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید

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

03. کاوش متغیرهای ساس

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

/** Variables **/

$container-BgColor: #444;
$left-bgColor: rgba(136, 226, 247, 0.7);
$left-button-hover: rgba(94, 226, 247, 0.7);
$right-bgColor: rgba(227, 140, 219, 0.8);
$right-button-hover: rgba(255, 140, 219, 0.7);
$hover-width: 75%;
$small-width: 25%;
$animateSpeed: 1000ms;

04. تنظیم ظاهر بدن

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

html, body {
  padding:0;
  margin:0;
  font-family: 'Open Sans', sans-serif;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
}

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

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

h1 {
  font-size: 5rem;
  color: #fff;
  position: absolute;
  left: 50%;
  top: 20%;
  transform: translateX(-50%);
  white-space: nowrap;

  font-family: 'Playfair Display', serif;  
}

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

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

.button {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2.6rem;
  padding-top: 1.2rem;
  width: 15rem;
  text-align: center;
  color: white;
  border: 3px solid #fff;
  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
  transition: all .2s;

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

.screen.left .button:hover {
  background-color: $left-button-hover;
  border-color: $left-button-hover;
}

.screen.right .button:hover {
  background-color: $right-button-hover;
  border-color: $right-button-hover;

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

روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید

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

.container {
  position: relative;
  width: 100%;
  height: 100%;
  background: $container-BgColor;
  
    .screen {
      position: absolute;
      width: 50%;
      height: 100%;
      overflow: hidden;
    }
}

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

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

.screen.left {
  left:0;
  background: url('https://preview.ibb.co/cpabRm/pexels_photo_450212_1.jpg') center center no-repeat;
  background-size: cover;
  
    &:before {
       position:absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: $left-bgColor;
    }
}

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

.screen.right {
  right:0;
  background: url('https://preview.ibb.co/mToPCR/seth_doyle_82563_1.jpg') center center no-repeat;
  background-size: cover;
  
   &:before {
      position:absolute;
      content: "";
      width: 100%;
      height: 100%;
      background: $right-bgColor;
    }
}

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

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

.screen.left, .screen.right, .screen.right:before, .screen.left:before {
  transition: $animateSpeed all ease-in-out;
}

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

.hover-left .left {
  width: $hover-width;
}

.hover-left .right {
  width: $small-width;
}
.hover-left .right:before {
  z-index: 2;
}

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

.hover-right .right {
  width: $hover-width;
}

.hover-right .left {
  width: $small-width;
}

.hover-right .left:before {
  z-index: 2;
}

10. به جاوا اسکریپت بروید

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

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

const doc = document;

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

const right = doc.querySelector(".right");
const left = doc.querySelector(".left");
const container = doc.querySelector(".container");

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

// adds a class to the container element on hover
left.addEventListener("mouseenter", () => {
  container.classList.add("hover-left");
});

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

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

// removes the class that was added on hover
left.addEventListener("mouseleave", () => {
  container.classList.remove("hover-left");
});

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

right.addEventListener("mouseenter", () => {
  container.classList.add("hover-right");
});

right.addEventListener("mouseleave", () => {
  container.classList.remove("hover-right");
});

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

روی نماد در بالا سمت راست کلیک کنید تا تصویر را بزرگتر کنید

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

@media(max-width: 800px) {
  h1 {
    font-size: 2rem;  }

  .button {
    width: 12rem;
  } 

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

@media(max-height: 700px) {
  .button {
    top: 70%;
} }

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