یکشنبه ۰۸ خرداد ۱۴۰۱

Sunday, May 29, 2022 GMT +4:30

نحوه متحرک ساختن متن با تگ marquee در HTML

html-marquee

در گستره تگ های مختلف HTML در صفحات وب بعضا به مواردی برمی خوریم که علی رغم کارایی و به اصطلاح کار راه انداز بودن توسط کنسرسیوم جهانی وب (W3C) غیراستاندارد ارزیابی شده اند، یکی از این موارد که توسط بسیاری از کاربران نیز مورد استفاده قرار می گیرد تگ Marquee است که برای متحرک سازی متن در صفحات HTML کاربرد دارد، به طور مثال در وبلاگ ها و سایت های مختلف برای به حرکت درآوردن لیستی از لینک ها در باکس های کناری یا نمایش عناوین اخبار و آخرین مطالب به صورت اسکرول افقی و خیلی ایده های جالب دیگر از تگ Marquee استفاده می شود، از این جهت با وجود غیر استاندارد بودن این تگ از نظر W3C اما به سبب کاربرد بسیارش قصد داریم در این آموزش به بررسی آن و همچنین سایر روش های جایگزین برای نمایش متن متحرک در صفحات وب بپردازیم.

تگ marquee چیست و چه کاربردی دارد؟


marquee نام تگی است که اولین بار توسط مرورگر اینترنت اکسپلورر (Internet Explorer) معرفی شد، این تگ با هدف متحرک سازی متن، تصویر و... در صفحات HTML به صورت های مختلف، از جمله اسکرول در جهت عمودی، افقی، چپ و راست، با قابلیت تنظیم سرعت، رنگ و برخی ویژگی های دیگر ارائه گردید و در حال حاضر توسط اکثر مرورگرهای وب پشتیبانی می شود، برخی آن را با تگ مشابه blink مقایسه می کنند که البته marquee با blink تفاوت دارد، چرا که از تگ blink صرفا جهت ایجاد متون و لینک های چشمک زن استفاده می شود اما تگ marquee کاربرد متفاوت دارد و برای اسکرول متن یا تصویر با قابلیت های بیشتر به کار می رود، با وجود کاربردی بودن این تگ کنسرسیوم جهانی وب W3C به دلایلی توصیه می کند که از آن در کدنویسی و طراحی صفحات وب استفاده نشود که جای تامل دارد.

چرا نباید از تگ marquee استفاده کنیم؟


چند دلیل برای اینکه نباید از تگ marquee استفاده کنیم ارائه شده است، نخست اینکه متن های متحرک توجه انسان را به خود جلب می کنند و باعث می شوند که تمرکز کاربر از روی محتوای اصلی به موارد جانبی معطوف شود، از طرفی لینک هایی که به صورت متحرک در صفحه در حرکت هستند قدرت مانور کمتری در اختیار کاربران قرار می دهند، چرا که معمولا کاربر مدت زمان کمی فرصت دارد تا روی یک لینک مد نظر کلیک کند یا باید زمانی را در انتظار اسکرول مجدد آن صبر نماید، دلیل دیگر می تواند منسوخ شدن این تگ توسط کنسرسیوم جهانی وب یا W3C باشد که ممکن است در آینده باعث عدم پشتیبانی صحیح مرورگرها از این تگ شود، از طرفی اگر می خواهیم کدنویسی معتبر از نظر سرویس اعتبار سنجی validator.w3.org داشته باشیم نیز استفاده از این تگ توصیه نمی شود.

دلایل و ضرورت استفاده از تگ marquee


