شما بگین اینو چجوری طراحی کرده؟؟؟؟

داوید

Member
سلام. اگه منظورتون هدر سایت هست، نه هیچ Gif ای در کار نیست و تمامی تصاویر Png هستند.
در واقع هدر این سایت از سه تصویر header،overlay و logo تشکیل شده است.
(توجه کنید که تصاویر Transparent یا شفاف هستند)

روش کار به این صورت هست که تصویر header از زیر overlay حرکت می‌کند و لوگوی اصلی سایت‌هم در فایل logo ذخیره شده است.
یک کد جاو اسکریپت (یا جی کوئری) استایل background-position فایل را تغییر می‌دهد و در نتیجه تصویر رو به بالا (و در زیر لوگو) حرکت می‌کند.

این روشی خلاقانه است که جدیداً مورد استفاده قرار می‌گیرد و از روش‌های قدیمی (مثل Gif) کارآمدتر و با کیفیت‌تر است.
 

داوید

Member
شما بگین برای چه وبلاگ یا سایتی میخواین که من کد رو متناسب با قالب بنویسم.
البته اسکریپت‌های مشابه به‌صورت رایگان بسیار زیاد وجود دارند.
 

LinkinForEver

مسئول بخش برنامه ها و مسائل گرافیک سه بعدی
سلام
بنده کد های سایت رو باز کردم ایشون یک عکس رو :
http://fontonline.ir/wp-content/themes/FontOnline/images/header.png


با این کد

<div class="header" style="background-position: 50% -200px;"><div class="header-overlay"></div></div>
اون عدد قرمز رو که میبیندی
با سرعت 5 صدمه ثانیه داره بهش اضافه میشه و اینطوری پایین میره یا بالعکس

[HTMLS]<div class="footer">
<div id="content">
<div id="content-side">
تمامي حقوق طراحی و ثبت برای <a href="http://fontonline.ir">فونت آنلاین | سرویس وب فونت فارسی</a> محفوظ مي باشد.

<div style="display:none">
<script type="text/javascript" language="javascript" src="http://www.webgozar.ir/c.aspx?Code=2950192&amp;t=counter"></script>
<noscript><a href="http://www.webgozar.com/counter/stats.aspx?code=2950192" target="_blank">آمار</a></noscript>
</div>

</div>
</div>
</div>[/HTMLS]
 

پیوست ها

  • header.png
    header.png
    44.5 کیلوبایت · بازدیدها: 8

LinkinForEver

مسئول بخش برنامه ها و مسائل گرافیک سه بعدی
بنده اضافه کنم کد های اصلی که نه دوست عزیز ... کد های اجرایی هستن ، بنده کدنویسی کار نمیکنم اما باز کردن این کد ها رو میشه با EXDecompiler ، یا Mozilla و Opera انجام داد ، میشه کاری نداره :wink:
 
آخرین ویرایش توسط مدیر:
logo.png

منظورتون این تصویر هست؟یه عکس با فرمت gif بیشتر نیس تمامی تصاویرpng هستش.برای دیدنش تو صفحه کلیک راست کنی view page info روبزنید اطلاعات مدیا رو ببینید
 
من وقت نکردم کد رو بررسی کنم ولی اگه با javascript باشه اصولی نیست چون با css3 animation هم به راحتی میشه این کار رو انجام داد.
 

جدیدترین ارسال ها

بالا