به الهام گرفتن برای جلوه های هدر خلاقانه روی اسکرول علاقه دارید؟ من شما را تحت پوشش قرار داده ام! امروز ما بهترین آموزش افکت‌های هدر اسکرول مبتنی بر جاوا اسکریپت را که در دسترس هستند را بررسی خواهیم کرد Envato Tuts+. و مهمتر از همه، بدون استفاده از هیچ کتابخانه خارجی!
5 آموزش هدر اسکرول مبتنی بر جاوا اسکریپت
اکنون که کمی از سایت‌های زنده الهام گرفته‌ایم، بیایید چند آموزش ساده را ببینیم که نحوه متحرک کردن هدرها را در اسکرول توضیح می‌دهند.
1. هدرهای چسبنده را تغییر دهید
این نسخه نمایشی محبوب نشان می‌دهد که چگونه می‌توان هدر صفحه را هنگام اسکرول کردن صفحه پنهان کرد، سپس هنگام پیمایش به بالا آن را آشکار کرد. به عنوان یک امتیاز، ما یک را تعبیه کردیم انیمیشن Lottie که هر بار که به پایین اسکرول می کنیم، منو را تغییر می دهد.
2. نوارهای اعلان سرصفحه را تغییر دهید
در این تمرین، یک هدر چسبنده می سازیم که قسمت بالای آن (نوار هدر اعلان) با اسکرول به پایین ناپدید می شود و در اسکرول به بالا ظاهر می شود. این یک روند UX کلاسیک قدیمی است، به ویژه برای فروشگاه های تجارت الکترونیک محبوب است و هدف اصلی آن اطلاع رسانی به بازدیدکنندگان در مورد تبلیغات، اطلاعات تحویل و غیره است.
3. انیمیشن هدر پاسخگو
با حرکت رو به جلو در این تمرین، یک هدر پاسخگو آماده برای استفاده ایجاد می کنیم و آن را متحرک می کنیم دکمه فراخوان بعد از مقدار مشخصی پیمایش. اگر می خواهید در حین پیمایش چشم بازدیدکننده خود را جلب کنید مفید است.
4. هدر ثابت که متحرک می شود
در این تمرین، هدر ثابت ما پس از مقدار معینی پیمایش کوچک می‌شود – یک سناریوی معمولی زمانی که می‌خواهید آن را روی اسکرول ثابت نگه دارید و در عین حال با ارتفاع کم‌تر، فضایی برای محتوای صفحه باقی بگذارید.
5. هدر چسبنده متحرک در اسکرول
در این جدیدترین آموزش، هدر در اسکرول ناپدید می شود، سپس پس از مقدار معینی پیمایش کوچکتر ظاهر می شود. از نظر عملکرد، بسته به میزان اسکرول، موقعیت هدر را بین مطلق و ثابت تغییر می دهیم.
نتیجه
امیدواریم این لیست به شما الهام کافی برای شروع ساخت افکت‌های هدر اسکرول خلاقانه داده باشد. از دموها لذت ببرید، آموزش های مرتبط را بخوانید و در آخر مطمئن باشید Envato Tuts+ را در CodePen دنبال کنید برای قلم های خلاقانه تر!
اگر هر افکت هدر دیگری وجود دارد که می‌خواهید اجرا شود، از طریق آن به ما اطلاع دهید رسانه های اجتماعی.
مثل همیشه، خیلی ممنون که خواندید!