علی رغم مواردی که به عنوان معایب این تگ عنوان کردیم هنوز هم می توان marquee را ساده ترین روش برای ایجاد متن متحرک در وب لقب داد، از این گذشته گاهی مواقع به طور مثال در وبلاگ و سایت هایی که به تعداد زیادی لینک خروجی می دهند، استفاده از تگ marquee می تواند به اصطلاح به جمع و جور شدن کار تا حدود زیادی کمک کند، یا در مورد سایت ها و وبلاگ هایی که مسائل مربوط به سئو و بهینه سازی برایشان دارای اهمیت چندانی نیست (به طور مثال پایگاه های اداری، سازمانی، شخصی و...) استفاده از این تگ مشکل خاصی محسوب نمی شود، برخی نیز به جهت زیباتر شدن کار از marquee استفاده می کنند، در هر حال گاهی استفاده از متن متحرک به دلایل مختلف اجتناب ناپذیر است به همین دلیل در این آموزش سعی می کنیم علاوه بر تگ پیش فرض marquee سایر روش های جایگزین را نیز بررسی کنیم.

نحوه استفاده از تگ marquee


استفاده از این تگ بسیار آسان است، کافی است متن مورد نظر خود را به صورت زیر تنظیم کنیم:
<marquee>متن متحرک</marquee>
این تگ ویژگی هایی دارد که جهت اعمال تنظیمات دلخواه می توانیم از آنها استفاده کنیم.

ویژگی behavior


مثال بالا تنها حالت پیش فرض متن متحرک را ایجاد می کند، اما اگر بخواهیم تنظیمات بیشتری بر روی نحوه حرکت، سرعت، رنگ پس زمینه و ... اعمال کنیم باید ویژگی های بیشتری را به کار ببریم، یکی از این خاصیت ها behavior است، این ویژگی در واقع نوع اسکرول را نشان می دهد و دارای سه مقدار است:
alternate: متن متحرک با برخورد به انتهای بلاک در جهت عکس و به صورت پینگ پنگی حرکت می کند.
scroll: متن از یک سمت وارد شده و از سمت دیگر بلاک خارج می شود.
slide: متن از یک سمت وارد شده و در سمت دیگر، در انتهای بلاک متوقف می شود.
مثال:
<marquee behavior="slide">متن متحرک</marquee>
با توجه به مقدار ویژگی behavior در این نمونه کد متن متحرک از یک سمت وارد شده و در انتهای بلاک متوقف می شود.

ویژگی bgcolor


تگ marquee را می توان با ویژگی bgcolor به صورت سفارشی تنظیم کرد، همانطور که از نام این ویژگی مشخص است برای تعیین رنگ پس زمینه کاربرد دارد که مقادیر کدهای هگز را در خود جای می دهد.
<marquee behavior="slide" bgcolor="#CCCCCC">متن متحرک</marquee>
کدهای رنگی هگز را می توانیم از برنامه های گرافیکی نظیر فتوشاپ یا ابزارهایی که بدین منظور در وب وجود دارد دریافت کنیم، ابزار زیر در سایت بدین منظور در نظر گرفته شده است:
https://webgoo.ir/tool/hex-rgb-color

ویژگی dir


اگر متن به زبان فارسی یا در کل به زبان هایی است که از راست به چپ نوشته می شوند بهتر است از ویژگی dir و مقادیر rtl استفاده کنیم تا جهت چینش متن به نحو صحیح نمایش داده شود، dir دو مقدار ltr (برای حروف انگلیسی و از چپ به راست) و rtl (برای حروف فارسی و از راست به چپ) دارد.
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl">متن متحرک</marquee>
عبارت LTR مخفف Left To Right و عبارت RTL مخفف Right To Left است.

ویژگی direction


از خاصیت direction برای تعیین جهت اسکرول استفاده می شود، چهار جهت اصلی یعنی بالا، پائین، چپ و راست را می توانیم به صورت مقادیر زیر در نظر بگیریم.
down: پائین
up: بالا
left: چپ
right: راست
به عنوان مثال:
<marquee behavior="slide" bgcolor="#CCCCCC" dir="rtl" direction="down">متن متحرک</marquee>
با توجه به مقادیر down برای خاصیت direction اسکرول از بالا به پائین صورت می گیرد.

