آموزش غیر از ویبولتینآموزش های عمومیانجمنبخش عمومی و مفید سایتعمومی

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

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

سلام
طبق درخواست هایی که کاربران داشتند جهت اموزش این موضوع تصمیم گرفتیم اموزشی ساده را اماده کنیم
حتما در وبسایت ها یا وبلاگ هایی دیده اید که وقتی نوار اسکرول را پایین می کشید یک بلوک یا یک متن یا هرچیزی به همراه اسکرول متحرک می شود و به سمت پایین میرود
یا در همین سیب گراف می بینید وقتی اسکرول را پایین می برید منوی بالا ثابت است و سپس به بالای صفحه می چسبد و به سمت پایین حرکت می کنید
برای دیدن اموزش و دریافت کد اماده به ادامه مطلب رجوع کنید…
ابتدا نمونه را مشاهده کنید : کلیک کنید
در نمونه مشهاده می کنید که خط اول ثابت است و کمی که نوار اسکرول را پایین می کشید متحرک می شود.
حال ما همین اموزش را خواهیم داد
برای اینکار ما از سه زبان قدرتمند html , javascript,css استفاده می کنیم
در css از خاصیت های poisition , z-index , top استفاده می کنیم
در javascript از دستورات شرطی و توابع addclass و removeclass استفاده می کنیم
در html هم برای فراخانی کدها
اموزش ساخت کدی که با پایین امدن اسکرول متحرک می شود
خوب اول باید یک ای دی داشته باشیم و یک کلاس
ای دی که داریم مربوط به خودتونه و هر استایلی می خواین بهش بدید مهم نیست
فقط باید این ای دی حتما وجود داشته باشه
برای مثال من یک ای دی به نام sibgraphid ایجاد کردم شما هر چی دوست دارید بزارید

محتوا – سیب گراف – داریوش فرهنگ

حالا یک استایل با کلاس fixed توسط زبان css می نویسم
.fixed{ position:fixed; top:0px; z-index:1000;}
خوب اگر دقت کرده باشین کار اصلیمون با همین استایل بالا هست که گذاشتیم
که برای موقعی هست که اسکرول پایین میاد کلاس fixed رو جایگزین sibgraphid بکن
حالا هر استایل داخل کلاس fixed باشه جایگزین sibgraphid میشه که من position با مقدار fixed کردم که به حالت متحرک بودن دربیاد
خوب تا اینجا که امیدوارم مشکلی نبوده براتون
حالا رسیدیم به بخش اصلی
حالا کارمون با جاوااسکریپت شروع میشه
کد زیر رو ببینید کاملا واضحه که چه شرطی و چه دستوری قرار دادیم
$(window).scroll(function() { if ($(this).scrollTop() > 150) { $(‘#sibgraphid’).addClass(‘fixed’); } else { $(‘#sibgraphid’).removeClass(‘fixed’); } });
نوشتیم اگر اسکرول اصلی از بالا 150 تا اومد پایین یه کلاس به اسم fixed (بالا توضیح دادیم) به ای دی sibgraphid اضاف کن
حالا وقتی اسکرولمون 150 (پیکسل) اومد پایین کلاس fixed رو اضاف می کنه
بعد از اون نوشتیم در غیراین صورت (یعنی وقتی اسکرول به سمت بالا رفت و کمتر از 150 شد) دوباره کلاس fixed رو از ای sibgraphid حذف کن
فکر می کردید به همین سادگی باشه؟
اگر مشکلی داشتید در انجمن تاپیک ایجاد کنید یا در قسمت نظرات بیان کنید.
کد کامل:
$(window).scroll(function() { if ($(this).scrollTop() > 150) { $(‘#sibgraphid’).addClass(‘fixed-nav’); } else { $(‘#sibgraphid’).removeClass(‘fixed-nav’); } });

محتوا – سیب گراف – داریوش فرهنگ


(1) اسکرول نامحدود به کمک jQuery
اسکرول نامحدود به کمک jQuery


(2) ساخت باکس اسکرول دار با HTML و CSS
ساخت باکس اسکرول دار با HTML و CSS


(3) ساخت Sticky Menu یا منوی چسبنده با
ساخت Sticky Menu یا منوی چسبنده با استفاده از جی کوئری و سی اس اس


(4) آموزش ساخت منوی کشویی با CSS و HTML
آموزش ساخت منوی کشویی با CSS و HTML - مسترکد


(5) آموزش اسکرول خودکار همراه با صوت در b4a
آموزش اسکرول خودکار همراه با صوت در b4a


(6) اجرای انیمیشن css با حرکت اسکرول
با وارد کردن کد های بالا در صفحه هنگامی که اسکرول صفحه توسط کاربر پایین بیاید و به شی مورد نظر برسد نام یک کلاس Css مقدار صفت data-animation به همراه نام کلاس animated به شی اضافه می شود. این کلاس باعث اجرای انیمیشنی روی شی می شود


(7) متحرک سازی دکمه اکشن شناور در اندروید
متحرک سازی دکمه اکشن شناور در اندروید - اپریویو


(8) ساخت Grid با Scroll
ساخت Grid با Scroll


(9) آموزش درست کردن اسکرول به سمت بالا
این است که با یک دکمه که آنها را به بالا حرکت خواهد کرد انجام می شود. در این آموزش به شما خواهد آموخت که چگونه می توانید اسکرول متحرک به بالا دکمه با جی کوئری ایجاد کنید.


(10) فیلم آموزش ساخت فروشگاه اینترنتی درس 1
فیلم آموزش ساخت فروشگاه اینترنتی درس 1 تا 35

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

5 × چهار =

دکمه بازگشت به بالا