افکت نمایش مطالب در سایت

این تاپیک 3 پاسخ و 2 مشارکت کننده دارد . آخرین آپدیت توسط :  حمید رضا مصطفی زاده ،‏ 11 ماه و 3 هفته پیش .

این تاپیک تاکنون 337 بازدید داشته است .

نویسنده پست
دوشنبه ، 14 دسامبر 2015     2:03 ب.ظ #


ساسان

Subscriber
2 پست2 تاپیک

درود و احترام

دوستان میخام از افکت های ک مث سایت جهان پی هست در سایتم استفاده کنم

میشه راهنمایی کنید باید چیکار کنم

افکت های ک هنگام اسکرول مطالب رو نشون میده

ادرس سایت  : https://www.jahanpay.com

1  تشکر
:: این تاپیک، پاسخ تائیدشده دارد : مشاهده پاسخ تائید شده توسط سوال کننده
دوشنبه ، 14 دسامبر 2015     7:09 ب.ظ #


حمید رضا مصطفی زاده

Subscriber
124 پست11 تاپیک

سلام

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

waypoints2.0.4.min.js این کار باعث میشه که با اسکرول خوردن صفحه موقعیت انیمیشن های شما رو تشخیص بده.مثلا به وسط صفحه یا بخشی که با اسکرول خوردن رسیدی فقط تشخص بده الان رسیدیم به وسط صفحه و یا اون بخش.

خب تا اینجای کار فقط تشخیص دادیم اسکرول ما کجای صفحه هست.

حالا وقتشه انیمیشن رو به صفحمون اعمال کنیم.

پس از لود کردن فایل فوق شما باید انیمیشنی که مد نظرتون هست (مثلا یه شی از بالا بیاد از کنار بیاد  و ..... حالت های بسیار زیبای دیگه ای که سلیقه ای هست)رو اعمال کنید برای اینکه انواع افکت ها رو ببینید

به سایت https://daneden.github.io/animate.css/ و دانلود کنید این پلاگین رو و سپس لودش کنید به سندتون.

پس شد تا اینجا دوتا پلاگین لود کردید.

بعد برید تو فایل css  واین کلاس ها رو اعمال کنید

.os-animation{
opacity: 0;
}

.os-animation.animated{
opacity: 1;
}

 

حالا وقتشه به تگ مورد نظر انیمیشن رو اعمال کنید.مثلا من میخواهم به یه تگ فوترم بگم از با حالت محو بیا تو صفحم به این صورت میزنم

<h4 class="text-center os-animation" data-os-animation="fadeInRightBig" data-os-animation-delay=".1s">تمامی فعاليت‌هاي سایت، تابع قوانين و مقررات جمهوري اسلامي ايران می باشد</h4>

سعی کردم ساده مطلب رو بگم.امیدوارم متوجه شده باشید.

موفق باشید

3  تشکر
سه شنبه ، 15 دسامبر 2015     10:11 ق.ظ #


ساسان

Subscriber
2 پست2 تاپیک

درود

پلاگین waypoints2.0.4.min.js سرچ کردم به نتیجه ای نرسیدم لطفا اگ میشه لینک بزارید

تشکر

2  تشکر
سه شنبه ، 15 دسامبر 2015     7:40 ب.ظ # پاسخ تائید شده توسط سوال کننده


حمید رضا مصطفی زاده

Subscriber
124 پست11 تاپیک

دوست عزیز برو به سایت زیر

http://www.oxygenna.com/tutorials/scroll-animations-using-waypoints-js-animate-css

و راهنمایی های کلی رو کرده روی گزینه view on github بزنید میرید تو این سایت زیر

https://github.com/harconst/scroll-animations

دانلود کنید.

در  ضمن فایل جی کوعری هم باید لود کنید

امیدوارم تونسته باشم کمکتون کنم.

موفق باشید

2  تشکر
پست 1 تا 4 (از مجموع 4 پست)

این تاپیک پاسخ تائید شده دارد و بسته شده است .