چهارشنبه ۰۹ اسفند ۱۴۰۲

Wednesday, February 28, 2024 GMT +3: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 مطالب بیشتر:
نمایش فیلد جستجوی گوگل در سایت یا وبلاگ
نحوه درج علامت های خاص در HTML
چرا و چگونه از DOCTYPE در HTML استفاده کنیم؟
چگونه رنگ و تصویر پس زمینه سایت یا وبلاگ را تغییر دهیم؟
نحوه نمایش فیلم و کلیپ ویدئویی در سایت و وبلاگ
دیدگاه
more ۱۲۰ دیدگاه برای این مطلب ارسال شده است.
more دیدگاه جدید بر اساس تاریخ ارسال در انتهای دیدگاه های موجود نمایش داده می شود.
بهرام
۱۳:۲۰ ۱۳۹۶/۱۱/۰۹
با سلام خدمت شما عزیز
اینکه من از دستور marquee استفاده میکنم و کار میکنه ولی یه مشکل دارم اونم اینه هشت تا خبر با تصویر به صورت متحرک از پایین به بالا نوشتم ولی موقعی که کار میکنه چهارتا خبرو نشون میده از نصفه به بعد قطع میشه و از اول میاد چهار تا خبر بعدی نمیاد مشکل از چیه باید دستور jquery بنویسم چیکار کنم راهنمایی ام کنین ممنون میشم
این آموزش قدیمی است و صرفا جهت اطلاع بیشتر از سایت حذف نشده، در مرورگرهای جدید تگ marquee بعضا با چنین مشکلاتی روبرو است، بهتر است از جی کئوری استفاده کنید.
۱۵:۲۷ ۱۳۹۷/۰۲/۰۳
با سلام و تشکر فراوان خدمت شما
من از کدهای شما استفاده کردم فقط اگر محبت بفرمایید بنده رو راهنمایی کنید که چطور رنگ خوده متن رو تغییر بدم ممنون میشم
برای تغییر رنگ متن در تگ marquee باید از CSS استفاده کنیم، مثال:
<style>
.my-marquee {
color:#FF0004;
}
</style>
<marquee class="my-marquee">متن متحرک</marquee>
۱۹:۰۵ ۱۳۹۷/۰۲/۰۸
سلام
عالی بود
خداقوت
۱۴:۳۸ ۱۳۹۷/۰۵/۱۳
با سلام خدمت شما دوست عزیز من از کدهای onmouseover و onmouseout برای اینکه با حرکت ماوس تصویر متوقف نشه و ادامه پیدا کنه استفاده کردم ولی نمیدونم چرا این قضیه فقط تو مرورگر کروم جواب میده بقیه مرورگرها جواب نمیده لطفا راهنمایی بفرمایید
لطفا نمونه کدها را در سایتتان یا در یک صفحه تست آنلاین قرار داده و سپس اطلاع دهید تا بررسی گردد.
۰۸:۰۴ ۱۳۹۷/۰۷/۰۳
سلام خسته نباشید ممنون از مطلب عالیتون خیلی بدرد خورد
من یه سوال داشتم بی زحمت این وبلاگ رو نگاه کنید
http://ekramehteram.mihanblog.com
از یه کدی استفاده کردن که هر چی میریم پایین مطالب و باکس ها میان یعنی اول نیستن و وقتی میریم پایین یکی یکی میان ایشون از چه کدی استفاده کردن میشه راهنمایی کنید ممنون
برای ایجاد این حالت می توانیم از ترکیب جی کئوری یا سایر کتابخانه های جاوا اسکریپتی مشابه و CSS استفاده کنیم، البته تنظیم درست کدها ساده نیست و باید تجربه قبلی کار با کدهای HTML و CSS را داشته باشیم، چند نمونه کد و آموزش:
https://codepen.io/chriscoyier/pen/DjmJe