ویژگی height و width


برای تعیین ارتفاع و عرض بلاکی که متن متحرک را در خود نمایش می دهد از دو خاصیت height و width با مقادیر پیکسلی یا به صورت درصد استفاده می کنیم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200">متن متحرک</marquee>
با توجه به این نمونه کد بلاکی که متن متحرک را در خود نمایش می دهد 200 پیکس عرض خواهد داشت.

ویژگی loop


برخی مواقع ممکن است بخواهیم تعداد دفعات اسکرول ها را در چند دور محدود کنیم، بدین منظور از ویژگی loop و یک عدد به عنوان مقادیر استفاده می کنیم، مقادیر 1- در واقع همان حالت پیش فرض و دور تکرار بینهایت است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1">متن متحرک</marquee>

ویژگی scrollamount


برای تعیین سرعت اسکرول (طی کردن تعداد پیکسل در هر فریم) از ویژگی scrollamount با یک عدد (معمولا بین 1 تا 10) به عنوان مقادیر استفاده می شود، هر چه عدد کوچکتر باشد سرعت اسکرول و تعداد پیکسل طی شده کم تر است و هرچه عدد بزرگتر باشد سرعت اسکرول و تعداد پیکسل در هر فریم بیشتر است.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="3">متن متحرک</marquee>

ویژگی scrolldelay


ویژگی scrolldelay در واقع تکمیل کننده scrollamount است، از scrolldelay برای تعیین وقفه ها (به میلی ثانیه) استفاده می شود، برای ایجاد بهینه ترین حالت اسکرول بهتر است برای هر دو خاصیت مقادیر 1 را در نظر بگیریم.
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1">متن متحرک</marquee>

کنترل اسکرول متن با جاوا اسکریپت


علاوه بر ویژگی هایی که تا این لحظه در تگ marquee بررسی کردیم از دو خاصیت پرکاربرد مبتنی بر جاوا اسکریپت نیز می توانیم برای کنترل حرکت متن زمانی که نشانه گر ماوس را روی آن می بریم استفاده کنیم، بر این اساس با رویدادهای onmouseover و onmouseout می توانیم کنترل رفتار بلاک را در هنگامی که کاربر ماوس را جهت کلیک کردن بر روی باکس متحرک می برد در اختیار داشته باشیم، به این صورت که پس از بردن ماوس در محدوده بلاک متن متحرک متوقف شود و با خارج شدن ماوس از محدوده بلاک دوباره متن به حرکت اسکرولی خود ادامه دهد، بدین منظور باید مقادیر زیر را برای پارامتر onmouseover و onmouseout تنظیم کنیم:
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 1, 0)">متن متحرک</marquee>
دقت کنیم مقادیر تعریف شده برای خاصیت های onmouseover و onmouseout به حروف بزرگ و کوچک حساس هستند.

استفاده از CSS و JavaScript برای ایجاد متن متحرک


