تبلیغات در اینترنتتبلیغات در اینترنت
نمایش نتایج: از 1 به 4 از 4

موضوع: ساخت بنر به کمک CSS

  1. Top | #1
    کاربر اخراجی

    تاریخ عضویت
    Apr 2014
    ورژن ویبولتین
    4.2.2
    نوشته ها
    163
    مورد پسند
    51 بار
    اطلاعات
    میزان امتیاز
    0

    پیش فرض ساخت بنر به کمک CSS

    حتما تا کنون در وب سایت های مختلف به بنرهای تبلیغاتی برخورد کرده اید که فلش نبوده اند ، و حتما از خود سئوال کرده اید که اینگونه بنرها چگونه ساخته می شوند … حقیقت این است که فلش مدتهاست که در بستر مرگ بسر می برد ! و با مرگ فلش وظیفه ساخت بنر به گردن 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;} }

    4 تشکر توسط:





  2. گیفت کارت آیتونز

  3. Top | #2
    کاربر سایت

    تاریخ عضویت
    Jan 2017
    ورژن ویبولتین
    3
    نوشته ها
    2
    موردپسند
    3 بار
    اطلاعات
    Windows NT 10.0 Firefox 39.0
    میزان امتیاز
    0

    پیش فرض

    یکم بیشتر توضیح می دی ؟
    ای ام شاخ

  4. Top | #3
    کاربر سایت

    تاریخ عضویت
    Jan 2017
    ورژن ویبولتین
    2
    نوشته ها
    8
    موردپسند
    1 بار
    اطلاعات
    Windows NT 6.3 Chrome 55.0.2883.87
    میزان امتیاز
    0

    پیش فرض

    یه دنیا ممنون واقعا دلم نیومد با یه تشکر برم خیلی خوب بود
    زمین و آسمانی پاک با انرژی پاک. برق خورشیدی | سولار

  5. Top | #4
    مدیر ارشد

    تاریخ عضویت
    May 2013
    ورژن ویبولتین
    4.2.0
    نوشته ها
    5,994
    مورد پسند
    5,771 بار
    نوشته های وبلاگ
    7
    اطلاعات
    Windows 7/Server 2008 R2 Firefox 51.0
    میزان امتیاز
    724

    پیش فرض

    نقل قول نوشته اصلی توسط powersol نمایش پست ها
    یه دنیا ممنون واقعا دلم نیومد با یه تشکر برم خیلی خوب بود
    برای تشکر نیازی به پست دادن نیست لایک به تنهایی کافیه

    دیگه اسپم ندین

    بسته شد

    کاربر مقابل از MR.Shadow بابت این پست مفید تشکر کرده است:

    Don't bite the hand that feeds you

اطلاعات موضوع

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

در حال حاضر 1 کاربر در حال مشاهده این موضوع است. (0 کاربران و 1 مهمان ها)

علاقه مندی ها (Bookmarks)

علاقه مندی ها (Bookmarks)

مجوز های ارسال و ویرایش

  • شما نمیتوانید موضوع جدیدی ارسال کنید
  • شما امکان ارسال پاسخ را ندارید
  • شما نمیتوانید فایل پیوست کنید.
  • شما نمیتوانید پست های خود را ویرایش کنید
  •