مهمان عزیز خوش آمدید. ورود ثبت نام



امتیاز موضوع:
  • 0 رای - 0 میانگین
  • 1
  • 2
  • 3
  • 4
  • 5

[-]
کلمات کلیدی
آموزش افزودن انیمیشن typed به متون انجمن

آموزش افزودن انیمیشن typed به متون انجمن
درود دوستان،
این صفحه رو ببینید: typed.js،
همونطور که میبینید متون با استفاده از انیمیشن متنی تایپ نمایش داده میشود. امروز به شما آموزش میدهیم که چگونه متون انجمن خود را به این صورت نمایش دهید.
گام نخست: بروید به: صفحه مدیریت [admin/index.php] >> قالب ها و پوسته ها >> قالب ها [admin/index.php?module=style-templates] >> قالبی که در حال استفاده هستید >> قالب های پانوشت >> Footer
تکه کد زیر را در زیر سایر تگ های <script> بیافزایید:
کد:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
<script src="http://up.20script.ir/file/aee6-typed-min.js"></script>
<script>
function newTyped(){}function foo(){console.log("Callback")}$(function(){$("#typed").typed({stringsElement:$("#typed-strings"),typeSpeed:30,backDelay:500,loop:!1,contentType:"html",loopCount:!1,callback:function(){foo()},resetCallback:function(){newTyped()}}),$(".reset").click(function(){$("#typed").typed("reset")})});
</script>
توجه: اگر از قبل پرونده JQuery.min.js 3.0.0 را به پانوشت خود افزوده اید قسمت زیر که در کد بالا دیده میشود را نیافزایید:
کد:
<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
گام دوم: بروید به: صفحه مدیریت [admin/index.php] >> قالب ها و پوسته ها >> پوسته مورد نظر شما >> global.css >> حالا در ابتدای آن بنویسید:
کد:
.typed-cursor{opacity:1;font-weight:100;-webkit-animation:blink .7s infinite;-moz-animation:blink .7s infinite;-ms-animation:blink .7s infinite;-o-animation:blink .7s infinite;animation:blink .7s infinite}50%{opacity:0}100%{opacity:1}@-webkit-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-moz-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-ms-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}@-o-keyframes blink{0%{opacity:1}50%{opacity:0}100%{opacity:1}}
گام سوم: به هر کجا که میخواهید متن شما با این انیمیشن نشان داده شود بروید. برای مثال من به اینجا رفتم:
صفحه مدیریت [admin/index.php] >> قالب ها و پوسته ها >> قالب ها [admin/index.php?module=style-templates] >> قالبی که در حال استفاده هستید >> قالب های سربرگ >> header
و روی صفحه پارالکس ی که ساخته بودم یک متن با این انیمیشن ساختم به این صورت:
متن من بود:
کد:
<div class="parallax-window parallaxedbox" data-parallax="scroll" data-image-src="http://up.20script.ir/file/ab64-farsejin-pink-flower-wallpaper-1366x768.jpg">
انجمن گیلاس فروم
</div>
که آن را به این صورت تبدیل کردم:
کد:
<div class="parallax-window parallaxedbox" data-parallax="scroll" data-image-src="http://up.20script.ir/file/ab64-farsejin-pink-flower-wallpaper-1366x768.jpg">
<div id="typed-strings">
<p>انجمن تفریحی <strong>گیلاس فروم</strong></p>
<p>یزرگترین، آزادترین و راحت ترین انجمن تفریحی پارسی زبان</p>
<p>هر آنچه میخواهید بنویسید، بخوانید و به اشتراک بگذارید!</p>
<p>با ما همراه باشید!</p>
</div>
<span id="typed" style="white-space:pre;"></span>
</div>
یعنی یک div یا آی دی typed-strings ساختم و در هر خط متنی که میخواستم نمایش و پاک شود را نوشتم. امتحان کنید تا متوجه روال کار شوید. هر خط با پویانمایی نوشته شده و سپس پاک میشود و خط بعدی با پویانمایی تایپی نوشته میشود. در نهایت هم <span id="typed" style="white-space:pre;"></span> را افزودم ( این به روال کار typed.js ربط دارد )

موفق باشید.
مدیران لطفا انتقال بدن.


اعتبار و تشکر یادتون نره تصویر: http://www.cdn.my-bb.ir/images/smilies-v6/biggrin.gif
پاسخ


موضوعات مشابه ...
موضوع نویسنده پاسخ بازدید آخرین ارسال
  مناسبت آموزش ایجاد بنر گوشه به مناسبت رحلت حضرت محمد (ص) Develepor 0 31 ۰۸ آذر ۱۳۹۵، ۰۵:۱۵ ب.ظ
آخرین ارسال: Develepor
Thumbs Up آموزش کار با تجهیزات شبکه میکروتیک و MikroTik RouterOS IrIsT 0 64 ۱۱ آبان ۱۳۹۵، ۰۷:۲۵ ب.ظ
آخرین ارسال: IrIsT
  افزودن پخش کننده آهنگ در صفحه اصلی - audio.js systemengineer 0 129 ۲۷ خرداد ۱۳۹۵، ۰۱:۲۴ ب.ظ
آخرین ارسال: systemengineer
  آموزش css و کدهای زیبای آن KoG 28 8,554 ۲۲ آبان ۱۳۹۴، ۱۱:۵۸ ق.ظ
آخرین ارسال: Ehssan_it
  تغیییر رمز عبور در انجمن مای بی بی MIHAN 1 2,111 ۱۸ تير ۱۳۹۳، ۰۳:۲۴ ق.ظ
آخرین ارسال: alireza_k
  آموزش سئو پیشرفته(قسمت اول) mhdbadboy 0 1,351 ۰۷ اردیبهشت ۱۳۹۳، ۰۶:۲۹ ب.ظ
آخرین ارسال: mhdbadboy
  آموزش ساخت سایت برای انجمن Drow-Ranger 12 3,601 ۱۸ فروردین ۱۳۹۳، ۰۵:۱۳ ب.ظ
آخرین ارسال: mellat
  سری آموزش های ویدیویی Html _Arman 0 2,153 ۲۵ اسفند ۱۳۹۱، ۰۲:۰۱ ق.ظ
آخرین ارسال: _Arman
  آموزش Html - 1 آشنایی با html _Arman 0 2,468 ۰۷ اسفند ۱۳۹۱، ۱۱:۲۷ ق.ظ
آخرین ارسال: _Arman

پرش به انجمن:


کاربران در حال بازدید این موضوع:

1 مهمان


درباره‌ی ما

گروه پشتیبانی فارسی مای بی بی My-BB.Ir در واپسین روزهای پاییز 1391 کار خود را در زمینه مای بی بی آغاز کرد. این گروه با توکل بر خدای منان و دانش فنی خود در تلاش است فعالیتی هرچند ناچیز در زمینه ارتقا و پشتیبانی مای بی بی انجام دهد.
تمامی حقوق برای وب‌سایت پشتیبانی فارسی مای بی‌بی (My-BB.Ir) محفوظ می‌باشد و هرگونه کپی‌برداری از آن شرعا حرام و قانونا غیرمجاز می‌باشد.
قدرت گرفته از مای بی‌بی - فارسی‌ساز: My-BB.Ir و IORA.Ir