رفتن به مطلب

نمونه سایت های دارای بک گراند متحرک


kaboom

پست های پیشنهاد شده

سلام خسته نباشید

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

می خواستم یه چند نمونه ازشون رو بهم معرفی بکنید ...

ممنون

لینک به ارسال

این کار با استفاده از css3 animation امکان پذیر است.یک نمونه ساده آدرس زیر می باشد که برای یکی از دوستانم آماده کرده ام:


http://rango.ir/uploader/

نمونه های دیگر:


http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background


http://css-tricks.com/parallax-background-css3/

لینک به ارسال

سایتی که شما دیدی رو ما معرفی کنیم؟

این کار چند روش داره

یکیش استفاده از عکسه gif

یکیش استفاده از خاصیت انیمیشن در css3 است که فکر می کنم جذاب ترینشه من کد ساده ی یک نمونه را می گذارم در یک notepad ذخیره کن با پسوند html و با بروسر ببین

لینک به ارسال


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled 1</title>
<style type="text/css">
.divanim
{
width:100px;
height:16px;
background:#ccc;
position:absolute;
left:100px;
color:#CC0000;
font-size:80px;
text-align:left;
letter-spacing:-.2em;
font-weight:bold;
animation-name:mymove;
animation-duration:.2s;
animation-timing-function:linear;
animation-delay:2s;
animation-iteration-count:infinite;
animation-direction:alternate;
animation-play-state:running;
/* Firefox: */
-moz-animation-name:mymove;
-moz-animation-duration:.2s;
-moz-animation-timing-function:linear;
-moz-animation-delay:2s;
-moz-animation-iteration-count:infinite;
-moz-animation-direction:alternate;
-moz-animation-play-state:running;
/* Safari and Chrome: */
-webkit-animation-name:mymove;
-webkit-animation-duration:.2s;
-webkit-animation-timing-function:linear;
-webkit-animation-delay:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-direction:alternate;
-webkit-animation-play-state:running;
}
@keyframes mymove
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-moz-keyframes mymove /* Firefox */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {left:100px;letter-spacing:-.2em;}
to {left:120px;letter-spacing:.2em;}
}
</style>
</head>
<body>
<div class="divanim"></div>
</body>
</html>

و به عنوان یک نمونه پیشرفته این بازی آنلاین با css3 خلق شده

http://icefox.net/anigma/

لینک به ارسال

جناب آقای فخار عزیز ... من فکر کردم چیزه معروفی هست ...

یکی این سایته

www.zehneto.com

یکی هم همینی که امید جان قرار دادن

http://thecodeplayer.com/walkthrough/pure-css3-animated-clouds-background

می خواستم سایت های بیشتری از این نوع ها وجود داره ؟یا اینکه یه اموزشی چیزی باشه استفاده کرد ازش ...

می خواستم ببینم به اینها چی میگن.. یعنی اگر نمونه های بیشتری ازش رو مخوام ببینم چی سرچ کنم؟

لینک به ارسال

فقط همین خاصیت نیست

یکی دیگه از روش هاش jquery و javascript و همینطور swf که از نمونه های قدیمی تره

اما چند روز پیش با یک سایت jquery برخورد کردم که سایه ها با تناسب حرکت موس در صفحه حرکت می کردند اگر توی history بروسر سابقه اش باشه لینکش رو می گذارم

خاصیتی که باید جستجو کنید animation است و برای سرچ بهتر وبکیت انیمیشن یا -webkit-animation را جستجو کنید که هم در css و هم در jquery ثابت است

لینک به ارسال

جناب آقای فخار عزیز ... من فکر کردم چیزه معروفی هست ...

یکی این سایته

www.zehneto.com

یکی هم همینی که امید جان قرار دادن

http://thecodeplayer...ouds-background

می خواستم سایت های بیشتری از این نوع ها وجود داره ؟یا اینکه یه اموزشی چیزی باشه استفاده کرد ازش ...

می خواستم ببینم به اینها چی میگن.. یعنی اگر نمونه های بیشتری ازش رو مخوام ببینم چی سرچ کنم؟

یکی از بهترین مراجعش خود اون سایته اون سایت تک برگی نیست شما یک برگش رو دیدی

http://thecodeplayer.com/

لینک به ارسال

به گفتگو بپیوندید

هم اکنون می توانید مطلب خود را ارسال نمایید و بعداً ثبت نام کنید. اگر حساب کاربری دارید، برای ارسال با حساب کاربری خود اکنون وارد شوید .

مهمان
ارسال پاسخ به این موضوع ...

×   شما در حال چسباندن محتوایی با قالب بندی هستید.   حذف قالب بندی

  تنها استفاده از 75 اموجی مجاز می باشد.

×   لینک شما به صورت اتوماتیک جای گذاری شد.   نمایش به صورت لینک

×   محتوای قبلی شما بازگردانی شد.   پاک کردن محتوای ویرایشگر

×   شما مستقیما نمی توانید تصویر خود را قرار دهید. یا آن را اینجا بارگذاری کنید یا از یک URL قرار دهید.

×
×
  • اضافه کردن...