افکت زیبای سقوط سربرگ با اسکرول کردن توسط CSS

- visibility ١٧ mode_comment

بنام یگانه هستی بخش

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

دمو

demoهمونطور که دیدید وقتی اسکرول میکنید به جای اینکه صفحه پایین بیاد،قسمت متن به سمت بالا حرکت میکنه.چه جوری؟یه ترفند خیلی ساده هست که باعث میشه صفحه ی شما خیلی زیبا و جذاب بشه.خیلی ساده بخوام بگم اینه که قسمت متن رو از بالا با فاصله ای به انداه ی سربرگمون قرار میدیم.بعد به قسمت سربرگ position:fixed میدیم.به کد زیر که مال قسمت سربرگ هست، دقت کنید.

اگه تا همین جا پیش برید و صفحه رو رفرش کنید و بعد اسکرول کنید میبینید که سربرگ همچنان در اول صفحه قرار داره و قسمت متن به زیر اون میره!

خب برای اینکه مشکل رو حل کنیم به قسمت متنمون z-index:5 رو میدیم.یعنی میخوایم در لایه ای جلوتر از لایه ی سربرگ قرار بگیره.به کد زیر که مال قسمت متن هست، دقت کنید.

::توضیح مختصر:خب در خط 5 و 6 ما کاری کردیم که متنمون در فاصله ی 600 پیکسل از بالا قرار بگیره.و در خط 7 که مهم ترین قسمته هم مشخص کردیم که متن ما در لایه ای جلوتر از لایه ی سربرگ قرار بگیره تا وقتی اسکرول میکنیم این لایه بره روی سربرگ.

البته یه قسمت هم بالا تر از سربرگ داریم که برای اینکه همیشه در همون قسمت قرار بگیره باز هم از position: fixed استفاده کردیم.و چون به متن z-index:5 دادیم به اون قسمت z-index:6 دادیم که در لایه ای بالاتر از قسمت متن قرار بگیره و زیر متن نره.به خط های برجسته شده ی کد زیر توجه کنید.

به همین راحتی.در آخر هم دمو رو برای دانلود میذارم تا اگه خواستید همه ی کدهاشو ببینید.

موفق باشید. یا علی

comment دیدگاه کاربران

وای چه قدر آموزش های سایت حرفه ای شدند 😯 😯 😯

علی امینی

ان شاءالله بهتر میشن

پارسا

واقعا چقدر حرفه ای
اصلا قند تو دلم کره شد 😐

خیلی ممنون آموزش خوبی بود…
در واقع میشه گفت این آموزش یه نمونه ساده ای از پلاگین های پیمایش منطبق هستند…

علی امینی

پیمایش منطبق؟!!
تا حالا نشنیده بودم!

حسین محمدی

بله این واژه یه جور فارسی شده ی parallax scrolling هستش و از پلاگین های پرطرفدار جی کوئریه..

علی امینی

آهان.
parallax scrolling شنیده بودم ولی پیمایش منطبق نه 😀

mm021

دمت گرم عالی بود الان هم اکثر سایت ها اینجوری شدنند خیلی دنبال این اموزش می گشتم 😛

ببخشید یه سوال میشه به جای تصویر اسلاید شو هم قرار داد ؟؟

وحید صالحی

بله رضا جان میشه

رضا ساطع بیدگلی

ببخشید آقا وحید
ایمیل شخصی شما چیه ؟؟

وحید صالحی

elearning206@yahoo.com

علی امینی

داداش خسته نباشی(واسه ی جواب به نظرات(نه تنها این مطلب)) ❓

hamid7n

سلام
عنوان این مطلب رو سرچ کنید سایت nfliri.ir رو گوگل واسه من نتیجه اول میاره در صورتی که مطلب با rss از سون لرن کپی شده مثل اینکه زودتر از مطلب خودتون ایندکس شده به نرم به اسپم گوگل معرفیش کنید…

علی امینی

سلام؛
پاندا،الگوریتم جدید گوگل خیلی قوی هست و هیچوقت اینطوری گول نمیخوره.
اینجور پستی که اون سایت گذاشته رو بهش میگن پست میهمان،که تنها قسمتی از پست اصلی داخلش هست و لینک منبعش هم در همون پست قرار داره.
اگه شد بعدا در مورد این نوع پست مطلبی قرار میدم

امید

سلام من دنبال یک چیز دیگه ام.
من می خوام مثل سایت شما اون نوار بالا ثابت شه نمی خوام چیز دیگه بیاد یا بره و
فقط می خوام اون نوار بالای سایتم که صفحات هستند ثابت شه و وقتی که می ام پایین اون هم بیاد پایین هم در جای خودش باشه.
منظورم از اون نوار سربرگه 😐

علی امینی

سلام
میتونید از این پست استفاده کنید.

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.