saeedparsa

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

4 پست در این موضوع

آموزش ووکامرس قالب جوملا قالب وردپرس قالب رایگان وردپرس قالب رایگان جوملا هاست نامحدود هاست جوملا هاست لاراول هاست وردپرس هاست ارزان هاست ربات تلگرام خرید دامنه آموزش ساخت ربات تلگرام با php آموزش لاراول آموزش cPanel آموزش php آموزش فرم ساز RSform آموزش ساخت ربات جذب ممبر آموزش ساخت ربات دوستیابی آموزش ساخت ربات فروشگاهی برای ووکامرس آموزش طراحی سایت داینامیک با php آموزش بخش پشتیبانی با rsticket

برای اعمالی چنین افکتی شما باید css3 و js مسلط باشید

ولی در هر حال بنده یه توضیح کوچولو میدم (یه فایل هم واستون آماده کردم که می تونید از اون هم استفاده کنید)

1- دو تا فایل واستون قرار میدم با نام های ( animate.css و wow.js) این فایل رو همراه با پوشه های css و js در پوشه ی اصلی خودتون کپی کنید.

2- animate.css افکت های خاصی رو در عناصر بوجود میاره، wow.js عناصر رو پنهان میکنه تا زمانی که صفحه در ابتدا لود شد و یا اسکرول خورد با افکتی که animate.css به اونها میده ظاهر بشن.

3-خوب از html شروع میکنیم. یک صفحه ایجاد کنید و نام این صفحه رو index.html قرار بدید.

4- فایل animate.css رو در عنصر head و فایل wow.js رو انتهای صفحه فراخوانی کنید

5- از کد زیر استفاده میکنیم تا روی تمامی عناصر موجود در صفحه wow.js اعمال بشه:

<script>

           new WOW().init();

</script>

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

باکسی که مد نظرمون هست رو به شکل زیر ایجاد میکنیم:

<div> iranweblearn.com </div>

یک DIV کاملا ساده ، حالا با css اون رو تبدیل به یک باکس آبی رنگ میکنیم:

div{margin: 60px 0; width: 200px; height: 300px; padding: 25px; color: #fff; background-color: #4484F1;}

اگر خاطرتون باشه گفتم wow.js برای این منظور در نظر گرفته شده که عنصر رو پنهان کنه و با افکت اون رو نمایش بده پس کلاس wow رو به همه ی عناصر اختصاص بدید:

<div class="wow"> Iranweblearn.com </div>

برا اعمال افکت شما میتونید یکی از افکت های animate.css رو به عنصر اختصاص بدید.

برای مشاهده لیست کامل افکت ها با دموی آنلاین به این لینک مراجعه کنید.

خوب با توجه به افکت هایی که دیدید، ما میخوایم باکسمون از سمت چپ به راست نمایان بشه پس از bounceInLeft استفاده میکنیم:

<div class="wow bounceInLeft"> Iranweblearn.com </div>

تا اینجا عنصر ما پنهان هست و زمانی که صفحه لود میشه با افکت bounceInLeft ظاهر میشه و اگر به اسکرول نیاز باشه با اسکرول صفحه ظاهر میشه.

---------------------------------------------------------------------------------------------------------------

دانلود فایل

Share this post


Link to post
Share on other sites

سلام

مرسی بابات راهنماییتون ولی متاسفانه هرکاری کردم نتونستم اعمال کنم گفته هاش شمارو... . اگه زحمت بکشید فایل قالب رو میذارم برام درستش کنید ممنون میشم.شبیه این قالب http://demo.joomdev.com/newjersey/

فایل قالب :

http://s1.picofile.com/file/8262102800/jd_atlanta.rar.html

Share this post


Link to post
Share on other sites

برای ارسال نظر یک حساب کاربری ایجاد کنید یا وارد حساب خود شوید

برای اینکه بتوانید نظر ارسال کنید نیاز دارید که کاربر سایت شوید

ایجاد یک حساب کاربری

برای حساب کاربری جدید در انجمن ما ثبت نام کنید. عضویت خیلی ساده است !


ثبت نام یک حساب کاربری جدید

ورود به حساب کاربری

دارای حساب کاربری هستید؟ از اینجا وارد شوید


ورود به حساب کاربری