ساخت بنر به کمک CSS Animation و Keyframe

CodePlus · Jul 14, 2012

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

در این آموزش شمار را با مراحل ساخت یک بنر ساده توسط CSS Animation و Keyframe آشنا می کنم

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

پس زمینه ثابت

ابر متحرک ۱

ابر متحرک ۲

ابر متحرک ۳

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

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

HTML:

<!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

کد:

[COLOR=#000000]
/*****************
Pre Settings
******************/
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(images/flyingman.gif) 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(images/bottom_cloud.png) 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(images/cloud01.png) no-repeat left top;
    position: absolute;
    top: 10px;
    left: 70px;
}
 
#banner_wrapper .cloud-2 {
    width: 86px;
    height: 40px;
    background: url(images/cloud02.png) no-repeat left top;
    position: absolute;
    top: -25px;
    left: 300px;
}
 
#banner_wrapper .cloud-3 {
    width: 120px;
    height: 55px;
    background: url(images/cloud03.png) no-repeat left top;
    position: absolute;
    top: 100px;
    left: 350px;
}
 
#banner_wrapper .cloud-4 {
    width: 86px;
    height: 40px;
    background: url(images/cloud02.png) no-repeat left top;
    position: absolute;
    top: 75px;
    left: 10px;
}

[/COLOR]

آی دی هایbanner_wrapper و content h2 در واقع نقش استایل دهی پایه را بازی می کنند و delayed-fade-animation عهده دار ظهور و محو عناصر می باشد
آی دی content pاستایل متن را مشخص می کند
آی دی flying-man انیمیشن مرد پرنده را کنترل می کند
flying-man li و floating-animation پرواز مرد پرنده را کنترل می کند
moving-clouds و cloud-animation مسئول کنترل انیمیشن ابرها می باشند

ساختار CSS Keyframe

کد:

/*****************
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 Keyframe کلیدهای متحرک سازی را بسیار ساده ، ساده تر از فلش میسازیم و در پایان ، …………….. با فلش خداحافظی کنید

عنوان	تالار	پاسخ ها	تاریخ
ساخت انیمیشن در CSS	HTML , XHTML , CSS	5	Jul 28, 2015
ساخت حاشیه (border) در CSS	HTML , XHTML , CSS	4	Jul 28, 2015
ساخت css اختصاصی برای ie	HTML , XHTML , CSS	4	Mar 14, 2014
ساخت پنجره Edit	HTML , XHTML , CSS	3	Mar 10, 2014
آموزش ساخت منوی کرکره ای در 4 دقیقه !	HTML , XHTML , CSS	13	Oct 15, 2012

ساخت بنر به کمک CSS Animation و Keyframe

CodePlus

عضو جدید

Similar threads