پرسش و پاسخ
 
* پرسش   HyperLink HyperLink
 
 
     
   
     
   
عنوان پرسش: آموزش ساخت تصوير زمينه متحرك (animated Background) با CSS
شرح پرسش: شايد هنگام جستجو در اينترت با سايت هايي مواجه شده ايد كه داراي تصاوير زمينه متحرك باشند مثل پرندگاني كه در حال پرواز هستند يا آسماني كه ابرهاي آن دائما در حال حركتند.
امروز ميخوام 1 نمونه كاربردي از ساخت اين تصوير متحرك در زمينه يا background animation به شما عزيزان آموزش بدم

- براي اين كار قبل از هر چيز نياز به يك تصوير يا مدل تصويري داريم كه قابليت واكنشگرايي داشته باشه و با تكرار اون در صفحه تصوير يكنواختي ايجاد بشه (ابتدا و انتهاي تصوير به لحاظ تكرار در صفحه باهم هماهنگ باشند). همانند تصوير زير:
http://balakhani.ir/learn/css_01/clouds.png

- يك سند HTML جديد و يك فايل CSS نيز ايجاد كنيد و فايل CSS را در هدر سند HTML خود فراخواني كنيد.

- در سند HTML خود پس از تگ body كد زير را بنويسيد:
<div id="animate-area"></div>

- در فايل CSS خود ابتدا action زير را بنويسيد:
@keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-webkit-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-ms-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
@-moz-keyframes animatedBackground {
from { background-position: 0 0; }
to { background-position: 100% 0; }
}
كد فوق معرف يك action است كه تصوير زمينه شما را با تغيير موقعيت افقي از راست به چپ به حركت در مي آورد. در خاصيت from موقعيت ابتدايي و در خاصيت to موقعيت انتهايي تصوير زمينه بيان شده است. تكرار كد فوق با معرفهاي -ms- ، -moz- ، -webkit- نيز دليل بر پشتيباني كليه مرورگرها و تفسير اين action توسط آنهاست كه دوستان طراح عزيز حتما به مفاهيم آن آشنايي دارند.

- سپس syntax زير را نيز در فايل CSS خود بنويسيد:
#animate-area {
width: 560px;
height: 400px;
background-image: url(bg-clouds.png);
background-position: 0px 0px;
background-repeat: repeat-x;

animation: animatedBackground 40s linear infinite;
-ms-animation: animatedBackground 40s linear infinite;
-moz-animation: animatedBackground 40s linear infinite;
-webkit-animation: animatedBackground 40s linear infinite;
}
كد فوق جزئيات عنصر animate-area سند HTML است. در اين كد خاصيت background-repeat متد repeat-x را در خود دارد كه بيانگر تكرار تصوير زمينه در راستاي افقي بصورت texture (تكرار شوند) است. در اين صورت تصوير زمينه در شيء ما در راستاي افقي انتهاي مشخصي پيدا نميكند و مرتبا تكرار ميشود پس action تعريف شده در مرحله قبل آن را بصورت يكنواخت render ميكند و يك تصوير زمينه متحرك در پروژه ما در سند HTML نمايش داده ميشود.

نمونه اين پروژه را ميتوانيد در لينك زير مشاهده كنيد:
http://balakhani.ir/learn/css_01/

تا جاي ممكن سعي كردم اين مبحث آموزشي ساده و روان باشد تا كليه دوستان عزيز بتوانند از آن استفاده كنند.
فايل اين پروژه را ميتوانيد از طريق لينك زير دانلود كنيد:
http://balakhani.ir/learn/css_01.zip

هرگونه ابهام و سوالي را نيز ميتوانيد در همين صفحه مطرح كنيد.
موفق و سربلند باشيد - متين بالاخاني
فایل مرتبط: - - -
لینک مرتبط: - - -
وضعیت سوال: در انتظار پاسخ
 
 
گروه تخصصی: همه موارد زمان ثبت سوال: چهارشنبه، 25 دی 1392 - 17:09:33 تعداد بازدید: 160 تعداد پاسخ: 2
 
     
 
* پاسخ جدید  
 
 
     
 


 
     
 
پاسخ:  
   
فایل مرتبط: (حد اکثر 4 مگابایت)
لینک مرتبط:
 
 
پیام مدیریت در خصوص درج پاسخها

 
     
 
* مشخصات متخصص جدیدترین  -  قدیمی ترین  - امتیاز
 
 
     
 
0
امتیاز پاسخ
[imgExp]

سبحان بالاخانی
چ، 16/04/95 - 23:19
 
     
متن پاسخ:

نقل قول
نقل قول از: afsaneh molayi (1392/10/28 - 23:10):
لینکهایی که در این صفحه گذاشتید باز نمیشن


بله خانم مولايي حق با شماست بدليل مشكل فني خود سايت مرجع متخصصين هستش چون بعد از underline رو لينك نميكنه. من اين مشكل رو گروه قبلي خودم هم داشتم.
براي باز شدن لينكهاي اين مبحث آموزشي بايد آنها را در نوار آدرس مرورگر خود copy paste كنيد. اين مشكل در ساير مباحث اين گروه با تغيير _ به - حل شد.
از دقت نظر شما متشكرم.
لینک مرتبط:
فایل مرتبط:
- - -
- - -
     
 
1
امتیاز پاسخ
[imgExp]

afsaneh molayi
چ، 16/04/95 - 23:10
 
     
متن پاسخ:

نقل قول
لینکهایی که در این صفحه گذاشتید باز نمیشن
لینک مرتبط:
فایل مرتبط:
- - -
- - -


 
     
کلیه حقوق متعلق به مرجع متخصصین ایران می باشد.
Protected under Iranian Copyright laws - (C) 1999-2019 irexperts.ir - Privacy Policy (in Persian)