ساخت افکت متن

حل شده 

CSS

توسط souda در 3 سال پیش
0 2.9k 13 3 سال پیش
soudac0derreza-irdevpcside
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
1

[align=justify]this یعنی همین المنت. یعنی به marque دستور stop میده با css: http://codepen.io/jonathansampson/pen/rqemL

[/align]

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بهم میریخت؟

خوش آمدید

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

لطفا ابتدا لاگین کنید