JS скрипт

GOTI · 17 Януари 2015

Здравейте,

В http://whois.domaintools.com/ има един JS който не мога да видя как става.

Става въпрос за mouse over ефекта в началото на сайта в пустинята.

vinsbg · 17 Януари 2015

В .js файла потърси думата 'spider' и ще го намериш

http://whois.domaintools.com/compos...&ext=js&hash=ec57723be951c441606bd745b5324416

GOTI · 17 Януари 2015

vinsbg каза:
В .js файла потърси думата 'spider' и ще го намериш
http://whois.domaintools.com/compos...&ext=js&hash=ec57723be951c441606bd745b5324416

Благодаря :?:

GOTI · 18 Януари 2015

Сега остава проблема че не мога да го интерпретирам

HTML:

<canvas id="spiders" class="hidden-xs" width="1920" height="396"></canvas>

<script type="text/javascript">
      var width, height, canvas, ctx, points, target, animateHeader = true;

    // Main
    initHeader();
    initAnimation();
    addListeners();

    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {
            x: width / 2,
            y: height / 3
        };

        canvas = document.getElementById( 'spiders' );
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext( '2d' );

        // create points
        points = [];
        for ( var x = 0; x < width; x = x + width / 20 ) {
            for ( var y = 0; y < height; y = y + height / 20 ) {
                var px = x + Math.random() * width / 20;
                var py = y + Math.random() * height / 20;
                var p = {
                    x: px,
                    originX: px,
                    y: py,
                    originY: py
                };
                points.push( p );
            }
        }

        // for each point find the 5 closest points
        for ( var i = 0; i < points.length; i++ ) {
            var closest = [];
            var p1 = points[ i ];
            for ( var j = 0; j < points.length; j++ ) {
                var p2 = points[ j ]
                if ( !( p1 == p2 ) ) {
                    var placed = false;
                    for ( var k = 0; k < 5; k++ ) {
                        if ( !placed ) {
                            if ( closest[ k ] == undefined ) {
                                closest[ k ] = p2;
                                placed = true;
                            }
                        }
                    }

                    for ( var k = 0; k < 5; k++ ) {
                        if ( !placed ) {
                            if ( getDistance( p1, p2 ) < getDistance( p1, closest[ k ] ) ) {
                                closest[ k ] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }

        // assign a circle to each point
        for ( var i in points ) {
            var c = new Circle( points[ i ], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)' );
            points[ i ].circle = c;
        }
    }

    // Event handling
    function addListeners() {
        if ( !( 'ontouchstart' in window ) ) {
            window.addEventListener( 'mousemove', mouseMove );
        }
        window.addEventListener( 'scroll', scrollCheck );
        window.addEventListener( 'resize', resize );
    }

    function mouseMove( e ) {
        var posx = posy = 0;
        if ( e.pageX || e.pageY ) {
            posx = e.pageX;
            posy = e.pageY;
        } else if ( e.clientX || e.clientY ) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }

    function scrollCheck() {
        if ( document.body.scrollTop > height ) animateHeader = false;
        else animateHeader = true;
    }

    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
    }

    // animation
    function initAnimation() {
        animate();
        for ( var i in points ) {
            shiftPoint( points[ i ] );
        }
    }

    function animate() {
        if ( animateHeader ) {
            ctx.clearRect( 0, 0, width, height );
            for ( var i in points ) {
                // detect points in range
                if ( Math.abs( getDistance( target, points[ i ] ) ) < 4000 ) {
                    points[ i ].active = 0.3;
                    points[ i ].circle.active = 0.6;
                } else if ( Math.abs( getDistance( target, points[ i ] ) ) < 20000 ) {
                    points[ i ].active = 0.1;
                    points[ i ].circle.active = 0.3;
                } else if ( Math.abs( getDistance( target, points[ i ] ) ) < 40000 ) {
                    points[ i ].active = 0.02;
                    points[ i ].circle.active = 0.1;
                } else {
                    points[ i ].active = 0;
                    points[ i ].circle.active = 0;
                }

                drawLines( points[ i ] );
                points[ i ].circle.draw();
            }
        }
        requestAnimationFrame( animate );
    }

    function shiftPoint( p ) {
        TweenLite.to( p, 1 + 1 * Math.random(), {
            x: p.originX - 50 + Math.random() * 100,
            y: p.originY - 50 + Math.random() * 100,
            onComplete: function() {
                shiftPoint( p );
            }
        } );
    }

    // Canvas manipulation
    function drawLines( p ) {
        if ( !p.active ) return;
        for ( var i in p.closest ) {
            ctx.beginPath();
            ctx.moveTo( p.x, p.y );
            ctx.lineTo( p.closest[ i ].x, p.closest[ i ].y );
            ctx.strokeStyle = 'rgba(255,255,255,' + p.active + ')';
            ctx.stroke();
        }
    }

    function Circle( pos, rad, color ) {
        var _this = this;

        // constructor
        ( function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        } )();

        this.draw = function() {
            if ( !_this.active ) return;
            ctx.beginPath();
            ctx.arc( _this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false );
            ctx.fillStyle = 'rgba(255,255,255,' + _this.active + ')';
            ctx.fill();
        };
    }

    // Util
    function getDistance( p1, p2 ) {
        return Math.pow( p1.x - p2.x, 2 ) + Math.pow( p1.y - p2.y, 2 );
    }

} );

