اسکرول خودکار در المنتور، قابلیت اسکرول کردن توی صفحات سایت، یکی از قابلیت هایه که وقتی محتوای یک صفحه از یه حدی بیشتر میشه و این محتوا، فضایی برای گنجایش محتوا توی خودش نداره ، صفحه با ابزار های اسکرول صفحه این امکان رو میدن که بقیه محتوا رو بتونیم با اسکرول صفح ببینیم، حالا این نیاز ممکنه که برای ما پیش بیاد که جایی بخوایم اسکرول خودکار صفحه رو داشته باشیم، تا کاربر بدون اینکه بخواد خودش اسکرول رو انجام بده، این اسکرول به صورت خودکار اتفاق بیفته و کاربر یه حس جالب تعامل با سایت رو تجربه کنه. توی این مقاله، قصد داریم تا راحت ترین روش اسکرول خودکار در المنتور رو بدون هیچ افزونه ای و فقط به کمک المنتور پرو و چند خط کد سی اس اس ساده انجام بدیم. با داشتن قابلیت اسکرول خودکار در المنتور، می تونین این امکان رو داشته باشین که امکان اسکرول برای بعضی از المان هایی که میخواید کاربر بدون اینکه بخواد اسکرولی بکنه، با یه حرکت مثل هاور کردن(نگه داشتن موس) بر روی عنصر، در اختیارش بزارین رو ایجاد کنین.در آموزش ساخت اسکرول خودکار در المنتور، میخواهیم کاری بکنیم که وقتی کاربری روی المانی هاور کرد، اسکرول به صورت خودکار اتفاق بیفته و کاربر کل محتوای اون المان رو بدون اینکه بخواد اسکرول کنه ببینه. این کار باعث میشه که هم بتونیم کل محتوا رو به قشنگ ترین مدل به کاربر نمایش بدیم و هم بتونیم حس کنجکاوی کاربر رو برای مشاهده چندین و چندباره اون المان برانگیخته کنیم.
استفاده از اسکرول خودکار در المنتور، به خصوص در قسمت نمونه کار ها کاربرد خیلی زیادی داره که کاربر بدون اینکه بخواد از سایت ما بره و نمونه کار ما رو ببینه، میتونیم با یک تصویر طولانی از نتیجه کارمون، کل نتیجه رو یک جا به کاربر نشون بدیم و مهارت خودمونو نشون بدیم.
برای شروع ساخت اسکرول خودکار در المنتور، در صفحه ی المنتوری خودمون، یک بخش(section) به وجود میاریم و و در اون جندین ستون درست می کنیم تا محتوایی که میخوایم رو در این ستون ها بسازیم.
در ادامه نیاز به یک بخش داخلی داریم که توی ستون موردنظر قرار بدیم.بنابراین از نوار کناری المان بخش داخلی رو پیدا می کنیم و توی ستونی که میخوایم قرار می دیم.
توی قدم بعدی یکی از ستون های این بخش داخلی رو حذف می کنیم تا فقط محتوای خودمونو توی یکی از ستون های این بخش داخلی قرار بدیم.بعد از اینکار، به قسمت ویرایش بخش داخلی میریم و توی تنظیمات بخش داخلیمون، در قسمت طرح بندی،ارتفاع رو روی کمترین ارتفاع قرار می دیم تا بتونیم ارتفاع مورد نظر خودمونو به بخش داخلی بدیم.
در قدم بعدی این مقدار رو با توجه به طراحی موردنظرمون تنظیم میکنیم. توی طراحی ما مقدار این قسمت روی عدد 400px تنظیم شده.
بعد از اینکار از نوار بالا به قسمت استایل میریم و توی این بخش توی قسمت پس زمینه، پس زمینه بخش داخلی رو روی نمایش کلاسیک قرار میدیم. با انجام اینکار بخشی برامون باز میشه که میتونیم توی اون بخش تصویر موردنظر خودمونو بزاریم.
بعد از انتخاب تصویر، توی قسمتی که در زیر تصویر باز میشه میتونیم تنظیماتی رو برای نحوه قرار گرفتن عکسمون به عنوان پس زمینه بخش داخلی در نظر بگیریم. برای اینکه بتونیم تصویر رو از بالا اسکرول کنیم و به پایین حرکت کنیم، جایگاه رو روی بالا وسط تنظیم می کنیم.
برای انکه تصویرمون کل بخش داخلی رو پوشش بده و تمامش خیلی خوب مشخص بشه، توی قسمت سایز، سایز رو روی کاور تنظیم کنین.
بعد از اینکه این قدم رو برداشتین نوبت به این می رسه که قابلیت موردنظر، یعنی هاور همراه با اسکرول رو برای این بخش ایجاد کنیم. برای همین توی قسمت پیشرفته، کد های سی اس اس سفارشی، کدایی که توی ادامه براتون میزاریم رو قرار بدین.
نکته اخری که میمونه اینه که توی کد سی اس اس این قسمت، قسمت هایی با واحد ثانیه مشخص شدن. این دوتا عدد، مدت زمان اسکرول به پایین و برگشت به بالا رو نمایش میدن. بنابراین تغییر سرعت اسکرول می تونین این دو عدد رو تنظیم کنین.
تبریک می گم! شما موفق شدین که اسکرول خودکار در المنتور رو بسازین! امیدواریم که این آموزش براتون مفید بوده باشه.
کد سی اس اس:
selector{
-webkit-transition: ease-in-out 4s !important;
transition: ease-in-out 4s !important;
}
selector:hover{
background-position: center bottom !important;
}