https://css-tricks.com/aos-css-driven-scroll-animation-library
امیر
۱۶:۳۳ ۱۳۹۷/۰۸/۱۷
سلام ببخشید یه سوال...
من از html5 استفاده میکنم و میخوام یه اسکرول بار کوچولو وسط صفحه بزارم (مثل همینایی که شما بعضی وقتا کدایی که خیلی طولانین رو توشون میزارین و کدا اون تو اسکرول میشن) اما متاسفاه html5 از marquee ساپورت نمیکنه... میشه بگین باید چیکار کنم؟؟؟ خیلی واجبه
برای ایجاد اسکرول نیازی به تگ marquee نیست، این تگ جهت ایجاد متن متحرک در نسخه های قبلی HTML استفاده می شد، برای ایجاد اسکرول به استایل تگ مورد نظر خاصیت overflow-y با مقدار scroll دهید، به طور مثال:
<style>
.code{
display: block;
padding: 4px;
margin: 0px;
direction: ltr;
width: auto;
border: #69C 1px solid;
word-wrap: break-word;
white-space: pre-line;
max-height: 300px;
overflow-y: scroll;
overflow-x: hidden;
color: #333;
background-color: #FBFBFB;
text-align: left;
}
</style>
<div class="code"></div>
Moradyan
۱۶:۰۲ ۱۳۹۸/۰۹/۲۵
سلام خیلی ممنون بابت سایت خوبتون. چجوری وقتی یه اهنگ تو صفحه میزاریم کوچیک کنیم.
بستگی به روش پخش آهنگ دارد، به فرض اگر از پلیر HTML5 استفاده کنیم پارامترهای width و height کاربرد دارند:
<audio controls="controls" height="50px" width="100px">
همچنین می توانیم با استفاده از CSS یک کلاس برای تگ audio در نظر بگیریم:
<audio class="player">
نکته: مرورگرهای موبایل ممکن است از این قابلیت ها پیروی نکنند!
۱۳:۳۷ ۱۳۹۸/۱۱/۰۵
سلام واقعا عالییه خیلی استفاده کردم به وبلاگم سر بزن لطفا.
۱۱:۱۷ ۱۳۹۹/۰۱/۳۱
خیلی عالی بود ما در سایتمون از این کد استفاده کردیم.
ام
۰۱:۵۹ ۱۳۹۹/۰۳/۱۶
سلام و درود و خسته نباشید به این همت و اراده و کار خیری که میکنید من میخواستم در سایتم سه تا عکس با ارتفاع و عرض برابر بصورتی کاربر وارد اون بشه و تغییر کنه و متحرک باشه بزارم ولی هر کاری میکنم قبول نمیکنه میشه کمکم کنید
برای متحرک سازی سفارشی باید با کدنویسی HTML، CSS و JavaScript آشنا باشید، نمونه کد زیر بر مبنای کتابخانه jQuery نوشته شده و تقریبا به هدف شما نزدیک است:
https://jsfiddle.net/dk6f3snf/6
نکته 1: برای استفاده از کتابخانه جی کئوری باید آن را در قسمت head صفحه وارد کرده باشید، مثال:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
نکته 2: کدهای جاوا اسکریپت را بین تگ های script درج کنید، مثال:
<script>
کدهای جاوا اسکریپت
</script>
سجاد
۱۳:۴۳ ۱۳۹۹/۰۴/۲۰
دمتون گرم. خیلی زحمت کشیدید
۱۵:۳۲ ۱۳۹۹/۰۴/۲۳
ببخشید کدها رو کجا میزنیم؟
کدها در وبلاگ ها معمولا در بخش ویرایش قالب یا اسکریپت های اختصاصی کاربر قابل نوشتن است و در سایت ها باید قالب سایت ویرایش شود.
علی
۰۱:۵۱ ۱۳۹۹/۱۰/۱۸
سلام و ممنون بابت وبسایت عالیتون
داخل بعضی سایت ها دیدید مثلا یه متنی شروع به تایپ شدن می کنه و وقتی کامل شد محو میشه و متن بعدی رو شروع می کنه به تایپ کردن. آیا همچین چیزی رو میشه با html درست کرد؟
یا مثلا افزونه ای در وردپرس هست که این کارو بکنه؟
با HTML به تنهایی ایجاد این افکت ها ممکن نیست اما با ترکیب HTML با جی کئوری (jQuery) می توانیم آن را داشته باشیم:
https://www.jqueryscript.net/animation/aeo-typewriter.html
امیرمحمدنصیری
۱۰:۵۴ ۱۴۰۰/۰۹/۲۶
ممنون به کارم اومد
خیلی خوب بود.
محمد
۱۱:۲۸ ۱۴۰۲/۱۰/۰۱
سلام
کد های زیر را ملاحظه کنید.
<style>
#wrapper {
transition: width 250ms ease-in-out;
width: 0px;
display: inline-flex;
overflow: hidden;
}
.switcher {
background: white;
color: black;
padding: 0 6px;
display: inline-block;
white-space: nowrap;
}

