سلام
من یک marquee با CSS ساختم. ولی درست متن رو نشون نمیده!
قبل از اینکه همه تگ p نشون داده بشه انیمیشن دوباره شروع میشه.
اینم کدمه:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
مشکل چیه؟
متشکرم
Printable View
سلام
من یک marquee با CSS ساختم. ولی درست متن رو نشون نمیده!
قبل از اینکه همه تگ p نشون داده بشه انیمیشن دوباره شروع میشه.
اینم کدمه:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
مشکل چیه؟
متشکرم
سلام
باید درصد اولیه صفر رو بیش از -100 بزنید تا متن یه دفعه از وسط انیمیشنش سروع نشه من براتون رو 300 تنظیم کردم ... البته اینم بگم با تگ marquee خیلی راخت تر میشه کار کرد و همه مروگر ها هم پشتیبانیش میکنن برای کم و زیاد کردن سرعت انمیشن هم عدد جلوی خاصیت animation رو کم و زیاد کنید :
کد:<style>.marquee p {
/* Starting position */
-moz-transform:translateX(-100%);
-webkit-transform:translateX(-100%);
transform:translateX(-100%);
/* Apply animation to this element */
-moz-animation: scroll-right 5s linear infinite;
-webkit-animation: scroll-right 5s linear infinite;
animation: scroll-right 5s linear infinite;
white-space: nowrap;
}
.marq-text{
margin-left:100px;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-right {
0% { -moz-transform: translateX(-300%); }
100% { -moz-transform: translateX(100%); }
}
@-webkit-keyframes scroll-right {
0% { -webkit-transform: translateX(-300%); }
100% { -webkit-transform: translateX(100%); }
} @ [ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ] frames scroll-right {
0%
{
-moz-transform: translateX(-300%); /* Browser bug fix */
-webkit-transform: translateX(-300%); /* Browser bug fix */
transform: translateX(-300%);
}
100%
{
-moz-transform: translateX(100%); /* Browser bug fix */
-webkit-transform: translateX(100%); /* Browser bug fix */
transform: translateX(100%);
}
}
.marquee{
width:400px;
border:red solid 1px;
margin:0 auto;
overflow:hidden;
}
</style>
<div class="marquee">
<p>
<span class="marq-text">This text is a looooooooong marquee.</span>;
<span class="marq-text">And This one is another :-)</span>;
<span class="marq-text">Third marquee is ignored completely :-(</span>;
</p>
</div>
متشکرم
ولی مشکل اینه که متن ثابت نیست و ممکنه عوض بیشه. نمی دونم شروع انیمیشن رو چه مقداری بدم...
این % بر اساس اندازه عرض صفحه هست یا تگ div ؟
سلام
این درصد به میزان طول خود متن نسبت به تگ div بستگی داره و خودتون باید دستی کم و زیادش کنید تا تا درست در بیاد ...
اینجوری که میگید با CSS نمیشه.نقل قول:
فکر کنم باید با JQuery مقدارشو پیدا کنم و بذارم!
متشکرم
سلام
بله البته با تگ marquee خیلی راحت میشه اینکار رو کرد ، حتی برای این تگ در خود جاوااسکریپت توابعی مثل stop() و start() هم هست ...
با جی کوئری هم میشه با تابع animate راحت متن متحرک ساخت ...
اول با تگ marquee این کار رو کرده بودم. مشکل این بود که وقتی سرعت رو کم می کردم توی firefox پرش داشت. اگه این مورد حل بشه که دیگه مشکلی ندارم :-)نقل قول:
مثلا این مثال رو با firefox ببینید:
[ برای مشاهده لینک ، با نام کاربری خود وارد شوید یا ثبت نام کنید ]
شما چه راهی پیشنهادی می کنید ؟
متشکرم
سلام
این مشکل پرش رو کلا فایرفاکس داره ...
در کل راهی نیست ، البته پرشش زیاد نیست میتونید با کم کردن خاصیت scrolldelay به عدد 1 این پرش رو به حداقل برسونید ...
مثل کد زیر :
کد:<marquee behavior="scroll" bgcolor="#CCCCCC" dir="rtl" direction="left" height="25" width="200" loop="-1" scrollamount="5" scrolldelay="1">متن متحرک</marquee>