حتما تا کنون در وب سایت های مختلف به بنرهای تبلیغاتی برخورد کرده اید که فلش نبوده اند ، و حتما از خود سئوال کرده اید که اینگونه بنرها چگونه ساخته می شوند … حقیقت این است که فلش مدتهاست که در بستر مرگ بسر می برد ! و با مرگ فلش وظیفه ساخت بنر به گردن css و jQuery واگذار خواهد شد در این آموزش شمار را با مراحل ساخت یک بنر ساده توسط CSS Animation و Keyframe آشنا می کنم
ساخت بنر بدون استفاده از فلش
برای ساخت بنر متحرک به ابزارهایی نیاز داریم که در زیر می بینید :
پس زمینه ثابت
ابر متحرک ۱
ابر متحرک ۲
ابر متحرک ۳
انیمیشن مرد پرنده
مثل همیشه، ابتدا ساختار HTML
کد:
</pre> <pre class="brush:php"><!DOCTYPE html> <head> <title>CSS3 Animated Web Banner | onlyWebPro.com</title> </head> <body> <div id="banner_wrapper"> <div id="content"> <h2>Need Help From Super Boy?</h2> <p><a href="#">Learn More</a></p> </div><!-- END content --> <div id="moving-clouds"> <ul id="group-1"> <li class="cloud-1"></li> <li class="cloud-2"></li> <li class="cloud-3"></li> <li class="cloud-4"></li> </ul> <ul id="group-2"> <li class="cloud-1"></li> <li class="cloud-2"></li> <li class="cloud-3"></li> <li class="cloud-4"></li> </ul> </div><!-- END moving-clouds --> <ul id="flying-man"> <li></li> </ul><!-- END flying-man --> <ul id="bottom-cloud"> <li></li> </ul><!-- END water --> </div><!-- END banner_wrapper --> </body> </html>
- برای شروع ، آی دی banner_wrapper را تعریف میکنیم که مشخص میک کند بنر دقیقا کجا واقع شده است
- دقت داشته باشید که تمام عناصر داخل آی دی content قرار داشته باشند
- آی دی moving-clouds را ساخته و ابرها را دا خل دو گروه جدا به نام های : group-1 و group-2 قرار دهید تا متحرک سازی آنها ساده تر باشد
- گروه ۱ و گروه ۲ در برگیرنده ابرها می باشند
- انیمیشن مرد پرنده را داخل آی دی flying-man تعریف کنید
- آی دی bottom-cloud نگه دارنده پس زمینه بنر می باشد
ساختار اصلی css
کد:
ul li { list-style-type: none; } #banner_wrapper { background: #d1edf9; border: 1px solid #759BAA; box-shadow: 0px 0px 5px #9EC8D8; height: 300px; margin: 40px auto 0; overflow: hidden; position: relative; width: 500px; } #banner_wrapper #content { margin: 30px auto 0; text-align: center; position: relative; z-index: 2; } #banner_wrapper #content h2 { font-family: Tahoma, Geneva, sans-serif; color: #137dd5; font-size: 50px; margin: 0; animation: delayed-fade-animation 2s 1 ease-in-out; -webkit-animation: delayed-fade-animation 2s 1 ease-in-out; -moz-animation: delayed-fade-animation 2s 1 ease-in-out; } #banner_wrapper #content p { font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; color: #137dd5; font-size: 20px; animation: delayed-fade-animation 3s 1 ease-in-out; -webkit-animation: delayed-fade-animation 3s 1 ease-in-out; -moz-animation: delayed-fade-animation 3s 1 ease-in-out; } #banner_wrapper ul#flying-man { height: 100px; margin: 0; padding: 0; position: absolute; bottom: 25px; left: 20px; z-index: 2; overflow: visible; width: 250px; animation: flying-man-animation 3s 1 ease-out; -webkit-animation: flying-man-animation 3s 1 ease-out; -moz-animation: flying-man-animation 3s 1 ease-out; } #banner_wrapper ul#flying-man li { background: url(404 Not Found) no-repeat left top; height: 100px; position: absolute; bottom: 0px; left: 0px; overflow: visible; width: 150px; animation: floating-animation 1s infinite ease-in-out; -webkit-animation: floating-animation 1s infinite ease-in-out; -moz-animation: floating-animation 1s infinite ease-in-out; } #banner_wrapper ul#bottom-cloud li { width: 500px; height: 165px; background: url(404 Not Found) no-repeat left bottom; z-index: 0; position: absolute; bottom: 0px; left: 0px; } #banner_wrapper #moving-clouds { position: absolute; top: 0px; z-index: 1; animation: cloud-animation 30s infinite linear; -webkit-animation: cloud-animation 30s infinite linear; -moz-animation: cloud-animation 30s infinite linear; } #banner_wrapper #moving-clouds #group-1 { width:500px; padding: 0; position: absolute; left:0px; } #banner_wrapper #moving-clouds #group-2 { width: 500px; padding: 0; position: absolute; left: 500px; } #banner_wrapper .cloud-1 { width: 140px; height: 65px; background: url(404 Not Found) no-repeat left top; position: absolute; top: 10px; left: 70px; } #banner_wrapper .cloud-2 { width: 86px; height: 40px; background: url(404 Not Found) no-repeat left top; position: absolute; top: -25px; left: 300px; } #banner_wrapper .cloud-3 { width: 120px; height: 55px; background: url(404 Not Found) no-repeat left top; position: absolute; top: 100px; left: 350px; } #banner_wrapper .cloud-4 { width: 86px; height: 40px; background: url(404 Not Found) no-repeat left top; position: absolute; top: 75px; left: 10px; }
- آی دی هایbanner_wrapper و content h2 در واقع نقش استایل دهی پایه را بازی می کنند و delayed-fade-animation عهده دار ظهور و محو عناصر می باشد
- آی دی content pاستایل متن را مشخص می کند
- آی دی flying-man انیمیشن مرد پرنده را کنترل می کند
- flying-man li و floating-animation پرواز مرد پرنده را کنترل می کند
- moving-clouds و cloud-animation مسئول کنترل انیمیشن ابرها می باشند
ساختار CSS Keyframe
کد:
</span></strong> <pre class="brush:css">/***************** Animation Settings ******************/ /*CSS Standard*/ @keyframes flying-man-animation { 0% {left: -200px;} 100% {left: 20px;} } @keyframes floating-animation { 0% { bottom: 0px; } 50% { bottom: 3px; } 100% { bottom: 0px; } } @keyframes delayed-fade-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @keyframes cloud-animation { 0% {left: 0px;} 99.9999% {left: -500px;} 100% {left: 0px;} } /*Mozilla Browser*/ @-moz-keyframes flying-man-animation { 0% {left: -200px;} 100% {left: 20px;} } @-moz-keyframes floating-animation { 0% { bottom: 0px; } 50% { bottom: 3px; } 100% { bottom: 0px; } } @-moz-keyframes delayed-fade-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-moz-keyframes cloud-animation { 0% {left: 0px;} 99.9999% {left: -500px;} 100% {left: 0px;} } /*Webkit Browser*/ @-webkit-keyframes flying-man-animation { 0% {left: -200px;} 100% {left: 20px;} } @-webkit-keyframes floating-animation { 0% { bottom: 0px; } 50% { bottom: 3px; } 100% { bottom: 0px; } } @-webkit-keyframes delayed-fade-animation { 0% {opacity: 0;} 80% {opacity: 0;} 100% {opacity: 1;} } @-webkit-keyframes cloud-animation { 0% {left: 0px;} 99.9999% {left: -500px;} 100% {left: 0px;} }
آدرس لینک بک
درباره لینک بک ها
ساخت بنر به کمک CSS
نوشته اصلی توسط powersol 
علاقه مندی ها (Bookmarks)