سوال: ساخت افکت متن
#1
درود
امکان داره کمکم کنید تا افکت این سایت رو طراحی کنم
بخش news این سایت:

کد:
www.اسکریپت.com

آخرین ویرایش: 03-08-2015 ساعت 09:49، توسط SOFTAFZAR
پاسخ
#2
سلام.
با روشهای مختلف میشه Scrolling text رو ساخت که راحت ترین راهش استفاده از marquee هست که سایت مورد نظر هم همین روش رو استفاده میکنه. برای مثال:
کد:
<marquee direction="up" width="450" height="250" scrolldelay="0" scrollamount="2" onMouseOver="this.stop();" OnMouseOut="this.start();">
<ul>
<li><a href="http://softafzar.net/thread-2469">تغییر سیستم انجمن با موفقیت انجام شد!</a>

</li>
<li><a href="http://softafzar.net/thread-2516">شروع کار با Xubuntu</a>

</li>
<li><a href="http://softafzar.net/thread-2073">اختصاصی سافت افزار: +15 تکنیک برای نوشتن کد خوانا</a>

</li>
<li><a href="http://softafzar.net/thread-2386">نوشتن یک برنامه افزونه پذیر در PHP</a>

</li>
<li><a href="http://softafzar.net/thread-2534">نمایش المنتها بصورت Random توسط جی کوئری</a>

</li>
<li><a href="http://softafzar.net/thread-2544">روت کردن اندروید با یک کلیک (ساده ترین روش برای روت)</a>

</li>
<li><a href="http://softafzar.net/thread-1095">بهترین IDE برای PHP؟</a>

</li>
<li><a href="http://softafzar.net/thread-1523">متن کپی رایت جدید!!</a>

</li>
<li><a href="http://softafzar.net/thread-2565">گیک کیست؟ نرد کیست؟</a>

</li>
</ul>
</marquee>


JSFIDDLE

آخرین ویرایش: 03-08-2015 ساعت 10:11، توسط SOFTAFZAR
پاسخ
#3
اینو با animation
نمیشه نوشت؟
میشه این قسمت رو توضیح بدینthiseمنظورش چیه؟
کد:
scrolldelay="0" scrollamount="2" onMouseOver="this.stop();" OnMouseOut="this.start();

آخرین ویرایش: 03-08-2015 ساعت 12:39، توسط souda
پاسخ
#4
this یعنی همین المنت. یعنی به marque دستور stop میده
با css:


پاسخ
#5
خیلی ممنون
ولی اگه توجه کنید وقتی روی متن میریم هیچ کدومشون stopنمیشن؟!

پاسخ
#6
خوب کار میکنه
marque چون تگ قدیمیه و کم کم داره حذف میشه احتمال داره تو مرورگرها کار نکنه دمویی که مدیر سایت گذاشت start/stop مثل اینکه تو فایرفاکس جدید دیگه کار نمیکنه(یعنی کد دیگع میخواد) کلا بهتره از این تگ استفاده نکنید و بجاش از css استفاده بشه.

HTML:

کد:
<div id="marquee">
   <ul>
       <li><a href="http://softafzar.net/thread-2469">تغییر سیستم انجمن با موفقیت انجام شد!</a>

       </li>
       <li><a href="http://softafzar.net/thread-2516">شروع کار با Xubuntu</a>

       </li>
       <li><a href="http://softafzar.net/thread-2073">اختصاصی سافت افزار: +15 تکنیک برای نوشتن کد خوانا</a>

       </li>
       <li><a href="http://softafzar.net/thread-2386">نوشتن یک برنامه افزونه پذیر در PHP</a>

       </li>
       <li><a href="http://softafzar.net/thread-2534">نمایش المنتها بصورت Random توسط جی کوئری</a>

       </li>
       <li><a href="http://softafzar.net/thread-2544">روت کردن اندروید با یک کلیک (ساده ترین روش برای روت)</a>

       </li>
       <li><a href="http://softafzar.net/thread-1095">بهترین IDE برای PHP؟</a>

       </li>
       <li><a href="http://softafzar.net/thread-1523">متن کپی رایت جدید!!</a>

       </li>
       <li><a href="http://softafzar.net/thread-2565">گیک کیست؟ نرد کیست؟</a>

       </li>
   </ul>
</div>

CSS:

کد:
html, body {
    direction: rtl;
}
a {
    text-decoration: none;
    color: #333;
}
#marquee {
    font: 13px tahoma;
    box-shadow: 0 5px 15px #777;
    margin: 10px;
    overflow: hidden;
    height: 200px;
}
#marquee ul {
    top: 6em;
    position: relative;
    box-sizing: border-box;
    animation: marquee 12s linear infinite;
}
#marquee ul:hover {
    animation-play-state: paused;
}
@keyframes marquee {
    0% {
        top: 200px
    }
    100% {
        top: -200px
    }
}


