ایجاد چند افکت (مثلاً عبور اشعه نور) [بایگانی]

bftarane

دوشنبه 11 آذر 1392, 09:10 صبح

سلام.
لطفاً این صفحه رو ببینید.
http://www.lhadapcb.com/
همونطور که می بینید برای اون افکتها از Flash استفاده کرده،
من می خوام مشابه این رو ایجاد کنم ولی با jquery و css و جاوااسکریپت.

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

2. می رسیم به اون متن بالا که انگار یه نور از درونش می گذره. برای این راهی به نظرتون می رسه؟

3. و دیگه اون خطای سفید که به سرعت می یان و رد می شن (شبیه اشعه نور) برای این هم اگه راهنمایی به نظرتون می رسه لطفاً بگید.

4. و دیگه اون شش ضعلی ها هم فکر کنم حالا از شش ضلعی بودنشون اگه بگذریم بتونیم با دیو و css مربع هایی ایجاد کنیم و به آرومی fadeIn و fadeout و دیگه انیمیشنها رو بهشون اعمال کنیم.

ممنون می شم نظرها و راهنمایی هاتون رو بشنوم.

jalil_gh

دوشنبه 11 آذر 1392, 23:09 عصر

برای مورد ۲ من دو تا راه به نظرم رسید که امتحان کردم. تو روش اول همه حروف رو داخل تگ span گذاشتم و رنگ اونا رو یکی یکی عوض کردم. زیاد جالب نشد.
تو روش دوم یه div ایجاد کردم و اونو از روی متن عبور دادم که این جالبتر شد. تو روش دوم فقط باید رنگ div باید با رنگ پس زمینه یکی باشه.
اینم کدها (روش اولی رو کامنت کردم -- شاید یه جای دیگه به درد کسی بخوره)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
h3 {
color: #f00;
font-size: 3em;
display: inline-block;
position: relative;
text-align: center;
}

.lightX {
width: 40px;
height: 100%;
position: absolute;
top:0;
left:-40px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2),
rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0));
}

/*h3 span {
-moz-transition: all 50ms ease-in-out;
-webkit-transition: all 50ms ease-in-out;
-o-transition: all 50ms ease-in-out;
-ms-transition: all 50ms ease-in-out;
transition: all 50ms ease-in-out;
}

.light {
color: rgba(255, 0, 0, 0.5);
}*/
</style>
</head>
<body>
<h3 id="title">this is a test</h3>
<script src="lib/jquery.js"></script>
<script>
// put every letter inside an span
/*var text= $('#title').text();
$('#title').html(text.replace(/(\w)/g, function(match){
return '<span>' + match + '</span>';
}));

var $spans = $('#title span'),
len = $spans.size(),
index = 0;

setInterval(function() {

// remove previous added light class
$spans.filter('.light').removeClass('light');

// add light class to the current index
$spans.eq(index).addClass('light');

if (index++ > len -1) index = 0;

}, 80);*/

var $title = $('#title');
var parentWidth = $title.width();

$('<div class="lightX">').appendTo('#title');

function start() {
$('.lightX').delay(1000).animate({
'left': parentWidth + 40
}, 1000, function() {
$(this).css('left', -40);
start();
});
}

start();

</script>
</body>
</html>

برای مورد ۳ هم شما میتونید یه div ایجاد کنید با ارتفاع یکی دو پیکسل و از این طرف به اون طرف حرکتش بدید.

bftarane

دوشنبه 11 آذر 1392, 23:37 عصر

فوق العاده بود. حیفم اومد به طور ویژه تشکر نکنم.
برای مورد 3 هم پیشنهادتون واقعاً خوب بود. ممنون سعی می کنم عملیش کنم.