body {
background: black;
color: white;
font: 3em bold;
}
</style>
<body>
<ol class="slider" style="display:none">
<li class="slider_item">محمود</li>
<li class="slider_item">مسعود</li>
<li class="slider_item">مهدی</li>
<li class="slider_item">فاطمه</li>
<li class="slider_item">روز خوش</li>
</ol>

start <div id="wrapper"><span id="text" class="switcher"></span></div>
</body>
<script>
let items = ['محمود', 'مسعود', 'مهدی', 'فاطمه', 'روز خوش']
let index = 0
let textEl = document.getElementById('text')
let wrapperEl = document.getElementById('wrapper')

async function enlargeBox(){
if(index + 1 > items.length) index = 0
textEl.innerHTML = items[index++]
wrapperEl.style.width = textEl.getBoundingClientRect().width + 'px'
}

async function shrinkBox(){
await new Promise(resolve => setTimeout(resolve, 2500))
wrapperEl.style.width = '0px'
await new Promise(resolve => setTimeout(resolve, 250) ) //use same length as animation
}

enlargeBox().then(async ()=>{
while (true) {
await shrinkBox()
await enlargeBox()
}
})
</script>
من می خواهم به جای
let items = ['محمود', 'مسعود', 'مهدی', 'فاطمه', 'روز خوش']
که درون کد های جاوا اسکریپت است از فهرست <ol>درون تگ body برای متحرک سازی متن هایم استفاده کنم.
با تشکر
برای دریافت مقادیر تگ های li و تبدیل آبجکت Node List به آرایه در جاوا اسکریپت می توانید خط زیر را:
let items = ['محمود', 'مسعود', 'مهدی', 'فاطمه', 'روز خوش']
به این صورت ویرایش کنید:
let items = new Array();
let ol_li_elms = document.querySelectorAll("ol.slider li");
for(let i = 0; i < ol_li_elms.length; i++){
items.push(ol_li_elms[i].innerHTML);
}
more لطفا پیش از ارسال دیدگاه نکات زیر را مد نظر داشته باشید:
- به سوالات کلی، زمانبر، مبهم و مشکلاتی که تلاشی برای رفع آنها نکرده باشید پاسخ مختصر داده شده یا به بخش برنامه نویسی اختصاصی ارجاع داده می شوند.
- کدها و اسکریپت های طولانی را ترجیحا در یک صفحه وب آنلاین یا به صورت حساب موقت و آزمایشی قرار دهید تا امکان بررسی دقیق مشکل و خطایابی میسر باشد.
- تمام دیدگاه های ارسالی خوانده شده و برای هر کاربر مدت زمان لازم جهت پاسخگویی در نظر گرفته می شود، لطفا از طرح سوالات متعدد در بازه زمانی کوتاه خودداری کنید.



 refresh
10 × 10
8 × 4
20 × 20
=
آخرین دیدگاه ها
more برای دسترسی سریع به یادداشت مربوطه می توانید از لینک مطلب در کادر زیر استفاده کنید.
پـــرتو
سلام خوبید؟ ببخشید مزاحم میشم یه سوال کامپیوتری داشتم اونم اینکه این خطای dll یعنی چی و چطوری رفع میشه ؟ بیشتر توی نرم افزارها...
۱۴۰۲/۱۲/۰۵

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

سعید
با تشکر از شما درست شد فقط یه مشکلی دارم میخوام شناسه اون مطلب رو اینطوری براش فراخوانی کنم ولی شناسه رو دریافت...
۱۴۰۲/۱۲/۰۲

سعید
با تشکر از شما خیلی خوب بود. فقط یه مشکلی داره، اگه لینک دانلود داخل عکس باشه کار نمی کنه و بازم لینک رو...
۱۴۰۲/۱۲/۰۲

سعید
با سلام و خسته نباشید من یه تابع با php میخوام که لینک های موجود در یک متن رو برام شناسایی کنه بعد به...
۱۴۰۲/۱۲/۰۱

