۱۰ افکت صفحه انتقال CSS با جاوااسکریپت،CSS Page Transitions Effect(سری اول)

در این پست قصد داریم بهترین جلوه های انتقال صفحات CSS را در طی دو پست خدمت شما معرفی کنیم. عده ایی از متخصصان حوزه وب سایت و توسعه وب برخی از جلوه های انتقال صفحه CSS را با JS (جاوا اسکریپت) طراحی کرده و در اختیار شما قرار داده اند تا براحتی از ان ها استفاده کنید.

نویسنده سید علی اندرزگو

۱۰ افکت صفحه انتقال CSS با جاوااسکریپت،CSS Page  Transitions Effect(سری اول)

در این پست قصد داریم بهترین جلوه های انتقال صفحات CSS را در طی دو پست خدمت شما معرفی کنیم. عده ایی از متخصصان حوزه وب سایت و توسعه وب برخی از جلوه های انتقال صفحه CSS را با JS (جاوا اسکریپت) طراحی کرده و در اختیار شما قرار داده اند تا براحتی از ان ها استفاده کنید.

این جلوه های انتقال صفحه با استفاده از CSS ،HTML ،JavaScript واستفاده از کلاس ها و تأثیرات و مؤلفه های آن ها طراحی شده اند.

۱ . Pure HTML CSS One page Vertical Navigation

مورد اول یکی از جالبترین جلوه های انتقال صفحه CSS است که از CSS خالص و بدون جاوا اسکریپت استفاده کرده، و از یک صفحه ناوبری جذاب استفاده می کند. ساده و خلاقانه با استفاده از کنسول صفحات را تغییر می دهد تا یک مورد زیر را کشف کند. این مورد برای سایت هایی که از برنامه One Page استفاده می کنند ایده آل است زیرا این تغییر به طور بی عیب و نقص با ساختار قالب سازگار است.

برای مسیر ساده تر، یک منو با نمادهای پیمایش در سمت چپ قرار داده شده است. کاربران می توانند از این یا صفحه کلیدها برای حرکت در سایت استفاده کنند. این مثال css خالص از انتقال صفحه می تواند برای بوت استرپ یا هر پروژه دیگر نیز استفاده شود.

Demo/Code

۲ . CSS and JavaScript Page Transitions

در میان اکثر جمع ما ، این تغییر صفحه CSS در مقایسه با سایر تأثیرات ممکن است فوق العاده باشد. می توانید از این قسمت برای منطقه خود استفاده کنید. همانطور که در نسخه ی نمایشی یافت می شود ، ضربه زدن روی منو شما را به صفحه جداگانه با تأثیر پیشرفت می برد. این یک تأثیر اساسی و در عین حال حیرت انگیز را همراه می کند که به همین ترتیب رنگ ها را برای یک فرد تغییر می دهد. بنابراین به شرطی که شما کسی باشید که باید آن را تغییر داده و آن را برای مشتری خود جذاب کنید ، در این مرحله این همان است.

این مثال css خالص از انتقال صفحه می تواند برای بوت استرپ یا هر پروژه دیگر نیز استفاده شود.

Demo/Code

۳ . Page transition CSS3 and JS

در صورتی که تصور کنید که یک گروه برجسته از همه نشانگرها و ترکیبات را پاک کند، در آن مرحله این پیشرفت صفحه CSS همان چیزی است که شما می توانید از آن استفاده کنید. پس از تأثیر تمیز کردن قدیمی، این مدل تنوع متنوعی با کدگذاری CSS و جی کوئری به وجود آمده است. ساده و در عین حال قدرتمند ، این پیشرفت صفحه باعث می شود پس از یک حرکت تمیز کردن ، صفحه از صفحه به صفحه دیگر تغییر یابد.

این یک مورد جالب دیگر از جلوه های انتقال صفحه است که از css خالص با js (جاوا اسکریپت) استفاده می کند.

Demo/Code

۵ . GSAP Cubic Bezier Page Transition

این یکی دیگر از موارد شگفت انگیز آنچه شما می توانید با انتقال صفحه CSS و سرزندگی انجام دهید. با استفاده از پایه و اساس چرخش و زنده ، با ضربه زدن بر روی دکمه ، از تأثیر تغییر اسلایدها برای پشته کردن صفحه نمایش دیگر استفاده می کنید. استفاده از آن به عنوان یک ارائه یا نقطه ورود برای هر گونه تخصص خاصی که با یک محصول سازنده و یکی از انواع مختلفی از سایت خود روبرو می شوید.