function wrap_visible_url(string, max) {
	if(string.length <= max)
	    return string;
	dashPos = string.indexOf('-');
	if(dashPos > -1 && dashPos <= max)
	    return string;
	slashPos = string.indexOf('/');
	if(slashPos > -1 && slashPos <=max )
	    return string.substr(0,slashPos+1) + '<br>' + string.substr(slashPos+1,60);
	return string.substr(0, max-1) + '<br>' + string.substr(max-1,70);
}

</script>

Някой идеи?

anonimen · 18 Януари 2015

Нещо не си копирал както трява. Аз го подкарах - само само mousemove ефекта трябва да се добави - http://jsfiddle.net/Lvcma5p1/

GOTI · 20 Януари 2015

Е да ама при мен не тръгва ...

HTML:

<!doctype html>
<html><head>
<meta charset="UTF-8" />
<title>demo</title>
<style type="text/css">body { background : #9fb74f !important; }</style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$( function() {
      var width, height, canvas, ctx, points, target, animateHeader = true;
    // Main
    initHeader();
    initAnimation();
    addListeners();
    function initHeader() {
        width = window.innerWidth;
        height = window.innerHeight;
        target = {
            x: width / 2,
            y: height / 3
        };
        canvas = document.getElementById( 'spiders' );
        canvas.width = width;
        canvas.height = height;
        ctx = canvas.getContext( '2d' );
        // create points
        points = [];
        for ( var x = 0; x < width; x = x + width / 20 ) {
            for ( var y = 0; y < height; y = y + height / 20 ) {
                var px = x + Math.random() * width / 20;
                var py = y + Math.random() * height / 20;
                var p = {
                    x: px,
                    originX: px,
                    y: py,
                    originY: py
                };
                points.push( p );
            }
        }
        // for each point find the 5 closest points
        for ( var i = 0; i < points.length; i++ ) {
            var closest = [];
            var p1 = points[ i ];
            for ( var j = 0; j < points.length; j++ ) {
                var p2 = points[ j ];
                if ( !( p1 == p2 ) ) {
                    var placed = false;
                    for ( var k = 0; k < 5; k++ ) {
                        if ( !placed ) {
                            if ( closest[ k ] == undefined ) {
                                closest[ k ] = p2;
                                placed = true;
                            }
                        }
                    }

                    for ( var k = 0; k < 5; k++ ) {
                        if ( !placed ) {
                            if ( getDistance( p1, p2 ) < getDistance( p1, closest[ k ] ) ) {
                                closest[ k ] = p2;
                                placed = true;
                            }
                        }
                    }
                }
            }
            p1.closest = closest;
        }
        // assign a circle to each point
        for ( var i in points ) {
            var c = new Circle( points[ i ], 2 + Math.random() * 2, 'rgba(255,255,255,0.3)' );
            points[ i ].circle = c;
        }
    }
    // Event handling
    function addListeners() {
        if ( !( 'ontouchstart' in window ) ) {
            window.addEventListener( 'mousemove', mouseMove );
        }
        window.addEventListener( 'scroll', scrollCheck );
        window.addEventListener( 'resize', resize );
    }
    function mouseMove( e ) {
        var posy = 0;
        var posx = posy;
        if ( e.pageX || e.pageY ) {
            posx = e.pageX;
            posy = e.pageY;
        } else if ( e.clientX || e.clientY ) {
            posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
            posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
        }
        target.x = posx;
        target.y = posy;
    }
    function scrollCheck() {
        if ( document.body.scrollTop > height ) animateHeader = false;
        else animateHeader = true;
    }
    function resize() {
        width = window.innerWidth;
        height = window.innerHeight;
        canvas.width = width;
        canvas.height = height;
    }
    // animation
    function initAnimation() {
        animate();
        for ( var i in points ) {
            shiftPoint( points[ i ] );
        }
    }
    function animate() {
        if ( animateHeader ) {
            ctx.clearRect( 0, 0, width, height );
            for ( var i in points ) {
                // detect points in range
                if ( Math.abs( getDistance( target, points[ i ] ) ) < 4000 ) {
                    points[ i ].active = 0.3;
                    points[ i ].circle.active = 0.6;
                } else if ( Math.abs( getDistance( target, points[ i ] ) ) < 20000 ) {
                    points[ i ].active = 0.1;
                    points[ i ].circle.active = 0.3;
                } else if ( Math.abs( getDistance( target, points[ i ] ) ) < 40000 ) {
                    points[ i ].active = 0.02;
                    points[ i ].circle.active = 0.1;
                } else {
                    points[ i ].active = 0;
                    points[ i ].circle.active = 0;
                }
                drawLines( points[ i ] );
                points[ i ].circle.draw();
            }
        }
        requestAnimationFrame( animate );
    }
    function shiftPoint( p ) {
        TweenLite.to( p, 1 + 1 * Math.random(), {
            x: p.originX - 50 + Math.random() * 100,
            y: p.originY - 50 + Math.random() * 100,
            onComplete: function() {
                shiftPoint( p );
            }
        } );
    }
    // Canvas manipulation
    function drawLines( p ) {
        if ( !p.active ) return;
        for ( var i in p.closest ) {
            ctx.beginPath();
            ctx.moveTo( p.x, p.y );
            ctx.lineTo( p.closest[ i ].x, p.closest[ i ].y );
            ctx.strokeStyle = 'rgba(255,255,255,' + p.active + ')';
            ctx.stroke();
        }
    }
    function Circle( pos, rad, color ) {
        var _this = this;
        // constructor
        ( function() {
            _this.pos = pos || null;
            _this.radius = rad || null;
            _this.color = color || null;
        } )();
        this.draw = function() {
            if ( !_this.active ) return;
            ctx.beginPath();
            ctx.arc( _this.pos.x, _this.pos.y, _this.radius, 0, 2 * Math.PI, false );
            ctx.fillStyle = 'rgba(255,255,255,' + _this.active + ')';
            ctx.fill();
        };
    }
    // Util
    function getDistance( p1, p2 ) {
        return Math.pow( p1.x - p2.x, 2 ) + Math.pow( p1.y - p2.y, 2 );
    }
} );
function wrap_visible_url(string, max) {
        if(string.length <= max)
            return string;
        dashPos = string.indexOf('-');
        if(dashPos > -1 && dashPos <= max)
            return string;
        slashPos = string.indexOf('/');
        if(slashPos > -1 && slashPos <=max )
            return string.substr(0,slashPos+1) + '<br>' + string.substr(slashPos+1,60);
        return string.substr(0, max-1) + '<br>' + string.substr(max-1,70);
}
});//]]>  
</script></head><body><canvas id="spiders" class="hidden-xs" width="837" height="689"></canvas></body></html>

anonimen · 20 Януари 2015

Като за начало не си си добавил jquery библиотеката

Всъщност дори тя не ти трябва - махни началните редове сложи целия код в
window.onload=function(){/*тук*/};

GOTI · 20 Януари 2015

anonimen каза:
Като за начало не си си добавил jquery библиотеката
Всъщност дори тя не ти трябва - махни началните редове сложи целия код в
window.onload=function(){/*тук*/};

И пак нищо не тръгва :lol:

Добре де нали по принцип като се копира кода 1 към едно би трябвало да работи, ... не намирам логика ..

SVTerziev · 1 Февруари 2015

С малко закъснение...
http://tympanus.net/codrops/2014/09/23/animated-background-headers/

JS скрипт

GOTI

Registered

vinsbg

Registered

GOTI

Registered

GOTI

Registered

anonimen

Super Moderator

GOTI

Registered

anonimen

Super Moderator

GOTI

Registered

SVTerziev

Registered