• سوال: ساخت افکت متن
    #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
    متن های من تا اخر بالا نمیره.یعنی حالت کر کره ایی پیدا نمکینه؟

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

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