پرهام ناصحی
3 سال پیش توسط پرهام ناصحی مطرح شد
7 پاسخ

ساخت اسکرواختصاصی مثل سایت آپارات

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


ثبت پرسش جدید
فخرالدین لنگی
تخصص : برنامه نویس وب، آندروید و سیست...
@fakhraddin 3 سال پیش مطرح شد
2

@parhamdeveloper
دوست گرامی در ابتدا امر کاری که آپارات انجام داده کار حرفه ایی نیست کلا چهارتا کلاس سی اس اسه و دوتا تابع جاوااسکریپتی که اتفاقا آموزش همه اشون توی مرجع های آموزشی مثل W3Schools هم هست
اگه منظورتون اینه که با هر بار اسکرول ماوس محتویات صحفه جا به جا بشه البته اگر درست متوجه شده باشم شما می تونید از کتابخونه جاوااسکریپتی FullPage.js یا https://alvarotrigo.com/fullPage که محتویات اسکرول رو به صورت تمام صفحه درمی یاره و با هر بار اسکرول ماوس صفحات جا به جا می شه
اگر منظورتون مورد دیگه ایی لطفا حداقل تصویری که از چیزی که مدنظرتون رو بذارید
با تشکر


فخرالدین لنگی
تخصص : برنامه نویس وب، آندروید و سیست...
@fakhraddin 3 سال پیش مطرح شد
1

@parhamdeveloper
با سلام
شما می تونید با دستورات css اسکرول رو سفارشی سازی کنید به صورت کد زیر:

::-webkit-scrollbar
{
    width: 7px;
}
::-webkit-scrollbar-track
{
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
::-webkit-scrollbar-thumb
{
    -webkit-border-radius: 10px;
    border-radius: 10px;
    background: rgba(255,0,0,0.8);
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive
{
    background: rgba(255,0,0,0.4);
}

پرهام ناصحی
تخصص : بک‌اند کار
@parhamdeveloper 3 سال پیش مطرح شد
0

@fakhraddin
من گفتم با سی اس اس نباشه . من میخوام با جاوا اسکریپت بسازمش


فخرالدین لنگی
تخصص : برنامه نویس وب، آندروید و سیست...
@fakhraddin 3 سال پیش مطرح شد
1

@parhamdeveloper
دوست گرامی تمام style های هر صفحه وبی با دستورات css استایل دهی می شه دستورات js برای رخدادها و فانکشن های توی صفحه است

  1. توی آپارات با دستور css به اسکرول بار استایل داده شده
  2. با دستور js وقتی ماوس رو روی منوی سمت راست می برید یک کلاس css تاکید می کنم یک کلاس css به منو باز می شه که با یک انیمیشنی اسکرول بار رو نشون می ده که شما می تونید با استفاده از رویدادهای mouseover و mouseleave یک کلاس یا استایل css خاص رو موقعی که ماوس به اون ناحیه وارد یا خارج می شه به اون المنت اضافه یا کم بکنید
    بازم مجدد تاکید می کنم خدمتتون شما چه از انگولار چه ری اکت چه بوت استرپ چه حتی بدون هیچ فریمورکی می خوایید به هر آیتمی توی صفحه استایل بدید تنها باید از css استفاده کنید کاربرد جاوااسکریپت برای وقوع رخداد ها و اکشن ها و تریگرها و ... است

میلاد-م
تخصص : توسعه‌دهنده رابط کاربری - Fron...
@milad 3 سال پیش مطرح شد
0

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


پرهام ناصحی
تخصص : بک‌اند کار
@parhamdeveloper 3 سال پیش مطرح شد
0

@milad
روی سیستم عامل ویندوز برو و navbar رو باز کن .


پرهام ناصحی
تخصص : بک‌اند کار
@parhamdeveloper 3 سال پیش مطرح شد
0

@fakhraddin
نگاه کن . من میخوام کلا یه اسکرول اختصاصی بسازم . اونم نه به صورت حرفه ای ، اما میخوام مثل Swiper Js باشه . و البته swiper js اون کاری رو که من میخوام نمیتونه انجام بده . میخوام مثل swiper js باشه


فخرالدین لنگی
تخصص : برنامه نویس وب، آندروید و سیست...
@fakhraddin 3 سال پیش مطرح شد
2

@parhamdeveloper
دوست گرامی در ابتدا امر کاری که آپارات انجام داده کار حرفه ایی نیست کلا چهارتا کلاس سی اس اسه و دوتا تابع جاوااسکریپتی که اتفاقا آموزش همه اشون توی مرجع های آموزشی مثل W3Schools هم هست
اگه منظورتون اینه که با هر بار اسکرول ماوس محتویات صحفه جا به جا بشه البته اگر درست متوجه شده باشم شما می تونید از کتابخونه جاوااسکریپتی FullPage.js یا https://alvarotrigo.com/fullPage که محتویات اسکرول رو به صورت تمام صفحه درمی یاره و با هر بار اسکرول ماوس صفحات جا به جا می شه
اگر منظورتون مورد دیگه ایی لطفا حداقل تصویری که از چیزی که مدنظرتون رو بذارید
با تشکر


برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام