از طریق منوی جستجو مطلب مورد نظر خود در وبلاگ را به سرعت پیدا کنید
ساخت وب سایت StartupGiraffe
سرفصلهای مطلب
ساخت وب سایت StartupGiraffe
ما جدید خود را راه اندازی کردیم استارتاپ زرافه وب سایت چند ماه پیش، و ما قصد داشتیم یک پست در مورد روش انجام بخشی از قسمت جلویی برای هر کسی که علاقه مند است بنویسیم.
هدف ما ایجاد یک سایت سرگرم کننده و پاسخگو بود که برند ما را به نمایش بگذارد. یک بار دوستان ما در بشکه NY موافقت کردیم که طراحی گرافیکی سایت را انجام دهیم، میدانستیم که میتوانیم برخی از ترفندهای منظم را نیز انجام دهیم. ما به آنها گفته بودیم که یک زرافه واقعاً بلند میخواهیم، اما تا زمانی که طرحها را برگرداندیم، واقعاً همه احتمالات را ندیدیم: چند ضلعیهایی با رنگها، زاویهها و اشکال مختلف در پسزمینه وجود داشت. در پیش زمینه، انواع عناصری وجود داشت که می توانستند در یک وب سایت اختلاف منظر به خوبی کار کنند… و آن زرافه عظیم وجود داشت.
چالش پیش روی ما این بود که مطمئن شویم با جاوا اسکریپت خیلی زیاده روی نکرده ایم تا از عملکرد سایت مالیات بگیریم و تجربه کاربر را منحرف کنیم. در نهایت تصمیم گرفتیم ایده اختلاف منظر را به نفع جلوه “زرافه در حال رشد” کنار بگذاریم.
می توانید نمونه ای از اثر را مشاهده کنید اینجا، و اگر می خواهید کد را دنبال کنید، می توانید فایل های منبع را از اینجا دانلود کنید.
ساختار سایت
در سطح پایه، سایت شامل 3 بخش خواهر و برادر است که روی هم چیده شده اند روی روی هم کپی و محتوای اصلی سایت نشسته است روی لایه بالایی زرافه است روی لایه دوم و پس زمینه چند ضلعی روی لایه پشتی:
<section id="background-wrapper">
<!-- SHAPES! -->
</section>
</section id="giraffe-wrapper">
<!-- ONE VERY TALL GIRAFFE -->
</section>
<section id="content-wrapper">
<!-- LOGO, COPY, PHOTOS, SLIDERS, etc -->
</section>
برای این نسخه ی نمایشی، ما پوشش پس زمینه را حذف می کنیم زیرا چیز زیادی برای آن وجود ندارد.
جلوه زرافه در حال رشد
اساسا، هدف ما این بود که لوگوی “زرافه استارتاپ” را در جای خود ثابت کنیم، در حالی که زرافه بالا میآید، سپس لوگو را در جریان عادی زرافه رها کنیم. page در یک نقطه خاص از آنجایی که زرافه باید به محض شروع حرکت کاربر شروع به بلند شدن کند، دماغ او بدون توجه به ارتفاع صفحه باید دقیقاً زیر چین باشد.
واقعاً راههای مختلفی برای انجام این کار وجود دارد (و ما قطعاً آماده پیشنهادات هستیم)، اما راهی که ما انتخاب کردیم استفاده میکند jQuery.waypoints به عنوان وسیله ای برای تشخیص و پاسخ به رویدادهای اسکرول.
برای اینکه مطمئن شویم زرافه پشت لوگو می لغزد، لوگو را در یک لفاف ثابت داخل قسمت «محتوا» قرار می دهیم. زرافه خواهر و برادر بخش محتوا است. هر دو بخش کاملاً در موقعیت قرار دارند.
HTML
<section id="giraffe-wrapper">
<img id="giraffe" src="https://www.webdesignerdepot.com/2013/03/building-the-startupgiraffe-website/giraffe.png" />
</section>
<section id="content-wrapper">
<section id="first-content">
<div id="big-logo-wrapper">
<img id="big-logo" src="https://www.webdesignerdepot.com/2013/03/building-the-startupgiraffe-website/sg_logo_large.png" />
</div>
</section>
</section>
CSS
body {
background-color: #000;
}
#content-wrapper, #giraffe-wrapper {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
#first-content {
position: relative;
}
#big-logo-wrapper {
position:fixed;
top: 250px;
width: 100%;
max-width: 1920px;
}
#big-logo {
width:465px; height:231px;
display:block; margin:0 auto;
}
#giraffe {
position: relative;
left: 100px;
height: 3200px;
}
جاوا اسکریپت
قدم بعدی تنظیم زرافه و لوگو بود. ما از جاوا اسکریپت برای تنظیم زرافه درست در زیر تاشو استفاده کردیم. سپس ارتفاع بخش اول را به ارتفاع پنجره به اضافه تعداد پیکسل هایی که می خواهیم برای زرافه نشان دهیم، تنظیم کنید، قبل از اینکه به لوگو اجازه دهیم به سمت بالا حرکت کند.
$(function() {
var windowHeight = $(window).height(),
giraffe = $("#giraffe"),
firstHeight = windowHeight + 380,
firstContent = $("#first-content");
giraffe.css("top", windowHeight + "px");
firstContent.css("height", firstHeight + "px")
});
با پنهان شدن زرافه درست در زیر تاشو، میتوانیم آن را در زیر لوگوی ثابت به سمت بالا ببینیم. در مرحله بعد، ما فقط باید اجازه میدادیم که آرم دور شود تا ثابت نشود روی را page.
افزونه waypoints به ما این امکان را می دهد که وقتی کاربر از کنار یک عنصر DOM خاص عبور می کند، یک تابع را فراخوانی کنیم. همچنین به ما امکان می دهد تشخیص دهیم که کاربر در کدام جهت حرکت کند. ما از این رویدادهای “بالا” و “پایین” برای افزودن یا حذف کلاسی استفاده کردیم که ویژگی موقعیت لوگو را بین ثابت و مطلق تغییر میدهد.
ما همچنین از ویژگی offset تابع waypoint برای تغییر موقعیت نقطه راه با یک مقدار پیکسل صحیح استفاده کردیم. از آنجایی که کلاس مطلق (لوگوی پیمایشی) لوگو را با پایین صفحه اصلی خود تراز می کند، ما می خواستیم افست ارتفاع لوگو به اضافه فاصله لوگو از بالای سایت منهای ارتفاع کل قسمت اول محتوا باشد. (که ما تنظیم کردیم روی page بار).
var logo = $('#big-logo-wrapper');
firstContent.waypoint(
function( direction) {
if ( direction === 'down' ) {
logo.addClass("first-scroll");
} else {
logo.removeClass('first-scroll');
}
},
{
offset: logo.height() + (parseInt(logo.css("top"))) - firstHeight
}
);
علاوه بر چند زنگ و سوت دیگر، تقریباً همین است. این لوگو اکنون ثابت می ماند تا زمانی که زرافه حدود 380 پیکسل بالاتر از آن به دست آورد page.
سوالاتی دارید؟ راه بهتری برای انجام آن دارید؟ در نظرات به ما اطلاع دهید.
(برچسبها در ترجمه ) نکرد
منتشر شده در 1403-10-03 15:18:02
منبع نوشتار