همان طور که گفتیم علی رغم ساده و سریع بودن استفاده از تگ marquee برای ایجاد متن متحرک در صفحات HTML، کمیسیون جهانی وب W3C به دلایلی استفاده از این تگ را بد و منسوخ شده عنوان کرده است (هرچند مرورگرها در حال حاضر از این تگ تا حدود زیادی پشتیبانی می کنند)، به همین دلیل و به عنوان روش جایگزین می توانیم از قابلیت های CSS و در صورت نیاز کدهای JavaScript برای ایجاد و کنترل متن متحرک استفاده کنیم، یکی از پرکاربردترین این قابلیت ها استفاده از animation و ایجاد فریم های کلیدی (keyframes یا گام های انیمیشن که فرم کار از نقطه ای به نقطه دیگر تغییر می کند) است، برای این منظور چند نمونه زیر بسته به هدف کاربرد دارند:
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از راست به چپ (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    display: inline-block;
    padding-right: 100%;
    animation: marquee 12s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
با اعمال تغییرات در قسمت keyframes به صورت نمونه زیر می توانیم حالت انیمیشن را به صورت پینگ پنگی (Bouncing) تغییر دهیم:
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    50% {
        transform: translate(100%, 0);
    }
    100% {
        transform: translate(0, 0);
    }
}
در واقع به جای دو نقطه کلیدی سه نقطه (0، 50، 100 درصد) در نظر گرفته ایم.
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از چپ به راست (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text {
    display: inline-block;
    padding-left: 100%;
    animation: marquee 12s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(-100%, 0);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example ... hover over the text to check the animation pause ability.</span>
</div>
- کد CSS + HTML متن متحرک (Scrolling Text)، شروع خودکار، حرکت از بالا به پائین:
<style>
#marquee-block {
    width: 300px;
    height: 200px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    display: inline-block;
    padding-bottom: 100%;
    animation: marquee 8s linear infinite;
}
#marquee-text:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        transform: translateY(-10%);
    }
    100% {
        transform: translateY(60%);
    }
}
</style>

<div id="marquee-block">
<span id="marquee-text">اين متن متحرک جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
در این حالت برای پارامتر transform از مقدار translateY (حرکت در راستای محور Yها) استفاده کرده ایم.
برای ایجاد حالت اسکرول از پائین به بالا کافی است قسمت keyframes را به صورت زیر تغییر دهیم:
@keyframes marquee {
    0% {
        transform: translateY(60%);
    }
    100% {
        transform: translateY(-10%);
    }
}
با کم و زیاد کردن مقادیر translateY در هر فریم کلیدی می توانیم اثر آن را روی نحوه اسکرول متن بررسی کنیم.
- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از چپ به راست (مناسب برای نمایش جملات فارسی):
<style>
#marquee-block {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(65%);
    }
}
</style>

<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block">
<span id="marquee-text">اين متن متحرک فارسی جهت نمونه است.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>
همان طور که مشخص است در این روش برای کنترل شروع و توقف حالت اسلاید انیمیشن از دکمه (button) و تابع جاوا اسکریپتی (toggleSlideText) استفاده کرده ایم.
- کد CSS + JavaScript + HTML متن متحرک (Slide-In Text)، شروع با کلیک، حرکت از راست به چپ (مناسب برای نمایش جملات انگلیسی):
<style>
#marquee-block {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}
</style>

<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block">
<span id="marquee-text">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text', 'pause');">توقف</button>

مثال و پیش نمایش آنلاین


جهت کمک به درک بهتر مبحث، نمونه کدهایی را که در این آموزش درج کردیم با مثال و پیش نمایش آنلاین بررسی می کنیم:
<!DOCTYPE html>
<html lang="fa">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>وبگو | ايجاد متن متحرک با تگ marquee، CSS و جاوا اسکريپت</title>
<!-- Webgoo.ir -->
<style>
body {
    font-family: Tahoma, Geneva, sans-serif;
    font-size: 12px;
    direction: rtl;
    line-height: 22px;    
}
#marquee-block-1 {
    width: 200px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-block-2 {
    width: 500px;
    margin: 0 auto;
    white-space: nowrap;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: rtl;
}
#marquee-text-2 {
    display: inline-block;
    padding-right: 100%;
    animation: marquee-2 12s linear infinite;
}
#marquee-text-2:hover {
    animation-play-state: paused;
}
@keyframes marquee-2 {
    0% {
        transform: translate(0, 0);
    }
    100% {
        transform: translate(100%, 0);
    }
}
#marquee-block-3 {
    position: relative;
    width: 500px;
    height: 50px;
    margin: 0 auto;
    overflow: hidden;
    box-sizing: border-box;
    background: #ccc;
    direction: ltr;
}
#marquee-text-3 {
    position: absolute;
    width: 100%;
    height: 100%;
    animation: marquee-3 3s ease-out infinite;
    animation-play-state: paused;
    text-align: left;
}
@keyframes marquee-3 {
    0% {
        transform: translateX(50%);
    }
    100% {
        transform: translateX(0);
    }
}
</style>
</head>
<body>
<noscript>
جاوا اسکریپت در مرورگر شما غیر فعال است!
</noscript>

