در حال نمایش 6 نوشته - 1 تا 6 (از کل 6)
  • نویسنده
    نوشته ها
  • #29895

    Mohammad.MTZ
    مشارکت کننده

    سلام
    خسته نباشید
    ببخشید به تازگی قالب هایی طراحی میشن که با پایین اومدن اسکرول بخش های سایت به صورت fade ظاهر میشن
    مثل این:
    http://demo.hamyarwp.com/free/accesspress-mag/

    نحوه ی کد نویسی این سایت ها به چه صورته؟
    این ویژگی در CSS اعمال میشه؟
    ممنون

    #29898

    سعید شعبانی
    کلید دار

    درود, در این قالب های از ترکیب جاوا اسکریپت و css برای اعمال افکت هایی در زمان اسکرول صفحه روی بخش های مختلف قالب استفاده می شود. از جاوا اسکریپت اغلب اوقات برای تشخیص یا پیش بینی زمان ظاهر شدن یک المان و ردیابی موقعیت اون المان استفاده می شود و با css انیمیشن های جذاب به المان ها اضافه می شود. به صورت دستی میشه چنین افکت هایی را به قالب داد ولی یکم وقت گیر هست و باید از صفر همه چیز رو خودتون برنامه نویسی و کدنویسی کنید. یک سری فریم ورک هایی دقیقا برای همین کار طراحی و ساخته شدند که کار را خیلی ساده می کنند. فریم ورک WOW.js و Animate.css یکی از دو framework خوب برای این کار هستند.

    #29899

    Mohammad.MTZ
    مشارکت کننده

    نحوه ی استفاده از این فریم ورکها ساده است؟

    #29900

    سعید شعبانی
    کلید دار

    بله خیلی آسون هست. مثلا برای استفاده از woo.js باید مراحل زیر را طی کنید:

    1- فایل Animate.css و wow.min.js را در هدر قرار بدید.

    2- کد زیر را بعد از کدهای فراخوانی دو فایل Animate.css و wow.min.js قرار بدید.

    <script>
     new WOW().init();
    </script>

    3- اضافه کردن کلاس wow به المان هایی که می خواهید قبل از رسیدن اسکرول صفحه به اونها پنهان باشند و با رسیدن اسکرول صفحه دیده شوند.

    4- اضافه کردن نوع افکت اون المان با استفاده از کلاس های bounceInUp, fadeIn, fadeInLeftBig و …

    به همین راحتی. البته تنظیمات دیگه هم داره که می تونید در صفحه مستندات این framework ببینید.

    #29912

    Mohammad.MTZ
    مشارکت کننده

    بسیار سپاسگذارم.
    اگر به مشکلی بر خوردم همینجا عنوان میکنم.
    ممنون 🙂

    #29921

    سعید شعبانی
    کلید دار

    در خدمتم

در حال نمایش 6 نوشته - 1 تا 6 (از کل 6)

کاربر گرامی برای پاسخ به این موضوع اگر عضو روکش هستید باید سایت شوید در غیر اینصورت باید عضو شوید.