نارنجی گراف

کد ها و جاوا اسکریپت های کاربردی بیان

نارنجی گراف

کد ها و جاوا اسکریپت های کاربردی بیان

درباره بلاگ

سلام
این وبلاگ درست شده است تا کد های کاربردی و زیبا کننده ی وبلاگ را بصورت رایگان در اختیار شما قرار دهد
از اونجایی ک من شخصا خودم هر موقعه کدی رو خواستم مجبور بودم برم تو سایت های خارجی و کلی دنبالش بگردم تا پیدا کنم به این فکر رسیدم هرچی ک بلدم ب شما هم یاد بدم
در ضمن شما هم اگه کد عجیب غریب داشتید میتونید بدید ب من تا نشر کنم واسه بقیه دوستامون استفاده کنن 😘
امید وارم کدهامون مورد پسندتون باشه

بایگانی
۰۶ آذر ۹۵ ، ۰۱:۳۲

کد متن متحرک

سلام 
این کد کاربردی واسه اینه که شاید شما بخواید متنتون متحرک باشه چند نوع مختلف میزارم ک هر نوعی ک با وبلاگتون ست هست رو کپی کنید
نکته: این کدو هرجا کپی کنی جواب میده هم تو قالب هم پست ارسالی و کاملا تست شده
نوع اول:
متن شما....
برای دریافت کد متن توی باکس رو کپی کنید
<p><br></p><textarea style="width: 300px; height: 32px;"> <marquee behavior="scroll" direction="left">متن شما....</marquee>
</textarea>

نوع دوم

متن شما ...


برای دریافت کد متن توی باکس رو کپی کنید
<style style="text/css">
.marquee {
 height: 50px; 
 overflow: hidden;
 position: relative;
}
.marquee p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(100%);
 -webkit-transform:translateX(100%); 
 transform:translateX(100%);
 /* Apply animation to this element */ 
 -moz-animation: scroll-left 5s linear infinite;
 -webkit-animation: scroll-left 5s linear infinite;
 animation: scroll-left 5s linear infinite;
}
/* Move it (define the animation) */
@-moz-keyframes scroll-left {
 0% { -moz-transform: translateX(100%); }
 100% { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes scroll-left {
 0% { -webkit-transform: translateX(100%); }
 100% { -webkit-transform: translateX(-100%); }
}
@keyframes scroll-left {
 0% { 
 -moz-transform: translateX(100%); /* Browser bug fix */
 -webkit-transform: translateX(100%); /* Browser bug fix */
 transform: translateX(100%);   
 }
 100% { 
 -moz-transform: translateX(-100%); /* Browser bug fix */
 -webkit-transform: translateX(-100%); /* Browser bug fix */
 transform: translateX(-100%); 
 }
}
</style>
<div class="marquee">
<p>متن شما...</p>
</div>



نوع سوم


متن شما... برای دریافت کد متن توی باکس رو کپی کنید
<marquee behavior="alternate">متن شما....</marquee>
توجه نوع سوم شبی نوع اوله اما یهو ناپدید نمیشه



نوع چهارم

متن شما...
<marquee behavior="scroll" direction="down">Scroll down...</marquee>




نوع پنجم
متن شما...


<marquee behavior="scroll" direction="left">متن شما...</marquee>

نوع اخر

متن شما...


<style style="text/css">
.horizontally {
 height: 50px; 
 overflow: hidden;
 position: relative;
 background: yellow;
 color: orange;
 border: 1px solid orange;
}
.horizontally p {
 position: absolute;
 width: 100%;
 height: 100%;
 margin: 0;
 line-height: 50px;
 text-align: center;
 /* Starting position */
 -moz-transform:translateX(50%);
 -webkit-transform:translateX(50%); 
 transform:translateX(50%);
 /* Apply animation to this element */ 
 -moz-animation: horizontally 5s linear infinite alternate;
 -webkit-animation: horizontally 5s linear infinite alternate;
 animation: horizontally 5s linear infinite alternate;
}
/* Move it (define the animation) */
@-moz-keyframes horizontally {
 0% { -moz-transform: translateX(50%); }
 100% { -moz-transform: translateX(-50%); }
}
@-webkit-keyframes horizontally {
 0% { -webkit-transform: translateX(50%); }
 100% { -webkit-transform: translateX(-50%); }
}
@keyframes horizontally {
 0% { 
 -moz-transform: translateX(50%); /* Browser bug fix */
 -webkit-transform: translateX(50%); /* Browser bug fix */
 transform: translateX(50%);   
 }
 100% { 
 -moz-transform: translateX(-50%); /* Browser bug fix */
 -webkit-transform: translateX(-50%); /* Browser bug fix */
 transform: translateX(-50%); 
 }
}
</style>
<div class="horizontally">
<p>متن شما...</p>
</div>
امیدوارم از مطلب ما خوشتون بیاد لطفا وبلاگ ما رو ب دوستانتون معرفی کنید و با نظر دادن برای هرچی بهتر شدن و کد های جدید ما را یاری کنید

نظرات  (۳)

عالی بود دمت گرم
پاسخ:
خواهش 
تبادل لیگ قوی بزرگ ترین تبادل لینک در ایران

۰۶ بهمن ۹۵ ، ۰۰:۳۰ الناز محمدی
سلام عالی بود

ارسال نظر

ارسال نظر آزاد است، اما اگر قبلا در بیان ثبت نام کرده اید می توانید ابتدا وارد شوید.
شما میتوانید از این تگهای html استفاده کنید:
<b> یا <strong>، <em> یا <i>، <u>، <strike> یا <s>، <sup>، <sub>، <blockquote>، <code>، <pre>، <hr>، <br>، <p>، <a href="" title="">، <span style="">، <div align="">
تجدید کد امنیتی