Are hovering effects possible behind moving mouse on big container box on page like on this website: https://launchx.com/ or like this effects given below:
https://codepen.io/soulwire/pen/Ffvlo
https://codepen.io/soulwire/pen/foktm
https://codepen.io/renatorib/pen/gBLDA
I think its possible with wix code, but I don’t know how to do it! If this is possible then it will give any website amazing effects! Please help me in doing this with wix code on website!
Thank You!
I tried it and I can use some of it like the page here:
https://www.wixshow.com/wix-code-sketch-particles
You can always take html pages with full code and insert as HTML compoents in Wix. Try the page.
Thanks! Tell me how to do it in html, it does not work over the text! Also please find way to do it in container box or any element we can edit!
I just created this complete code and pasted it in a HTML Component. It is easier to work with it in a local Code Editor first and when you are done just paste it back into Wix.
Thank You!
Just try to add it on page inside editor, if it works, Just Post.
Thank you so much Andreas Kviby for the code. I have made some changes to work it oo any width and height without scroll bar and with transparent background. Here is code and you can always change with different effects if you want:
<html>
<head>
<title>sketch.js » Basic Example</title>
<link rel="stylesheet" href="css/example.css">
<style type="text/css">
html, body {
width: 100%;
height: 100%;
margin: 0px;
}
</style>
</head>
<body>
<div id="container"></div>
<script>
/* Copyright (C) 2013 Justin Windle, http://soulwire.co.uk */
(function ( root, factory ) {
if ( typeof exports === 'object' ) {
// CommonJS like
module.exports = factory(root, root.document);
} else if ( typeof define === 'function' && define.amd ) {
// AMD
define( function() { return factory( root, root.document ); });
} else {
// Browser global
root.Sketch = factory( root, root.document );
}
}( typeof window !== "undefined" ? window : this, function ( window, document ) {
"use strict";
/*
----------------------------------------------------------------------
Config
----------------------------------------------------------------------
*/
var MATH_PROPS = 'E LN10 LN2 LOG2E LOG10E PI SQRT1_2 SQRT2 abs acos asin atan ceil cos exp floor log round sin sqrt tan atan2 pow max min'.split( ' ' );
var HAS_SKETCH = '__hasSketch';
var M = Math;
var CANVAS = 'canvas';
var WEBGL = 'webgl';
var DOM = 'dom';
var doc = document;
var win = window;
var instances = [];
var defaults = {
fullscreen: true,
autostart: true,
autoclear: true,
autopause: true,
container: doc.body,
interval: 1,
globals: true,
retina: false,
type: CANVAS
};
var keyMap = {
8: 'BACKSPACE',
9: 'TAB',
13: 'ENTER',
16: 'SHIFT',
27: 'ESCAPE',
32: 'SPACE',
37: 'LEFT',
38: 'UP',
39: 'RIGHT',
40: 'DOWN'
};
/*
----------------------------------------------------------------------
Utilities
----------------------------------------------------------------------
*/
function isArray( object ) {
return Object.prototype.toString.call( object ) == '[object Array]';
}
function isFunction( object ) {
return typeof object == 'function';
}
function isNumber( object ) {
return typeof object == 'number';
}
function isString( object ) {
return typeof object == 'string';
}
function keyName( code ) {
return keyMap[ code ] || String.fromCharCode( code );
}
function extend( target, source, overwrite ) {
for ( var key in source )
if ( overwrite || !( key in target ) )
target[ key ] = source[ key ];
return target;
}
function proxy( method, context ) {
return function() {
method.apply( context, arguments );
};
}
function clone( target ) {
var object = {};
for ( var key in target ) {
if ( key === 'webkitMovementX' || key === 'webkitMovementY' )
continue;
if ( isFunction( target[ key ] ) )
object[ key ] = proxy( target[ key ], target );
else
object[ key ] = target[ key ];
}
return object;
}
/*
----------------------------------------------------------------------
Constructor
----------------------------------------------------------------------
*/
function constructor( context ) {
var request, handler, target, parent, bounds, index, suffix, clock, node, copy, type, key, val, min, max, w, h;
var counter = 0;
var touches = [];
var resized = false;
var setup = false;
var ratio = win.devicePixelRatio || 1;
var isDiv = context.type == DOM;
var is2D = context.type == CANVAS;
var mouse = {
x: 0.0, y: 0.0,
ox: 0.0, oy: 0.0,
dx: 0.0, dy: 0.0
};
var eventMap = [
context.eventTarget || context.element,
pointer, 'mousedown', 'touchstart',
pointer, 'mousemove', 'touchmove',
pointer, 'mouseup', 'touchend',
pointer, 'click',
pointer, 'mouseout',
pointer, 'mouseover',
doc,
keypress, 'keydown', 'keyup',
win,
active, 'focus', 'blur',
resize, 'resize'
];
var keys = {}; for ( key in keyMap ) keys[ keyMap[ key ] ] = false;
function trigger( method ) {
if ( isFunction( method ) )
method.apply( context, [].splice.call( arguments, 1 ) );
}
function bind( on ) {
for ( index = 0; index < eventMap.length; index++ ) {
node = eventMap[ index ];
if ( isString( node ) )
target[ ( on ? 'add' : 'remove' ) + 'EventListener' ].call( target, node, handler, false );
else if ( isFunction( node ) )
handler = node;
else target = node;
}
}
function update() {
cAF( request );
request = rAF( update );
if ( !setup ) {
trigger( context.setup );
setup = isFunction( context.setup );
}
if ( !resized ) {
trigger( context.resize );
resized = isFunction( context.resize );
}
if ( context.running && !counter ) {
context.dt = ( clock = +new Date() ) - context.now;
context.millis += context.dt;
context.now = clock;
trigger( context.update );
// Pre draw
if ( is2D ) {
if ( context.retina ) {
context.save();
context.scale( ratio, ratio );
}
if ( context.autoclear )
context.clear();
}
// Draw
trigger( context.draw );
// Post draw
if ( is2D && context.retina )
context.restore();
}
counter = ++counter % context.interval;
}
function resize() {
target = isDiv ? context.style : context.canvas;
suffix = isDiv ? 'px' : '';
w = context.width;
h = context.height;
if ( context.fullscreen ) {
h = context.height = win.innerHeight;
w = context.width = win.innerWidth;
}
if ( context.retina && is2D && ratio ) {
target.style.height = h + 'px';
target.style.width = w + 'px';
w *= ratio;
h *= ratio;
}
if ( target.height !== h )
target.height = h + suffix;
if ( target.width !== w )
target.width = w + suffix;
if ( is2D && !context.autoclear )
context.scale( ratio, ratio );
if ( setup ) trigger( context.resize );
}
function align( touch, target ) {
bounds = target.getBoundingClientRect();
touch.x = touch.pageX - bounds.left - (win.scrollX || win.pageXOffset);
touch.y = touch.pageY - bounds.top - (win.scrollY || win.pageYOffset);
return touch;
}
function augment( touch, target ) {
align( touch, context.element );
target = target || {};
target.ox = target.x || touch.x;
target.oy = target.y || touch.y;
target.x = touch.x;
target.y = touch.y;
target.dx = target.x - target.ox;
target.dy = target.y - target.oy;
return target;
}
function process( event ) {
event.preventDefault();
copy = clone( event );
copy.originalEvent = event;
if ( copy.touches ) {
touches.length = copy.touches.length;
for ( index = 0; index < copy.touches.length; index++ )
touches[ index ] = augment( copy.touches[ index ], touches[ index ] );
} else {
touches.length = 0;
touches[0] = augment( copy, mouse );
}
extend( mouse, touches[0], true );
return copy;
}
function pointer( event ) {
event = process( event );
min = ( max = eventMap.indexOf( type = event.type ) ) - 1;
context.dragging =
/down|start/.test( type ) ? true :
/up|end/.test( type ) ? false :
context.dragging;
while( min )
isString( eventMap[ min ] ) ?
trigger( context[ eventMap[ min-- ] ], event ) :
isString( eventMap[ max ] ) ?
trigger( context[ eventMap[ max++ ] ], event ) :
min = 0;
}
function keypress( event ) {
key = event.keyCode;
val = event.type == 'keyup';
keys[ key ] = keys[ keyName( key ) ] = !val;
trigger( context[ event.type ], event );
}
function active( event ) {
if ( context.autopause )
( event.type == 'blur' ? stop : start )();
trigger( context[ event.type ], event );
}
// Public API
function start() {
context.now = +new Date();
context.running = true;
}
function stop() {
context.running = false;
}
function toggle() {
( context.running ? stop : start )();
}
function clear() {
if ( is2D )
context.clearRect( 0, 0, context.width * ratio, context.height * ratio );
}
function destroy() {
parent = context.element.parentNode;
index = instances.indexOf( context );
if ( parent ) parent.removeChild( context.element );
if ( ~index ) instances.splice( index, 1 );
bind( false );
stop();
}
extend( context, {
touches: touches,
mouse: mouse,
keys: keys,
dragging: false,
running: false,
millis: 0,
now: NaN,
dt: NaN,
destroy: destroy,
toggle: toggle,
clear: clear,
start: start,
stop: stop
});
instances.push( context );
return ( context.autostart && start(), bind( true ), resize(), update(), context );
}
/*
----------------------------------------------------------------------
Global API
----------------------------------------------------------------------
*/
var element, context, Sketch = {
CANVAS: CANVAS,
WEB_GL: WEBGL,
WEBGL: WEBGL,
DOM: DOM,
instances: instances,
install: function( context ) {
if ( !context[ HAS_SKETCH ] ) {
for ( var i = 0; i < MATH_PROPS.length; i++ )
context[ MATH_PROPS[i] ] = M[ MATH_PROPS[i] ];
extend( context, {
TWO_PI: M.PI * 2,
HALF_PI: M.PI / 2,
QUARTER_PI: M.PI / 4,
random: function( min, max ) {
if ( isArray( min ) )
return min[ ~~( M.random() * min.length ) ];
if ( !isNumber( max ) )
max = min || 1, min = 0;
return min + M.random() * ( max - min );
},
lerp: function( min, max, amount ) {
return min + amount * ( max - min );
},
map: function( num, minA, maxA, minB, maxB ) {
return ( num - minA ) / ( maxA - minA ) * ( maxB - minB ) + minB;
}
});
context[ HAS_SKETCH ] = true;
}
},
create: function( options ) {
options = extend( options || {}, defaults );
if ( options.globals ) Sketch.install( self );
element = options.element = options.element || doc.createElement( options.type === DOM ? 'div' : 'canvas' );
context = options.context = options.context || (function() {
switch( options.type ) {
case CANVAS:
return element.getContext( '2d', options );
case WEBGL:
return element.getContext( 'webgl', options ) || element.getContext( 'experimental-webgl', options );
case DOM:
return element.canvas = element;
}
})();
( options.container || doc.body ).appendChild( element );
return Sketch.augment( context, options );
},
augment: function( context, options ) {
options = extend( options || {}, defaults );
options.element = context.canvas || context;
options.element.className += ' sketch';
extend( context, options, true );
return constructor( context );
}
};
/*
----------------------------------------------------------------------
Shims
----------------------------------------------------------------------
*/
var vendors = [ 'ms', 'moz', 'webkit', 'o' ];
var scope = self;
var then = 0;
var a = 'AnimationFrame';
var b = 'request' + a;
var c = 'cancel' + a;
var rAF = scope[ b ];
var cAF = scope[ c ];
for ( var i = 0; i < vendors.length && !rAF; i++ ) {
rAF = scope[ vendors[ i ] + 'Request' + a ];
cAF = scope[ vendors[ i ] + 'Cancel' + a ];
}
scope[ b ] = rAF = rAF || function( callback ) {
var now = +new Date();
var dt = M.max( 0, 16 - ( now - then ) );
var id = setTimeout( function() {
callback( now + dt );
}, dt );
then = now + dt;
return id;
};
scope[ c ] = cAF = cAF || function( id ) {
clearTimeout( id );
};
/*
----------------------------------------------------------------------
Output
----------------------------------------------------------------------
*/
return Sketch;
}));
</script>
<script>
// ----------------------------------------
// Particle
// ----------------------------------------
function Particle( x, y, radius ) {
this.init( x, y, radius );
}
Particle.prototype = {
init: function( x, y, radius ) {
this.alive = true;
this.radius = radius || 10;
this.wander = 0.15;
this.theta = random( TWO_PI );
this.drag = 0.92;
this.color = '#fff';
this.x = x || 0.0;
this.y = y || 0.0;
this.vx = 0.0;
this.vy = 0.0;
},
move: function() {
this.x += this.vx;
this.y += this.vy;
this.vx *= this.drag;
this.vy *= this.drag;
this.theta += random( -0.5, 0.5 ) * this.wander;
this.vx += sin( this.theta ) * 0.1;
this.vy += cos( this.theta ) * 0.1;
this.radius *= 0.96;
this.alive = this.radius > 0.5;
},
draw: function( ctx ) {
ctx.beginPath();
ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
ctx.fillStyle = this.color;
ctx.fill();
}
};
// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
var COLOURS = [ '#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423' ];
var particles = [];
var pool = [];
var demo = Sketch.create({
container: document.getElementById( 'container' ),
retina: 'auto'
});
demo.setup = function() {
// Set off some initial particles.
var i, x, y;
for ( i = 0; i < 20; i++ ) {
x = ( demo.width * 0.5 ) + random( -100, 100 );
y = ( demo.height * 0.5 ) + random( -100, 100 );
demo.spawn( x, y );
}
};
demo.spawn = function( x, y ) {
var particle, theta, force;
if ( particles.length >= MAX_PARTICLES )
pool.push( particles.shift() );
particle = pool.length ? pool.pop() : new Particle();
particle.init( x, y, random( 5, 40 ) );
particle.wander = random( 0.5, 2.0 );
particle.color = random( COLOURS );
particle.drag = random( 0.9, 0.99 );
theta = random( TWO_PI );
force = random( 2, 8 );
particle.vx = sin( theta ) * force;
particle.vy = cos( theta ) * force;
particles.push( particle );
};
demo.update = function() {
var i, particle;
for ( i = particles.length - 1; i >= 0; i-- ) {
particle = particles[i];
if ( particle.alive ) particle.move();
else pool.push( particles.splice( i, 1 )[0] );
}
};
demo.draw = function() {
demo.globalCompositeOperation = 'lighter';
for ( var i = particles.length - 1; i >= 0; i-- ) {
particles[i].draw( demo );
}
};
demo.mousemove = function() {
var particle, theta, force, touch, max, i, j, n;
for ( i = 0, n = demo.touches.length; i < n; i++ ) {
touch = demo.touches[i], max = random( 1, 4 );
for ( j = 0; j < max; j++ ) {
demo.spawn( touch.x, touch.y );
}
}
};
</script>
</body>
</html>
Hello, I tried to copy your HTML but it seems that is broken. I am getting Unexpected Error / Token to the
you can check it here: www.imperialnews.com/home
it is same
I have to copy ALL this thing?
yes!