طراحی سایت شرکتی با کنترل پنل اختصاصی تحویل فوری - 350 هزار تومان اطلاعات بیشتر

افکت بسیار زیبا به شکل تارعنکبوت بنام particles برای پس زمینه

افکت بسیار جذاب با قابلیت Touch بنام particles

particles,افکت با قابلیت touch

افکت بسیار زیبا به شکل تارعنکبوت بنام particles برای پس زمینه

حتما شما هم دوست دارید سایتی متفاوت از سایت های کلیشه ای داشته باشید در این قسمت قصد داریم افکت بسیار جذابی را به شما آموزش دهیم که قابلیت touch هم دارد پیشنهاد میکنم ابتدا دمو این افکت جذاب را ببینید مسلما مشتاق به یادگیری خواهید شد.

لینک دمو

فایلهای particles.js , app.js, stats.js را به انضمام کتابخانه جی کوئری از لینک بالا دانلود سپس به پروژه ضمیمه کنید.

کد HTML برای particles

 <div class="count-particles">
        <span class="js-count-particles">--</span> particles
    </div>
    <div id="particles-js"></div>

کد CSS برای particles

 html,
        body,
        div,
        span,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        abbr,
        address,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        samp,
        small,
        strong,
        sub,
        sup,
        var,
        b,
        i,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            outline: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent
        }

        body {
            line-height: 1
        }

        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block
        }

        nav ul {
            list-style: none
        }

        blockquote,
        q {
            quotes: none
        }

        blockquote:before,
        blockquote:after,
        q:before,
        q:after {
            content: none
        }

        a {
            margin: 0;
            padding: 0;
            font-size: 100%;
            vertical-align: baseline;
            background: transparent;
            text-decoration: none
        }

        mark {
            background-color: #ff9;
            color: #000;
            font-style: italic;
            font-weight: bold
        }

        del {
            text-decoration: line-through
        }

        abbr[title],
        dfn[title] {
            border-bottom: 1px dotted;
            cursor: help
        }

        table {
            border-collapse: collapse;
            border-spacing: 0
        }

        hr {
            display: block;
            height: 1px;
            border: 0;
            border-top: 1px solid #ccc;
            margin: 1em 0;
            padding: 0
        }

        input,
        select {
            vertical-align: middle
        }

        li {
            list-style: none
        }


        /* =============================================================================
   My CSS
   ========================================================================== */

        /* ---- base ---- */

        html,
        body {
            width: 100%;
            height: 100%;
            background: #111;
        }

        html {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }

        body {
            font: normal 75% Arial, Helvetica, sans-serif;
        }

        canvas {
            display: block;
            vertical-align: bottom;
        }


        /* ---- stats.js ---- */

        .count-particles {
            background: #000022;
            position: absolute;
            top: 48px;
            left: 0;
            width: 80px;
            color: #13E8E9;
            font-size: .8em;
            text-align: left;
            text-indent: 4px;
            line-height: 14px;
            padding-bottom: 2px;
            font-family: Helvetica, Arial, sans-serif;
            font-weight: bold;
        }

        .js-count-particles {
            font-size: 1.1em;
        }

        #stats,
        .count-particles {
            -webkit-user-select: none;
            margin-top: 5px;
            margin-left: 5px;
        }

        #stats {
            border-radius: 3px 3px 0 0;
            overflow: hidden;
        }

        .count-particles {
            border-radius: 0 0 3px 3px;
        }


        /* ---- particles.js container ---- */

        #particles-js {
            width: 100%;
            height: 100%;
            background-color: #b61924;
            background-image: url('');
            background-size: cover;
            background-position: 50% 50%;
            background-repeat: no-repeat;
        }

کد JavaScript برای particles

<script>
        var count_particles, stats, update;
        stats = new Stats;
        stats.setMode(0);
        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';
        document.body.appendChild(stats.domElement);
        count_particles = document.querySelector('.js-count-particles');
        update = function() {
            stats.begin();
            stats.end();
            if (window.pJSDom[0].pJS.particles && window.pJSDom[0].pJS.particles.array) {
                count_particles.innerText = window.pJSDom[0].pJS.particles.array.length;
            }
            requestAnimationFrame(update);
        };
        requestAnimationFrame(update);

    </script>

منبع: طراحی سایت ارزان

اگر سوالی در رابطه با این مطلب دارید می توانید از طریق فرم زیر ارسال کنید
  • ایمیل شما به هیچ عنوان در سایت نمایش داده نمی شود
  • کامنت شما بعد از تایید مدیر سایت نمایش داده می شود