متن متحرک با تگ marquee:<br>
<div id="marquee-block-1">
<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="right" height="25" width="200" loop="-1" scrollamount="1" scrolldelay="1" onmouseover="this.setAttribute('scrollAmount', 0, 0)" onmouseout="this.setAttribute('scrollAmount', 1, 0)">متن متحرک</marquee>
</div>
<hr>
متن متحرک به صورت اسکرول با CSS:<br>
<div id="marquee-block-2">
<span id="marquee-text-2">اين متن متحرک فارسی جهت نمونه است ... برای بررسی امکان توقف انیمیشن ماوس را روی متن ببرید.</span>
</div>
<hr>
متن متحرک به صورت اسلاید با CSS:<br>
<script>
function toggleSlideText(id, type){
    var elm = document.getElementById(id);
    
    if(type == 'run'){
        elm.style.animationPlayState = 'running';
    } else if(type == 'pause'){
        elm.style.animationPlayState = 'paused';
    }
}
</script>
<div id="marquee-block-3">
<span id="marquee-text-3">this is an English animated text for example.</span>
</div>
برای بررسی حالت اسلاید بر روی دکمه کلیک کنید:
<button onclick="toggleSlideText('marquee-text-3', 'run');">اسلاید</button>
<button onclick="toggleSlideText('marquee-text-3', 'pause');">توقف</button>
</body>
</html>
پیش نمایش آنلاین
دسته بندی: آموزش کاربردی » HTML
related مطالب بیشتر:
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
کاربرد متاتگ refresh در صفحات وب (HTML)
پخش فایل صوتی (آهنگ، موسیقی پس زمینه) در سایت و وبلاگ
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
نحوه درج علامت های خاص در HTML
دیدگاه
more ۱۱۹ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
۲۰:۴۰ ۱۳۹۴/۰۱/۰۷
مرسی از توضیحاتتون عالی بود واقعا که به من کمک بسیاری کرد متشکرم
نویسنده: علی
۱۹:۰۵ ۱۳۹۴/۰۱/۲۰
با سلام و ممنون از اطلاعات و کدهای خوبتون من چند ساله که از کدهای متحرک شما استفاده میکنم
ایا میشه این کد متحرک مثل این سایت رو بزارید ؟
زیر تبلیغاتش یه سری اخرین اخبارشون میاد و سریع میره
متن ثابت است ولی پس از چند ثانیه به سمت راست سریع میرود و ناپدید میشود و متن بعدی می آید
البته این اخرین اخبار است ولی برای متنهای تصادفی یا متن دلخواه میخوام
ممنون میشم کدش رو بزارید
shop.hamehchi.com
پاسخ: 
لطفا توجه کنید که تگ marquee قابلیتی است که به صورت پیش فرض در مرورگر وجود دارد و لذا توسط ما تعریف نشده!، اما در خصوص سایت مورد نظر و این نوع افکت، در صورتی که قابلیت های تگ marquee برای هدفتان کافی نباشد، باید از jQuery یا کدنویسی پیشرفته JavaScript استفاده کنید که خود بحث مفصلی دارد، با کمی جستجو به دنبال واژه هایی مانند "اسکرول متن با جی کئوری" یا "نمایش اخبار با جی کئوری" و... در وب می توانید نمونه های زیادی را مشاهده کنید.
نویسنده: علی
۱۸:۱۵ ۱۳۹۴/۰۱/۲۲
با تشکر از پاسخ شما
البته خیلی گشتم نتونستم مثل اون رو پیدا کنم . که البته من اخبار رو نمیخوام فقط یه چند تا متن بنویسم به اون صورت پشت سر هم نشون بده حالت حرکتی نباشه
در هر صورت باز هم تشکر بابت کمکتون
پاسخ: 
با کمی آشنایی با HTML و jQuery از سورس کدهای همان سایت می توانید استفاده کنید!
نویسنده: مجید ررررررر
۰۰:۱۲ ۱۳۹۴/۰۱/۲۸
سلام برای متحرک کردن متن در جاوا اسکریپت دستوری غیر از دستور marquee داریم؟
پاسخ: 
در صورتی که به دنبال روشی راحتتر و فراتر از marquee هستید، توصیه می کنیم از jQuery استفاد کنید، JavaScript متد ساده ای برای به حرکت درآوردن متن ندارد!
نویسنده: جواد براتی
۰۷:۵۸ ۱۳۹۴/۰۲/۰۶
با سلام وخسته نباشید .حقیر یه کد html میخوام که وقتی متنی داخل این کد جهت نمایش در سایت نوشته می شود، فقط درجای خود چشمک بزند. ممنون میشوم اگه کد مورد نظر را به ایمیل ذکر شده بفرستید. سپاسگزارم
پاسخ: 
می توانید از CSS و ویژگی animation استفاده کنید، مثال:
<style>
.blink-text{
-webkit-animation-name:blinker;
-webkit-animation-duration:1s;
-webkit-animation-timing-function:linear;
-webkit-animation-iteration-count:infinite;
-moz-animation-name:blinker;
-moz-animation-duration:1s;
-moz-animation-timing-function:linear;
-moz-animation-iteration-count:infinite;
animation-name:blinker;
animation-duration:1s;
animation-timing-function:linear;
animation-iteration-count:infinite;
color:#D0080B;
direction:rtl;
}
@-moz-keyframes blinker{
0%{opacity:1.0;}
50%{opacity:0.0;}
100%{opacity:1.0;}
}
@-webkit-keyframes blinker{
0%{opacity:1.0;}
50%{opacity:0.0;}
100%{opacity:1.0;}
}
@keyframes blinker{
0%{opacity:1.0;}
50%{opacity:0.0;}
100%{opacity:1.0;}
}
</style>
<p class="blink-text">این یک متن چمکزن با استفاده از CSS است!</p>
نویسنده: علی
۱۷:۲۳ ۱۳۹۴/۰۳/۱۳
سلام. من توضیحات کامل شما رو خوندم اما چیزی رو که میخواستم نداشت. من میخوام قسمت پیوند های سایتم متحرک باشه به صورتی که یه لینک بره به سمت بالا، یه مکث بکنه و بعد یکی دیگه.
برای اینکه متوجه بشید این سایت pardisdecor.com رو باز کنید پایین صفحه قسمت مقالات آموزشی یا برخی از مشتریان رو مشاهده کنید و در صورت امکان کدش رو برام بفرستید / ممنون
پاسخ: 
برای اینگونه موارد باید از جی کئوری استفاده کنید، در صورت آشنایی می توانید در سورس کدهای همان سایت الگوبرداری کنید!
نویسنده: alireza
۰۹:۳۶ ۱۳۹۴/۰۴/۱۰
عالی بود لازمم شد ممنون
نویسنده: الهام
۱۳:۵۵ ۱۳۹۴/۰۴/۱۰
سلام خسته نباشید
ببخشید اگه سایتم رو نگاه کنید میخوام با کلیک بر روی جدیدترین ها یا پرفروش ترینهای سایت (که زیر اسلایدر قرار دارد) اسکرول بشه به یکم پایین تر که کالاهای پرفروش گذاشته شده .. ممنون میشم کدشو بگید بهم خیلی گشتم خیلی لازم دارمش
پاسخ: 
ابتدا باید یک id به دکمه و همچنین قسمت مورد نظر نسبت دهید، سپس نمونه زیر را ملاحظه کنید:
http://jsfiddle.net/kevinPHPkevin/8tLdq/1
نویسنده: محمد
۱۹:۳۴ ۱۳۹۴/۰۴/۱۰
سلام
با تشكر از سايت خوبتان يك سوال داشتم.
كدهاي جاوا اسكريپت كه براي توقف اسكرول استفاده ميشه اونجوري كه من ميخوام نيست. يعني من ميخوام كه به محض رفتن موس روي متن متحرك ، متن فورا در همانجا متوقف بشه اما كدي كه شما گذاشتيد ايجوري عمل ميكنه كه بعد از رفتن موس روي اون ، متن تا آخر اسكرول ميشه و بعد تا زماني كه موس روي آن قرار داره اسكرول بعدي انجام نميشه به عبارتي لوپ بعدي انجام نميشه نه اينكه متن فورا در جايش متوقف بشه.
اگر ممكنه كمك كنيد؟
در ضمن من نميدونم كدهاي جاوا اسكريپتي كه گذاشتيد به تگ جاوا اسكريپت يعني
<script></script>
هم نياز داره؟ اگه نيازه كجاي فايل html بايد وارد بشه؟
با سپاس فراوان
پاسخ: 
- متاسفانه مرورگرهایی مانند اپرا با تگ marquee میانه خوبی ندارند! لذا بهتر است از روش های دیگر مانند jQuery یا JavaScript و یا CSS3 استفاده کنید.
- نیازی به استفاده از تگ script برای دستورات خطی نیست.
نویسنده: ایمان
۰۱:۳۴ ۱۳۹۴/۰۹/۰۴
اقا دمتون گرم حسابی
عالی بود
نویسنده: ali
۲۱:۲۳ ۱۳۹۴/۱۱/۰۱
سلام
من میخوام متنم ابتدا ثابت باشد ولی وقتی ماوس به روی آن متن اومد متحرک بشه.
ممنون میشم اگه راهنمایی کنین...
پاسخ: 
اگر به تکه کد آخر (در آموزش) دقت کنید، پارامتر scrollamount را می توان 0 در نظر گرفت تا با این حالت اسکرول در حالت معمول غیر فعال شود، همچنین اعداد موجود در onmouseover و onmouseout بر حسب نیاز می توانند تغییر کنند!
نویسنده: ali
۲۲:۳۰ ۱۳۹۴/۱۱/۰۱
وقتی scrollamount رو صفر میکنم برای onmouseover چی بنویسم که وقتی ماوس روی آن قرار میگیرد حرکت شروع بشه. با تابع this.setAttribute آشنایی ندارم...
پاسخ: 
اعداد نشانه گر سرعت اسکرول در زمان رفتن ماوس روی بلاک (mouse over) و خارج شدن از آن (mouse out) است که می توانید با توجه به این توضیح آن را تغییر دهید، به فرض برای onmouseover پارامترها را 0 ,2 در نظر بیگرید!
نکته: اگرچه در آموزش به مزایا و معایب تگ marquee اشاره شده، اما بهتر است برای این موارد از CSS3 یا جی کئوری استفاده کنید!
نویسنده: لیلا
۱۰:۳۳ ۱۳۹۴/۱۱/۰۷
سلام ابتدا از سایت اموزشی خوبتون تشکر میکنم
سوالم اینه من میخوام چندین متن در صفحه به صورت ثابت قرار بدم و بعد 5 ثانیه متن به ترتیب دلخواه (نه رندوم) تغییر کنه
امکانش هست راهنمایی کنید ممنون
پاسخ: 
برای این کار کدهای آماده زیادی (عمدتا مبتنی بر جی کئوری) در وب وجود دارد که باید جستجو کنید، به طور مثال:
http://risq.github.io/jquery-advanced-news-ticker/index.html
نویسنده: kiarash
۲۰:۵۲ ۱۳۹۴/۱۱/۲۹
چطوری جهت حرکت متن متحرکو عوض کنم
پاسخ: 
از ویژگی direction استفاده کنید!
نویسنده: حمید
۲۲:۰۶ ۱۳۹۵/۰۲/۱۲
سلام...
واقعا مطلب کاملیه. ممنون
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق و خطایابی میسر باشد.
- تمام دیدگاه ها خوانده شده و برای هر کاربر مدت زمان محدودی جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.
- در مواردی که امکان رفع مشکل در زمان متداول میسر نباشد ممکن است نیاز به ارجاع و ثبت سفارش در بخش برنامه نویسی باشد که در اینصورت اطلاع رسانی خواهد شد.



 refresh
