حتما تا کنون در وب سایت های مختلف به بنرهای تبلیغاتی برخورد کرده اید که فلش نبوده اند ، و حتما از خود سئوال کرده اید که اینگونه بنرها چگونه ساخته می شوند … حقیقت این است که فلش مدتهاست که در بستر مرگ بسر می برد ! و با مرگ فلش وظیفه ساخت بنر به گردن css و jQuery واگذار خواهد شد در این آموزش شمار را با مراحل ساخت یک بنر ساده توسط CSS Animation و Keyframe آشنا می کنم

ساخت بنر بدون استفاده از فلش




برای ساخت بنر متحرک به ابزارهایی نیاز داریم که در زیر می بینید :

پس زمینه ثابت




ابر متحرک ۱



ابر متحرک ۲



ابر متحرک ۳





انیمیشن مرد پرنده



برم سراغ اموزش ساده :



مثل همیشه، ابتدا ساختار HTML


کد HTML:
[LEFT][COLOR=#444444][FONT=Consolas]</pre>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]<pre class="brush:php"><!DOCTYPE html>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]<head>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]<title>CSS3 Animated Web Banner | onlyWebPro.com</title>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]</head>[/FONT][/COLOR]  [COLOR=#444444][FONT=Consolas]<body>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]<div id="banner_wrapper">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]    <div id="content">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <h2>Need Help From Super Boy?</h2>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <p><a href="#">Learn More</a></p>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]    </div><!-- END content -->[/FONT][/COLOR]  [COLOR=#444444][FONT=Consolas]    <div id="moving-clouds">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <ul id="group-1">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-1"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-2"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-3"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-4"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        </ul>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <ul id="group-2">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-1"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-2"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-3"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]            <li class="cloud-4"></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        </ul>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]    </div><!-- END moving-clouds -->[/FONT][/COLOR]  [COLOR=#444444][FONT=Consolas]    <ul id="flying-man">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <li></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]    </ul><!-- END flying-man -->[/FONT][/COLOR]  [COLOR=#444444][FONT=Consolas]    <ul id="bottom-cloud">[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]        <li></li>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]    </ul><!-- END water -->[/FONT][/COLOR]  [COLOR=#444444][FONT=Consolas]</div><!-- END banner_wrapper -->[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]</body>[/FONT][/COLOR] [COLOR=#444444][FONT=Consolas]</html> [/FONT][/COLOR][/LEFT



  • برای شروع ، آی دی 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;} }


خیلی ساده توضیح دادم تا همه بفهمن تشکر یادتون نره