آموزش استفاد از کتابخونه Typedjs(افکت تایپ متن)
سلام
احتمالا در بعضی از صفحات وب دیدید که متنی به صورت خودکار تایپ و سپس پاک میشود و از دوباره یک متن دیگه شروع به تایپ شدن میکند و ادامه پیدا میکند( که به اصطلاح بهش افکت تایپ متن گفته میشود)، برای اینکه شما هم در طراحی های خود بتونید از همچین افکتی استفاده کنید نیاز به کتابخونه Typed.js دارد، در ادامه همراه بپرسم باشید تا کار با این کتابخانه را یاد بگیرید.
پیش نمایش:
ابتدا بهتر است تا پیش نمایش از کاری که میخوایم انجام بدیم را مشاهده کنید.
آموزش:
- ابتدا باید کتابخونه Typed.js را دانلود و در صفحه وب فراخوانی کنید(برای دانلود، کلیک کنید).
۱ |
<script type="text/javascript" src="typed.js"></script> |
کد بالا را درون تگ <head> </head> قرار داده و مسیر فایل را وارد کنید.
به چند روش می توانیم از این کتابخونه استفاده کنیم، که در ادامه به ساده ترین و اصولی ترین(SEO Friendly) می پردازیم.
- تگ اسکریپت زیر را نیز به صفحه وب خود اضافه کنید(تا کتابخونه قابل استفاده باشد)
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ |
<script> document.addEventListener('DOMContentLoaded', function(){ Typed.new("#typed", { stringsElement: document.getElementById('typed-strings'), typeSpeed: ۳۰, backDelay: ۵۰۰, loop: false, contentType: 'html', // or text // defaults to null for infinite loop loopCount: null, callback: function(){ foo(); }, resetCallback: function() { newTyped(); } }); var resetElement = document.querySelector('.reset'); if(resetElement) { resetElement.addEventListener('click', function() { document.getElementById('typed')._typed.reset(); }); } }); function newTyped(){ /* A new typed object */ } function foo(){ console.log("Callback"); } </script> |
- سپس نوبت می رسد به متن هایی که میخواهیم نمایش داده شود، برای اینکار کدها در بین تگ های HTML از قبل تعریف شده قرار میدهیم.
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ |
<div id="typed-strings"> <p>سلام <p> <p>به وب سایت بپرسم خوش آمدی </p> <p>در بپرسم میتونی رایگان آموزش ببینی </p> <p>رایگان مشکلات خودت رو حل کنی </p> <p> چطوری ؟؟؟؟؟؟ </p> <p>با عضویت در سایت و رفتن به بخش پرسش و پاسخ سایت </p> <p>www.beporsam.ir</p> <p>beporsam@gmail</p> </p> </div> <span id="typed" style="white-space:pre;"></span> |
به تگ div اولی آیدی typed-strings داده شده است، این آیدی در کدهای جاوا اسکریپت تعریف شده است، در واقع اگر میخواهید از پلاگین استفاده کنید می بایست یک div با این آیدی ایجاد کنید.
کار به اتمام رسید، اگر خروجی را مشاهده کنید می بینید که نشانگر ماوس ثابت است(چشمک نمیزند موقع تایپ متن)، برای اینکه نشانگر ماوس هنگام تایپ متن چشمک بزند از کد css زیر استفاده می کنیم:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ |
.typed-cursor{ opacity: ۱; -webkit-animation: blink ۰.۷s infinite; -moz-animation: blink ۰.۷s infinite; animation: blink ۰.۷s infinite; } @keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } @-webkit-keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } @-moz-keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } .typed-fade-out{ opacity: ۰; animation: ۰; transition: opacity .۲۵s; } |
ممکن است کمی گیج شده باشید!
در نهایت صفحه HTML ما که در آن از افکت تایپ متنی استفاده کردیم به این صورت است:
۱ ۲ ۳ ۴ ۵ ۶ ۷ ۸ ۹ ۱۰ ۱۱ ۱۲ ۱۳ ۱۴ ۱۵ ۱۶ ۱۷ ۱۸ ۱۹ ۲۰ ۲۱ ۲۲ ۲۳ ۲۴ ۲۵ ۲۶ ۲۷ ۲۸ ۲۹ ۳۰ ۳۱ ۳۲ ۳۳ ۳۴ ۳۵ ۳۶ ۳۷ ۳۸ ۳۹ ۴۰ ۴۱ ۴۲ ۴۳ ۴۴ ۴۵ ۴۶ ۴۷ ۴۸ ۴۹ ۵۰ ۵۱ ۵۲ ۵۳ ۵۴ ۵۵ ۵۶ ۵۷ ۵۸ ۵۹ ۶۰ ۶۱ ۶۲ ۶۳ ۶۴ ۶۵ ۶۶ ۶۷ ۶۸ ۶۹ ۷۰ ۷۱ ۷۲ ۷۳ ۷۴ ۷۵ ۷۶ ۷۷ ۷۸ ۷۹ ۸۰ ۸۱ ۸۲ |
<!doctype html> <html lang="fa"> <head> <meta charset="UTF-8"> <script type="text/javascript" src="typed.js"></script> </head> <body dir="rtl"> <script> document.addEventListener('DOMContentLoaded', function(){ Typed.new("#typed", { stringsElement: document.getElementById('typed-strings'), typeSpeed: ۳۰, backDelay: ۵۰۰, loop: false, contentType: 'html', // or text // defaults to null for infinite loop loopCount: null, callback: function(){ foo(); }, resetCallback: function() { newTyped(); } }); var resetElement = document.querySelector('.reset'); if(resetElement) { resetElement.addEventListener('click', function() { document.getElementById('typed')._typed.reset(); }); } }); function newTyped(){ /* A new typed object */ } function foo(){ console.log("Callback"); } </script> <style> .typed-cursor{ opacity: ۱; -webkit-animation: blink ۰.۷s infinite; -moz-animation: blink ۰.۷s infinite; animation: blink ۰.۷s infinite; } @keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } @-webkit-keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } @-moz-keyframes blink{ ۰% { opacity:۱; } ۵۰% { opacity:۰; } ۱۰۰% { opacity:۱; } } .typed-fade-out{ opacity: ۰; animation: ۰; transition: opacity .۲۵s; } </style> <div id="typed-strings"> <p>سلام <p> <p>به وب سایت بپرسم خوش آمدی </p> <p>در بپرسم میتونی رایگان آموزش ببینی </p> <p>رایگان مشکلات خودت رو حل کنی </p> <p> چطوری ؟؟؟؟؟؟ </p> <p>با عضویت در سایت و رفتن به بخش پرسش و پاسخ سایت </p> <p>www.beporsam.ir</p> <p>beporsam@gmail</p> </p> </div> <span id="typed" style="white-space:pre;"></span> </body> </html> |
برای مشاهده کتابخونه Typed.js و همچنین آشنایی بیشتر با این کتابخونه و تنظیمات آن، کلیک کنید.
خب با دیدن کدهای بالا احتمالا مشکلتون حل شده، اگر مشکلتون حل نشده و نتونستید این افکت رو توی صفحه وبتون پیاده سازی کنید از بخش پرسش و پاسخ سایت استفاده کنید.
در پایان نیز میتوانید سورس مربوط به آموزش را دانلود کنید.
موفق باشید.
ارسال نظر
شما باید وارد شوید یا عضو شوید تا بتوانید نظر ارسال کنید