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

[saeedparsa 10]

چطور میشه موقعیت های قالب رو به اینصورت طراحی کرد که با اسکرول ظاهر بشن؟

Favourite - free responsive Joomla!3 template - FavThemes - Joomla! Responsive Templates and Extensions

[clik8000 16]

برای اعمالی چنین افکتی شما باید 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 ظاهر میشه و اگر به اسکرول نیاز باشه با اسکرول صفحه ظاهر میشه.

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

دانلود فایل

[saeedparsa 10]

سلام

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

فایل قالب :

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

[saeedparsa 10]

نمیشه اینکارو برام انجام بدید؟