آخرین ویرایش: 03-08-2015 ساعت 16:02، توسط C0der
پاسخ
#7
,واقعا ممنونم.یه دنیا  سپاس Smile

پاسخ
#8
درود .
به نظر شما چرا این کد اینجوری اجرا میشه؟

کد:
div.news
{
    margin-right:1%;
    border:1px solid #333;
    background-color:#E6E6E6;
    width:31.5%;
    height:250px;
    float:right;
    margin-top:10px;
    overflow:hidden;
}
div.title h3
{
    text-align:center;
    color:#fff;
    font-size:17px;
    font-family:'Yekan';
    margin-top:2px;
    font-weight:normal;
}

.news ul
{
    float:right;
}

.news ul li
{
    float:right;
    list-style-type:none;
    list-style-image:url(../images/bullet.png);
    margin-right:40px;
}

.news ul li a
{
    display:block;
    font-size:13px;
    padding:7px 0px;

<div class="news">
   <div class="title">
    <h3>آخرین اخبار فناوری اطلاعات و عمومی</h3>
   </div>
   <!-- end title -->
   <marquee direction="up" width="100%" height="250" scrolldelay="0" scrollamount="1" onMouseOver="this.stop()" OnMouseOut="this.start()">
   <nav>
   <ul>
       <li><a href="#">تولید دارو با چاپگر سه بعدی</a></li>
       <li><a href="#">ابلاغ‌های الکترونیکی سازمان تامین اجتماعی</a></li>
       <li><a href="#">عیب‌یابی سریع و بدون خرج رایانه</a></li>
       <li><a href="#">شیائومی جلوتر از اپل</a></li>
       <li><a href="#">باز هم پیامک های تبلیغاتی!</a></li>
       <li><a href="#">زندگی در ماه، 20 سال دیگر</a></li>
       <li><a href="#">پایان پروژه سیم‌کارت بی‌هویت</a></li>
       <li><a href="#">روش کنترل حجم اینترنت</a></li>
       <li><a href="#">اخبار غیر قابل اعتماد شبکه‌های اجتماعی</a></li>
       <li><a href="#">ثبت نام استخدام پیمانی آموزش و پرورش</a></li>
       <li><a href="#">هشدار درباره WiFiهای رایگان</a></li>
   </ul>
   </nav>
  </marquee>
</div>
<div class="news">
   <div class="title">
   <h3>معرفی کتاب های IT و کامپیوتر</h3>
   </div>
   <!-- end title -->
   <nav>
   <ul>
       <li><a href="#">کتاب طراحی VLSI دیجیتال</a></li>
       <li><a href="#">کتاب آموزش منحصر به فرد Office 2013</a></li>
       <li><a href="#">کتاب مرجع کامل 3ds Max 2013</a></li>
       <li><a href="#">کتاب راهنمای جامع CorelDraw 12</a></li>
       <li><a href="#">کتاب مهندسی نرم افزار</a></li>
   </ul>
   </nav>
</div>
<div class="news">
   <div class="title">
           <h3>آخرین گجت های معرفی شده</h3>
   </div>
   <!-- end title -->
   
   <marquee direction="up" width="100%" height="250" scrolldelay="0" scrollamount="1" onMouseOver="this.stop()" OnMouseOut="this.start()">
   <nav>
   <ul>
       <li><a href="#">گجتی برای یافتن اشیای گمشده</a></li>
       <li><a href="#">کلاهی برای ایمن ماندن دوچرخه سواران</a></li>
       <li><a href="#">چراغ هوشمند شرکت BMW</a></li>
       <li><a href="#">قلاب ماهیگیری هوشمند</a></li>
       <li><a href="#">عیب یاب خودرو با گجت هوشمند</a></li>
       <li><a href="#">اندازه گیری میزان اکسیژن خون</a></li>
       <li><a href="#">گجتی فوق العاده برای علاقه مندان به تکنولوژی</a></li>
       <li><a href="#">کیبورد لیزری برای گجت های اندرویدی</a></li>
       <li><a href="#">انتقال اجسام با گجت جادویی</a></li>
       <li><a href="#">دیدن خواب‌های دلخواه با چشم‌بند Remee</a></li>
       <li><a href="#">لامپ LED کنترل از راه دور</a></li>
   </ul>
   </nav>
  </marquee>
</div>
<!-- end news -->

پاسخ
#9
مشکلشو بگید لطفا چجوریه؟

پاسخ
#10
متن های من تا اخر بالا نمیره.یعنی حالت کر کره ایی پیدا نمکینه؟

پاسخ
ایجاد موضوع جدید   پاسخ به موضوع  

کاربرانِ درحال بازدید از این موضوع:   1 مهمان