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

در ادامه معرفی بهترین جلوه های انتقال صفحات CSS در این پست ۱۰ مورد دیگر را خدمت شما عزیزان معرفی می کنیم. عده ایی از متخصصان حوزه وب سایت و توسعه وب برخی از جلوه های انتقال صفحه CSS را با JS (جاوا اسکریپت) طراحی کرده و در اختیار شما قرار داده اند تا براحتی از ان ها استفاده کنید. این جلوه های انتقال صفحه با استفاده از CSS ،HTML ،JavaScript واستفاده از کلاس ها و تأثیرات و مؤلفه های آن ها طراحی شده اند.

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

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

در ادامه معرفی بهترین جلوه های انتقال صفحات CSS در این پست ۱۰ مورد دیگر را خدمت شما عزیزان معرفی می کنیم. عده ایی از متخصصان حوزه وب سایت و توسعه وب برخی از جلوه های انتقال صفحه CSS را با JS (جاوا اسکریپت) طراحی کرده و در اختیار شما قرار داده اند تا براحتی از ان ها استفاده کنید. این جلوه های انتقال صفحه با استفاده از CSS ،HTML ،JavaScript واستفاده از کلاس ها و تأثیرات و مؤلفه های آن ها طراحی شده اند.

۱ . Simple CSS Page Transition

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

Demo/Code

۲ . Fullscreen Layout Page Transitions

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

همچنین در صورتی کاربران این دیدگاه را ترک کنند، این قسمت ها به موقعیت های قبلی خود باز میگردند. این یک مورد جالب دیگر از جلوه های انتقال صفحه است که از css خالص با js (جاوا اسکریپت) استفاده می کند. عملاً همه تأثیرات CSS با استفاده از کلاس های JavaScript برای سازگاری کامل محدود می شوند.

Demo/Code

۳ . Reveal Content Animation and Menu

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

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

Demo/Code

۴ . Expanding Card Page Transition Effect

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

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

Demo/Code

۵ . Page Transition with Loader

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

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

Demo/Code

۶ . Material Design Transition

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

Demo/Code

۷ . Skewed One Page Scroll

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

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

Demo/Code

۸ . Kontext Transition Example

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

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

Demo/Code

۹ . Animated Page Transition

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

Demo/Code

۱۰ . Simple CSS3 Page Transition

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

نکته جالب این است که به طور مشابه ، تأثیر شگفت انگیزی از نوشتارها را نیز در بر می گیرد که ممکن است مشتری ها در طولانی مدت روی ضربه زدن روی تصویر جذاب بدانند.

Demo/Code

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

منبع

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

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