افکت صفحه اصلی گوگل [بایگانی]

حمید محمودی

جمعه 13 فروردین 1389, 03:37 صبح

سلام.

میخاستم بدونم چطوری میشه افکت Fade in رو برای یه صفحه html گذاشت . دوستان اگه کدی دارن معرفی بکنن ممنون میشم. یعنی با لود شدن صفحه بصورت این افکت نمایش داده بشه؟

متشکرم

حمید محمودی

شنبه 14 فروردین 1389, 02:05 صبح

دوستان کسی اطلاعاتی در این زمینه نداره؟

mostafa_shaeri_tj

شنبه 14 فروردین 1389, 17:21 عصر

سلام.
شما بایستی از jquery استفاده کنید. خیلی از افکت های دیگه هم توش وجود داره.

حمید محمودی

دوشنبه 16 فروردین 1389, 01:34 صبح

سلام.

ممنون . دوست عزیز لطفا بیشتر توضیح بدین.

من قبل از ایجاد این تاپیک اینها رو دیده بودم اما دقیقا متوجه نشدم که باید چکار بکنم؟

http://www.dreamincode.net/forums/topic/147848-fade-in-fade-out-timed/
http://www.switchonthecode.com/tutorials/javascript-tutorial-simple-fade-animation
اینم که کار نکرد:
http://www.khafankadeh.7p.com/90.htm

ehsanes

دوشنبه 16 فروردین 1389, 10:07 صبح

سلام

از ajax هم میتونید استفاده کنید این افکت داره (در ajax control toolkit)

حمید محمودی

دوشنبه 16 فروردین 1389, 22:42 عصر

سلام.

دوستان عزیز لطف بکنید اگه کدی رو دارین بگین چون تو کار html و ajax نیستم

یه نمونه اگه بزارین خیلی خوبه.

متشکرم

Rejnev

دوشنبه 16 فروردین 1389, 23:46 عصر

به ajax کاری نداره که.
اونهایی رو که میخوای پنهان باشن رو براشون ID میذاری و opacity مربوط به style شون رو در حالت پیشفرض به 0 تغییر میدی(شفاف).
توی رویداد MouseEnter یا MouseMove تگ Body یک تابع javaScript رو فراخوانی میکنی.
توی این تابع میای یک تایمر رو ایجاد میکنی و توی کد تایمر مینویسی که opacity اشیا اونقدر زیاد بشه که برسه به 1.(منظور با هر تیک که میخوره مثلا یک صدم به شفافیت اضافه بشه)
و وقتی به 1 رسید تایمر رو غیر فعال میکنی
این روی Mozilla کار میکنه. برای IE باید Filter(Alpha=x( رو استفاده کنی.
این روال کلی کار بود که قطعا پس و پیش داره.
سعی کن خودت بنویسی. اگه نتونستی پیغام بده من خودم برات مینویسم و میذارم همینجا.(چون الآن آماده ندارم و خیلی وقته وب کار نمیکنم).
اگه بقیه دوستان نمونه دارن بذارن تا همگی به نوایی برسیم:چشمک:

حمید محمودی

دوشنبه 16 فروردین 1389, 23:54 عصر

سلام.

اون چندتا لینکی که گفتم نمیتونه کمک بکنه؟

Rejnev

سه شنبه 17 فروردین 1389, 00:40 صبح

این برای موزیلا کار میکنه. اما IE اذیت میکنه

<html>
<head>
<script type="text/javascript">
var opacity=0;
var timer=0;
function f()
{
timer=setTimeout("tick()",30);
}
function tick()
{
if(opacity>=1){
clearTimeout (timer);
return;
}
document.getElementById("div1").style.opacity=opacity;
document.getElementById("div1").style.filter = 'alpha(opacity=' + opacity*100 + ')';
opacity+=0.01;
setTimeout("tick()",30);
}
</script>
<style type="text/css">
div{
opacity:0;
filter:alpha(opacity=0);
}
</style>
</head>
<body onMouseOver="f()">
<div id="div1" style="opacity:0;">
hello this is a div
</div>
</body>
</html>

حمید محمودی

سه شنبه 17 فروردین 1389, 01:47 صبح

سلام.
دوستان کسی نمیدونه چرا این کد چرا توی IE مشکل داره؟ یعنی من یه مثالی میخاستم که توی بروزر های معمول مشکل نداشته باشه؟

متشکرم

ehsanes

سه شنبه 17 فروردین 1389, 10:20 صبح

سلام
این لینک نگاه کن

http://www.ASP.NET/ajax/ajaxcontroltoolkit/Samples/Walkthrough/UsingAnimations.aspx

http://www.thecodinghumanist.com/Content/HowToMSAjaxFadeAnimationInJavascript.aspx

قسمت که نوشته click me to fade out

حمید محمودی

چهارشنبه 18 فروردین 1389, 18:23 عصر

سلام.

دوستان حالا چطوری این کدها رو برای اون صفحه html اضافه بکنم که توی بروزرهایی مثل ie و firefox مشکل نداشته باشه.

کسی از دوستان میتونه اینکارو انجام بده؟ یعنی با لود شدن صفحه نه با کلیک. من نتونستم کدهارو تبدیل بکنم

متشکرم

binyaft

چهارشنبه 18 فروردین 1389, 18:35 عصر

با این میشه . تو هیچ مرورگری هم مشکل نداره و کار میکنه
اگه سوالی بود در خدمتیم

agtabesh

سه شنبه 07 اردیبهشت 1389, 01:17 صبح

آقا کسی بدون جی کوئری شو نداره؟
(کلا بدون توابع کتابخانه ای جاوا اسکریپت)
ممنون میشم بزاری اینجا ... :لبخندساده:

binyaft

سه شنبه 19 مرداد 1389, 22:43 عصر

آقا کسی بدون جی کوئری شو نداره؟
(کلا بدون توابع کتابخانه ای جاوا اسکریپت)
ممنون میشم بزاری اینجا ... :لبخندساده:

یعنی چی ؟؟؟؟
جی کئوری هم یه فریم ورک جاوا اسکریپته

shahkaar

چهارشنبه 20 مرداد 1389, 13:56 عصر

اين كد هم توي IE و هم توي فايرفاكس تست شده:

<html>
<head>
<title>Google</title>
<style type="text/css">
a {
margin:2px 8px;
}
</style>
</head>
<script language="javascript">
var opHigh = 100;
var opLow = 0;
window.onload = function (){
var mi = document.getElementById('mn');
fade(mi, opLow,5);
}
function fade(mi, opacity, step){
//alert(opacity);
mi.style.opacity = opacity / 100;
mi.style.filter = "alpha(opacity="+opacity+")";
opacity += step;
if (opLow <= opacity && opacity <= opHigh) setTimeout(function(){fade(mi,opacity,step)}, 55);
}
</script>

<body style="margin:0px;padding:0px;font-family:Arial;">
<div id="mn" style="width:100%;border-bottom:1px solid C#‎AE2FF;padding:2px;">
<a href="#">Web</a>
<a href="#">Images</a>
<a href="#">Books</a>
<a href="#">Blogs</a>
</div>
</body>
</html>