ساخت افکت متن

حل شده 

CSS

توسط souda در 5 سال پیش
0 83.6k 13 5 سال پیش
souda reza c0der pcside
0

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

www.اسکریپت.com

آخرین ویرایش: 03-08-2015 ساعت 09:49، توسط Reza

پاسخ ها

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>

[size=large]JSFIDDLE[/size]

آخرین ویرایش: 03-08-2015 ساعت 10:11، توسط Reza
0

اینو با animation
نمیشه نوشت؟
میشه این قسمت رو توضیح بدینthiseمنظورش چیه؟
scrolldelay="0" scrollamount="2" onMouseOver="this.stop();" OnMouseOut="this.start();

آخرین ویرایش: 03-08-2015 ساعت 12:39، توسط souda
0

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

1

http://codepen.io/jonathansampson/pen/rqemL خوب کار میکنه
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
    }
}

http://jsfiddle.net/9dxd17s1/5

آخرین ویرایش: 03-08-2015 ساعت 16:02، توسط C0der
0

,واقعا ممنونم.یه دنیا  سپاس :)

0

درود .
به نظر شما چرا این کد اینجوری اجرا میشه؟

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 -->
0

مشکلشو بگید لطفا چجوریه؟

0

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

0

سلام تو فایر فاکس امتحان کردید؟؟

0

بله.ایراد داشت

0

float: right
رو پاک کنید.

0

بسیار مچکرم مشکلش حل شد. :shy: اما خب به چه علت به خاطرfloatبهم میریخت؟

خوش آمدید

برای طرح سوال، ایجاد بحث و فعالیت در سایت نیاز است ابتدا وارد حساب کاربری خود شوید. در صورتی که هنوز عضو سایت نیستید میتوانید در عرض تنها چند ثانیه ثبت نام کنید.