10 × 10
9 × 6
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
دنیز
در:
یک صفحه html طراحی کنید که در آن از event و effect های jquery استفاده شده باشد
۱۴۰۱/۰۳/۰۷

Zahra
در:
سلام وقت بخیر ببخشید من از روش شی گرا استفاده کردم ولی به کلمه ای که جلوی new مینویسم ارور میده میخوام به...
۱۴۰۱/۰۳/۰۶

سید هدایت محمدی
در:
با سلام از مطالب سایتتون و زحمات شما واقعا قدردانی میکنم که این همه وقت گران بهایتان رو برای کمک به این عزیزان میکنید ...
۱۴۰۱/۰۳/۰۵

پـــرتو
در:
هیچی درست شد ممنونم خیلی ممنونم ازتون من جای بدی گذاشته بودم ممنونم از شما :)
۱۴۰۱/۰۳/۰۴

پـــرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم اون کد درست شد ولی برای این کد که داده بودین: اگر یادتون باشه برای فاصله بین ستون...
۱۴۰۱/۰۳/۰۴

پـــرتو
در:
سلام خسته نباشید ببخشید میشه راجع به این کدی که گذاشتین بیشتر توضیح بدین دقیقا باید همینو بزارم و دقیقا کجا باید بزارم اخه هر...
۱۴۰۱/۰۳/۰۲