هنگامی که در صفحه ای که با آن هماهنگ شده اید ، انجام شود ، بدون هیچ زحمتی روی بازگشت به خانه کلیک کنید تا به صفحه گذشته برگردید ، این بار با نگاه کردن به جلو. این مثال css خالص از انتقال صفحه می تواند برای بوت استرپ یا هر پروژه دیگر نیز استفاده شود. با توجه به ورودی کتابخانه GSAP ، این صفحه CSS باعث ایجاد حرکات بسیار سریع نیز می شود.

Demo/Code

۶ . Responsive Bodymovin Modal CSS Page Transition

انتخاب پویا و روشن برای کسانی که در جستجوی آن هستند ، این انتقال صفحه CSS راهی را برای یک دیدگاه فزاینده پیچیده و محرک فراهم می کند. لذت بردن از یک سرگردان و به وضوح جذاب ، باعث می شود که تغییر در صفحه زیر یک روش جذاب در کل باشد.

لایه های اشکال تصادفی منقبض شده و در ضمن پاک کردن مسیری برای پشته کردن صفحه جدید گسترش می یابد. این کار با Lottie انجام شده است و علاوه بر این از پیشرفت های خاصی در Adobe After Effect به زندگی استفاده می کند. این یک مورد جالب دیگر از جلوه های انتقال صفحه است که از css خالص با js (جاوا اسکریپت) استفاده می کند.

Demo/Code

۷ . Vue2 Page Transitions with GSAP

در بین تمام طراحی ها تاکنون ، ممکن است این تغییر صفحه CSS کل بسته باشد. شما یک ، نه دو ، بلکه ۶ پیشرفت منحصر به فرد را در یک کسب می کنید. این همراه با بیشتر تأثیرات اساسی و اساسی است. مانند بزرگنمایی ، کشویی ، کشویی و تنها نوک کوه یخ. بنابراین به شرطی که شما کسی باشید که باید آن را تغییر داده و آن را برای مشتری خود جذاب کنید ، در این مرحله این همان است.

این مثال css خالص از انتقال صفحه می تواند برای بوت استرپ یا هر پروژه دیگر نیز استفاده شود.

Demo/Code

۸ . Dummy Multi Layer Page Reveal Effect

اجرای برنامه های متوسط ، یک آغازگر ابتکاری و در عین حال بسیار ساده با تغییرات صفحه CSS خیره کننده است. این گزینه های سازگار را همراهی می کند زیرا شامل همه تأثیرات اساسی مانند یک بسته نرم افزاری است. در خود نسخه ی نمایشی ما چهار منطقه متمایز را در بالا ، پایه ، چپ و راست مشاهده می کنیم. ضربه زدن روی هر یک از آنها جلوه های کشویی رنگ ها را به شما می دهد.

برای هر سایتی ایده آل است، با استفاده از این تغییرات صفحه CSS مطمئناً سایت شما را به سطح زیر بالا می برد. همچنین می توانید از این مثال از انتقال صفحه های css خالص برای راه انداز خود یا هر پروژه دیگر استفاده کنید.

Demo/Code

۹ . Split 3D Carousel

یکی دیگر از انتقال صفحات CSS هیپنوتیزم که برای آن در نظر گرفته شده است این Carousel Split 3D است. چه جالب تر ، شبیه به نام خود ، این مدل در اینجا از تاثیر چرخ فلک ۳D استفاده می کند و باعث تغییر فوق العاده می شود. بی عیب و نقص برای نمایش هر یک از مواد خود به صورت جذاب ، چرا با شرکت بعدی یا فعلی خود ارتباط طولانی مدت برقرار نمی کنید؟ صفحه نمایش به قسمتهای مساوی تبدیل شده است كه به طور عامدانه تقلید كننده تأثیر چرخش است.

برای مسیر آسان تر ، علاوه بر آن نمادهای مسیر را نیز در سمت راست قرار داده است. همچنین ، این باعث می شود تا مشتریان شما بتوانند با یک ضربه محکم و سریع به جستجوی هر آنچه می پردازند ، بپردازند. با توجه به HTML ، CSS و JavaScript ، می توان از اجرای صحیح تضمین کرد.

Demo/Code

۱۰ . One Page Scroll with Depth Effect

تفسیر دیگر از انتقال صفحه CSS به پارگمنت این تأثیر پیشرفت و سرد وابسته به کدهای CSS است. توسط و توسط دو صفحه نمایش تقسیم شده شروع می شود. همانطور که ممکن است ، این بار به عنوان مخالف با کشویی در همه ، این مدل از عمق یا خاموش شدن در نتیجه استفاده می کند. پس از پایان هر پرده پرده ، هر مرحله که نمایشگاه بسته شود و افتتاح شود ، طول می کشد.

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

Demo/Code

۱۰ افکت صفحه انتقال CSS با جاوااسکریپت،CSS Page Transitions Effect(سری دوم)

منبع

پاسخی بگذارید

ایمیل شما منتشر نشده و نزد ما محفوظ است.