روح اله
سلام چرا وبلاگ من در نتایج یاهو میاید ولی در نتایج گوگل نمیاید؟
۱۴۰۲/۱۱/۲۶

جواد
سلام خسته نباشید. من میخواستم تعداد نامحدودی عدد رو با هم جمع و تفریق کنم از کدوم حلقه باید در public function کلاسم استفاذه...
۱۴۰۲/۱۱/۲۵

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

پـــرتو
سلام خوبید؟ ممنون از راهنماییتون من ادرس وبلاگ رو براتون ایمیل کردم واقعا ممنونم مچکرم مرسی
۱۴۰۲/۱۱/۱۸

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

فاطمه
سلام وقت بخیر وب بازدید کننده داره ولی گویا آدرس وب برای برخی از افراد باز نمیشه چه کاری میتونم انجام بدم تا...
۱۴۰۲/۱۱/۰۹

سیاوش آهی
سلام وقت بخیر استاد، من در سایتم ویدیوهای اموزشی دارم و میخوام با دستورات htaccess امکان دانلود آن را غیرفعال کنم ولی در مرورگر (سایت)...
۱۴۰۲/۱۱/۰۷

پـــرتو
خب الان این تگ رو کجا بزارم؟ و تاثیر سراسری یعنی چی؟؟ در مورد هارد هم منظورتون از چندنمونه فایل در دسترس باشد یعنی چی؟؟؟...
۱۴۰۲/۱۱/۰۵

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

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

مریم
سلام. من از قالب های سایت پیچک که استفاده میکنم مطالب رو نشون نمیده و به جاش مینویسه archive title. اما از قالب های پیش...
۱۴۰۲/۱۰/۲۶

بهاره هوشمندی
توی اکشن callback فقط کوئری ها هستند و من دستور die رو جای مناسب گذاشتم چون جای دیگه نمیشه گذاشت! این کوئری ها هستند که...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با تشکر از شما استاد بزرگوار اینو تست کردم لینک رو به درستی شناسایی نمی کنه و ارور میده! وگرنه همون مسیر خودش رو...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با سلام استاد با sleep نمیشه متن به کاربر نشون داد فقط میشه تاخیر ایجاد کرد واسه همین die بهتره ولی من نمی دونم...
۱۴۰۲/۱۰/۲۳

بهاره هوشمندی
با سلام و خسته نباشید واسه ترجمه از این تابع استفاده میکنم
۱۴۰۲/۱۰/۲۲

بهاره هوشمندی
با سلام متاسفانه هرکاری کردم نشد! یه هفته ست درگیرش هستم انگار هیچ راهی نداره البته احتمالا به دستور die باشه ولی اون...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
با سلام و خسته نباشید وقتی میخوام با گوگل ترانسلیت متنی رو با php ترجمه کنم عکس ها رو خراب می کنه چون توی...
۱۴۰۲/۱۰/۲۱

بهاره هوشمندی
من تونستم یه جوری کدها رو توی قالب بذارم ولی چون کال بک اصلا فایل ویو نداره و یک چک کنه است هیچ جوری پیام...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با تشکر از شما من فقط اکشنش رو دارم که اکشن به تنهایی کار نمی کنه! :( الان این کد رو توی قالب...
۱۴۰۲/۱۰/۱۹

بهاره هوشمندی
با سلام و با تشکر از شما استاد خیلی خوب بود من توی فریمورک yii صفحه callback ندارم کاربر زمان زیادی برای اکشن...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام لینک رو نگاه کردم خوب بود ولی من میخوام برای کاربر بنویسم که تا ۱۰ ثانیه صبر کنه که کاربر صفحه رو...
۱۴۰۲/۱۰/۱۸

بهاره هوشمندی
با سلام و خسته نباشید استاد لود کردن کوئری های سایت من واسه یه صفحه زیاده و ۱۰ تا ۱۵ ثانیه طول میکشه که...
۱۴۰۲/۱۰/۱۷

سجاد مهدوی
با سلام ببخشید می تونید توی سایت نوبیتکس ثبت نام کنید و با api هایی که دادن یه کد بنویسید که اعلام موجودی رو...
۱۴۰۲/۱۰/۱۰
  در انتظار بررسی: ۱
 پاسخگویی به سوالات ممکن است تا ۲۴ ساعت زمان ببرد.