محمدرضا
در:
خیلی ممنون که جواب دادید یه سوال دیگه هم داشتم البته شرمنده چطور می شه وقتی کاربری فرمی رو توی سایت پر می کنه...
۱۴۰۱/۰۳/۰۱

پرتو
در:
اوکی ممنونم از جوابتون
۱۴۰۱/۰۳/۰۱

محمدرضا
در:
با سلام و خسته نباشید ببخشید این لینک رو نگاه کنید: چطور میشه با استفاده از توضیحات گفته شده اطلاعات یک کارت رو...
۱۴۰۱/۰۳/۰۱

پـــرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم برای فاصله دادن بین هر پست باید از چه کدی استفاده کرد؟ یعنی می خاستم اگه میشه بین پست...
۱۴۰۱/۰۲/۳۰

بهار
در:
سلام من تازه شروع کردم به یادگیری html مشکلم اینه که وقتی در تگ p متن فارسی می‌نویسم برای ویرایش خطاهای املایی پوینتر...
۱۴۰۱/۰۲/۲۶

مبینا
در:
کد خطای ۱۰۲۶۳۰ چی هست بعضی سایت های انلاین فیلم و سریال برام میاره ؟
۱۴۰۱/۰۲/۲۶

پرتو
در:
چشم حتما در اولین فرصت بهتون ایمیل میکنم
۱۴۰۱/۰۲/۱۹

پرتو
در:
سلام خسته نباشید شرمنده مزاحم میشم عه ببخشید قالبم یکی دو تا ایراد کوچیک داره که اگه میشه لطفا بهم بگید چطوری برطرفش کنم خب...
۱۴۰۱/۰۲/۱۸
  در انتظار بررسی: ۰
 پاسخگویی به سوالات ممکن است تا 24 ساعت زمان ببرد.