افکت متن (لامپ نئون)

- visibility ۲ mode_comment

سلام به همه ی دوستان

امروز می خواهم شما رو با یکی از قابلیت های پرکار برد jQuery آشنا کنم که اون افکت متن یا همون Text Effect است. این قابلیت که با استفاده از , Css, jQuery و چند خط Html امکان پذیره میتونه ظاهر سایت شما رو از خشکی و بی روحی در بیاورد که استفاده از این ابزار رو در سایت یا وبلاگتون توصیه میکنم. اسم این افکت لامپ نئونی یا Text Neon Effect است. اما چند تا نکته است که قبل از شروع کار باید توجه داشته باشید :

در این کد فوق به دلیل عدم ساپورت از زبان فارسی فقط میتوانید از حروف انگلیسی  استفاده کنید به مثال زیر توجه کنید :

سون لرن => اشتباه                   7learn  => درست

فراخوانی فایل ها

خوب برای شروع باید فایل های زیر را دانلود کنید و بعد کد های زیر را در قالبتان در بخش <head> قرار دهید :

در کد های بالا :

در خط 1 آدرس فایل Html5 رو که دانلود کردید بگزارید.

خط 2 : آدرس فایل Text style.css را بگزارید.

خط 5 : آدرس فایل Text Effect jQuery.js را جایگزین کنید.

کد jQuery

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

اگر دمو رو دیده باشید متن اول که سفید رنگ است تنظیمات اون مربوط به خط های 4 تا 10 است و متن دوم که قرمز رنگ است تنظیمات اون مزبوط به خط های 14 تا 17 است. (اگر با jQuery  کار نکردید و تنظیمات بالا را بلد نیستید در بخش دیدگاه ها بگویید.)

کد Html

خوب حالا نوبت به کد Html میرسه . هرجایی از قالب که میخواهید متن شما نمایش داده بشه این کد رو قرار بدین :

پایان ...

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

در مطلب بعدی افکت متن به صورت منحنی رو آموزش میدهم .

یا علی ...

comment دیدگاه کاربران
بهرام

خیلی جالب و عالی، آفرین ❓

مهدی اکرمی

لطف دارید 😀

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.