درود
امکان داره کمکم کنید تا افکت این سایت رو طراحی کنم
بخش news این سایت:
www.اسکریپت.com
درود
امکان داره کمکم کنید تا افکت این سایت رو طراحی کنم
بخش news این سایت:
www.اسکریپت.com
سلام.
با روشهای مختلف میشه 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]
اینو با animation
نمیشه نوشت؟
میشه این قسمت رو توضیح بدینthiseمنظورش چیه؟scrolldelay="0" scrollamount="2" onMouseOver="this.stop();" OnMouseOut="this.start();
[align=justify]this یعنی همین المنت. یعنی به marque دستور stop میده
با css: http://codepen.io/jonathansampson/pen/rqemL
[/align]
خیلی ممنون
ولی اگه توجه کنید وقتی روی متن میریم هیچ کدومشون stopنمیشن؟!
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
}
}
,واقعا ممنونم.یه دنیا سپاس :)
درود .
به نظر شما چرا این کد اینجوری اجرا میشه؟
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 -->
مشکلشو بگید لطفا چجوریه؟
متن های من تا اخر بالا نمیره.یعنی حالت کر کره ایی پیدا نمکینه؟
سلام تو فایر فاکس امتحان کردید؟؟
بله.ایراد داشت
float: right
رو پاک کنید.
بسیار مچکرم مشکلش حل شد. :shy: اما خب به چه علت به خاطرfloatبهم میریخت؟
ندونستن عیب نیست، نپرسیدن چرا!