Konuyu Oyla:
  • Derecelendirme: 0/5 - 0 oy
  • 1
  • 2
  • 3
  • 4
  • 5
İndex Hazırlama Konusunda Yardıma ihtiyacım var
#1
İyi forumlar html hakkında azda olsun bilgim var .
Bugün bir sitede index için efektler falan buldum . Benim istediğim efekt şu :
http://codepen.io/natewiley/pen/dYmWMw

Efekti uygulamaya çalıştıgımda hiçbir şekilde efekti başlatamıyorum . Arkaplan siyah bir şekilde kalıyor .
Acaba bu sorunu çözüp zip şeklinde bana atabilirmisiniz !

Kod:
<html>
<head>

<style class="canvas-club">
body {
  background: black;
  overflow: hidden;
}

</style>
<script language="javascript" canvas="canvas-club"
var c = document.getElementById("canvas-club");
var ctx = c.getContext("2d");
var w = c.width = window.innerWidth;
var h = c.height = window.innerHeight;
var particles = [];
var maxParticles = 100;
var size = 2;
var r = size / 2;
var clearColor = "rgba(0, 0, 0, .2";
var mouse = {};
mouse.x = w / 2;
mouse.y = h / 2;

function random(min, max) {
        return (Math.random() * (max - min)) + min;
}

function getDistance(x1, y1, x2, y2) {
        return Math.sqrt((x1 - x2) * (x1 - x2) + (y1 - y2) * (y1 - y2));
}

function resize() {
        w = c.width = window.innerWidth;
        h = c.height = window.innerHeight
}

function moveMouse(e) {
        mouse.x = e.touches ? e.touches[0].clientX : e.clientX;
        mouse.y = e.touches ? e.touches[0].clientY : e.clientY;
}

function P() {}

P.prototype = {

        init: function() {
                this.x = random(0, (w - size));
                this.y = h + random(0, 20);
                this.vx = 0;
                this.vy = random(-1, -2);
                this.alpha = 0;
                this.active = false;
        },

        draw: function() {
                var hue = (h - this.y) * .6;

                ctx.fillStyle = this.active ? "hsla(" + (hue + 180) + ", 100%, 50%, 1)" : "hsla(" + hue + ", 100%, 50%, .8)";
                ctx.strokeStyle = this.active ? "hsla(" + (hue + 180) + ", 100%, 50%, .5)" : "hsla(" + hue + ", 100%, 50%, " + this.alpha + ")";
                ctx.lineWidth = r / 2;
                ctx.globalCompositeOperation = this.active ? "lighter" : "source-over";

                ctx.beginPath();
                ctx.arc(this.x + r, this.y + r, r, 0, 2 * Math.PI, false);
                ctx.fill();

                for (var i in particles) {
                        var p = particles[i];
                        if (getDistance(this.x, this.y, p.x, p.y) < w / 7) {
                                ctx.beginPath();
                                ctx.moveTo(this.x + r, this.y + r);
                                ctx.lineTo(p.x + r, p.y + r);
                                ctx.stroke();
                        }
                }

                this.update();
        },

        update: function() {
                this.active = (getDistance(this.x, this.y, mouse.x, mouse.y) < 80) ? true : false;
                this.x += this.vx;
                this.y += this.vy;
                this.vx *= 1.15;
                this.alpha += .0005;
                if (this.y < h * .8 && Math.random() > .5) {
                        this.vx = random(-1, 1);
                        this.vy -= .05;
                }

                if (this.y + 50 < 0) {
                        this.init();
                }
        }
}

function setup() {

        for (var i = 0; i < maxParticles; i++) {
                (function(x) {
                        setTimeout(function() {
                                var p = new P();
                                p.init();
                                particles.push(p);
                        }, x * 100)
                })(i);
        }

        window.addEventListener("resize", resize);
        window.addEventListener("mousemove", moveMouse);
        window.addEventListener("touchstart", moveMouse);
        window.addEventListener("touchmove", moveMouse);
}

function anim() {
        ctx.fillStyle = clearColor;
        ctx.globalCompositeOperation = "source-over";
        ctx.fillRect(0, 0, w, h);

        for (var i in particles) {
                var p = particles[i];
                p.draw();
        }
        window.requestAnimationFrame(anim);
}

setup();

anim();
</script>
</head>
<body>
<canvas id="canvas-club"></canvas>




</body>

</html>

Benim yaptığım çalışma bu şekilde ama çalıştıramıyorum !![/php]
Beğenenler:
#2
@Ayar başkan bi ayar ver konuya
info@turkishsecurity.com

Sakın Kader Deme Kaderin üstünde bir kader vardır 
Ne yapsalar boş göklerden gelen bir karar vardır
Beğenenler:
#3
Aynen Bi yardım olursa çok sevinirim
Beğenenler:
#4
Yardım olursa sevinirim :!
Beğenenler:

Konu ile Alakalı Benzer Konular
Konular Yazar Yorumlar Okunma Son Yorum
  Ağ dinleme konusunda yardım daggez 2 233 04-01-2016, Saat: 11:59
Son Yorum: Mr.F92
  Mybb İndex.html de konu gösterme YARDIM #Azazil 7 992 01-11-2014, Saat: 13:32
Son Yorum: #Azazil
Anahtar Kelimeler

İndex Hazırlama Konusunda Yardıma ihtiyacım var indir, İndex Hazırlama Konusunda Yardıma ihtiyacım var Videosu, İndex Hazırlama Konusunda Yardıma ihtiyacım var Online izle, İndex Hazırlama Konusunda Yardıma ihtiyacım var Bedava indir, İndex Hazırlama Konusunda Yardıma ihtiyacım var Yükle, İndex Hazırlama Konusunda Yardıma ihtiyacım var Hakkında, İndex Hazırlama Konusunda Yardıma ihtiyacım var Nedir, İndex Hazırlama Konusunda Yardıma ihtiyacım var Free indir, İndex Hazırlama Konusunda Yardıma ihtiyacım var Oyunu, İndex Hazırlama Konusunda Yardıma ihtiyacım var Download


1 Ziyaretçi