• دانلود لودینگ های بسیار زیبا (CSS)
    #1
    Note 
    [تصویر:  loaders_015556.jpg]

    دانلود

    پاسخ
    #2
    Note 
    با سلام میخواستم ببینم از این لودینگ ها چطوری میشه استفاده کرد ؟
    من تو فایل html ام قرار دادم لودینگها رو تو صفحه نشون میده اما من میخوام فقط تا وقتی که صفحه بالا نیومده نشون بده و بعدش از بین بره
    چکار کنم؟؟؟

    پاسخ
    #3
    Note 
    سلام
    برای اینکه متوجه بشید صفحه کاملا بارگذاری شده از این کد جاوا اسکریپت میتونید استفاده کنید:
    [JS]window.onload = function () { document.getElementById('preloader').remove(); }[/JS]

    نحوه کار به این صورته که شما افکت لودینگ رو به صفحه اضافه میکنید و بعد وقتی صفحه لود شد اون رو با جاوا اسکریپت (همون کد بالا) حذف میکنید.

    [HTML]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Title of document</title>
    <meta charset="utf-8" />
    </head>
    <body>
    <style>
    .spinner {
    margin: 100px auto;
    width: 32px;
    height: 32px;
    position: relative;
    }

    .cube1, .cube2 {
    background-color: #333;
    width: 10px;
    height: 10px;
    position: absolute;
    top: 0;
    left: 0;

    -webkit-animation: cubemove 1.8s infinite ease-in-out;
    animation: cubemove 1.8s infinite ease-in-out;
    }

    .cube2 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
    }

    @-webkit-keyframes cubemove {
    25% { -webkit-transform: translateX(22px) rotate(-90deg) scale(0.5) }
    50% { -webkit-transform: translateX(22px) translateY(22px) rotate(-180deg) }
    75% { -webkit-transform: translateX(0px) translateY(22px) rotate(-270deg) scale(0.5) }
    100% { -webkit-transform: rotate(-360deg) }
    }

    @keyframes cubemove {
    25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
    } 50% {
    /* Hack to make FF rotate in the right direction */
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
    } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
    } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    }
    }
    </style>
    <div id="preloader" class="spinner">
    <div class="cube1"></div>
    <div class="cube2"></div>
    </div>

    <script>
    window.onload = function () { document.getElementById('preloader').remove(); }
    </script>
    </body>
    </html>
    [/HTML]

    پاسخ
    #4
    Note 
    واقعا ممنون از راهنماییتون مشکلم حل شد :yeah:

    پاسخ
    ایجاد موضوع جدید   پاسخ به موضوع  

    موضوعات مرتبط با این موضوع...
    موضوع نویسنده پاسخ بازدید آخرین ارسال
      سوال چطوری وقتی کاربر رسید به قسمتی از صفحه کد اجرا شه؟ naweednri 11 956 18-06-2017 ساعت 17:52
    آخرین ارسال: naweednri
      سوال مشکل نمایش در منو زیر مجموعه سطح چهارم blackwizard 0 247 30-06-2016 ساعت 19:27
    آخرین ارسال: blackwizard
    Note 7 افکت بسیار زیبای CSS THE KNIGHT 2 988 26-09-2014 ساعت 16:09
    آخرین ارسال: saber2
    Note افکت زیبا برای ساخت دکمه در css WWWorker 0 525 20-09-2014 ساعت 21:12
    آخرین ارسال: WWWorker
    Note دکمه دانلود زیبا با CSS3 Daniel 2 880 14-03-2014 ساعت 23:40
    آخرین ارسال: PHP.sec
    Note Tooltip زیبا با CSS Daniel 1 607 09-01-2014 ساعت 11:56
    آخرین ارسال: AnimeIraN
    Note CSS: کلید زیبای روشن و خاموش SOFTAFZAR 3 987 05-08-2013 ساعت 13:52
    آخرین ارسال: SOFTAFZAR
    Note افکت های زیبای CSS SOFTAFZAR 0 808 11-01-2013 ساعت 19:11
    آخرین ارسال: SOFTAFZAR

    کاربرانِ درحال بازدید از این موضوع:   1 مهمان