Related
I have added the code snippet over here. I was trying to do some random exercise. Can someone look why my textbox is not editable. There is falling leaf animation over here. Along with I have added one textbox on top of it. But currently I am not able to add any text to the textbox.
I am just adding more text in order to overcome the error message that the post is mostly having code and not much explanation.
var LeafScene = function(el) {
this.viewport = el;
this.world = document.createElement('div');
this.leaves = [];
this.options = {
numLeaves: 20,
wind: {
magnitude: 1.2,
maxSpeed: 12,
duration: 300,
start: 0,
speed: 0
},
};
this.width = this.viewport.offsetWidth;
this.height = this.viewport.offsetHeight;
// animation helper
this.timer = 0;
this._resetLeaf = function(leaf) {
// place leaf towards the top left
leaf.x = this.width * 2 - Math.random()*this.width*1.75;
leaf.y = -10;
leaf.z = Math.random()*200;
if (leaf.x > this.width) {
leaf.x = this.width + 10;
leaf.y = Math.random()*this.height/2;
}
// at the start, the leaf can be anywhere
if (this.timer == 0) {
leaf.y = Math.random()*this.height;
}
// Choose axis of rotation.
// If axis is not X, chose a random static x-rotation for greater variability
leaf.rotation.speed = Math.random()*10;
var randomAxis = Math.random();
if (randomAxis > 0.5) {
leaf.rotation.axis = 'X';
} else if (randomAxis > 0.25) {
leaf.rotation.axis = 'Y';
leaf.rotation.x = Math.random()*180 + 90;
} else {
leaf.rotation.axis = 'Z';
leaf.rotation.x = Math.random()*360 - 180;
// looks weird if the rotation is too fast around this axis
leaf.rotation.speed = Math.random()*3;
}
// random speed
leaf.xSpeedVariation = Math.random() * 0.8 - 0.4;
leaf.ySpeed = Math.random() + 1.5;
return leaf;
}
this._updateLeaf = function(leaf) {
var leafWindSpeed = this.options.wind.speed(this.timer - this.options.wind.start, leaf.y);
var xSpeed = leafWindSpeed + leaf.xSpeedVariation;
leaf.x -= xSpeed;
leaf.y += leaf.ySpeed;
leaf.rotation.value += leaf.rotation.speed;
var t = 'translateX( ' + leaf.x + 'px ) translateY( ' + leaf.y + 'px ) translateZ( ' + leaf.z + 'px ) rotate' + leaf.rotation.axis + '( ' + leaf.rotation.value + 'deg )';
if (leaf.rotation.axis !== 'X') {
t += ' rotateX(' + leaf.rotation.x + 'deg)';
}
leaf.el.style.webkitTransform = t;
leaf.el.style.MozTransform = t;
leaf.el.style.oTransform = t;
leaf.el.style.transform = t;
// reset if out of view
if (leaf.x < -10 || leaf.y > this.height + 10) {
this._resetLeaf(leaf);
}
}
this._updateWind = function() {
// wind follows a sine curve: asin(b*time + c) + a
// where a = wind magnitude as a function of leaf position, b = wind.duration, c = offset
// wind duration should be related to wind magnitude, e.g. higher windspeed means longer gust duration
if (this.timer === 0 || this.timer > (this.options.wind.start + this.options.wind.duration)) {
this.options.wind.magnitude = Math.random() * this.options.wind.maxSpeed;
this.options.wind.duration = this.options.wind.magnitude * 50 + (Math.random() * 20 - 10);
this.options.wind.start = this.timer;
var screenHeight = this.height;
this.options.wind.speed = function(t, y) {
// should go from full wind speed at the top, to 1/2 speed at the bottom, using leaf Y
var a = this.magnitude/2 * (screenHeight - 2*y/3)/screenHeight;
return a * Math.sin(2*Math.PI/this.duration * t + (3 * Math.PI/2)) + a;
}
}
}
}
LeafScene.prototype.init = function() {
for (var i = 0; i < this.options.numLeaves; i++) {
var leaf = {
el: document.createElement('div'),
x: 0,
y: 0,
z: 0,
rotation: {
axis: 'X',
value: 0,
speed: 0,
x: 0
},
xSpeedVariation: 0,
ySpeed: 0,
path: {
type: 1,
start: 0,
},
image: 1
};
this._resetLeaf(leaf);
this.leaves.push(leaf);
this.world.appendChild(leaf.el);
}
this.world.className = 'leaf-scene';
this.viewport.appendChild(this.world);
// set perspective
this.world.style.webkitPerspective = "400px";
this.world.style.MozPerspective = "400px";
this.world.style.oPerspective = "400px";
this.world.style.perspective = "400px";
// reset window height/width on resize
var self = this;
window.onresize = function(event) {
self.width = self.viewport.offsetWidth;
self.height = self.viewport.offsetHeight;
};
}
LeafScene.prototype.render = function() {
this._updateWind();
for (var i = 0; i < this.leaves.length; i++) {
this._updateLeaf(this.leaves[i]);
}
this.timer++;
requestAnimationFrame(this.render.bind(this));
}
// start up leaf scene
var leafContainer = document.querySelector('.falling-leaves'),
leaves = new LeafScene(leafContainer);
leaves.init();
leaves.render();
body, html {
height: 100%;
}
form {
width: 600px;
margin: 0px auto;
padding: 15px;
}
input[type=text] {
display: block;
padding: 10px;
box-sizing: border-box;
font-size: x-large;
margin-top: 25%;
}
input[type=text] {
width: 100%;
margin-bottom: 15px;
}
.falling-leaves {
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 100%;
max-width: 880px;
max-height: 880px; /* image is only 880x880 */
transform: translate(-50%, 0);
border: 20px solid #fff;
border-radius: 50px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/125707/sidebar-bg.png) no-repeat center center;
background-size: cover;
overflow: hidden;
}
.leaf-scene {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 100%;
transform-style: preserve-3d;
}
.leaf-scene div {
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/125707/leaf.svg) no-repeat;
background-size: 100%;
transform-style: preserve-3d;
backface-visibility: visible;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="style/style.css">
</head>
<body>
<div class="falling-leaves">
<form id="frmContact">
<input type="text" id="txtName" name="txtName" placeholder="Text goes here">
</form>
</div>
<script src="script/script.js"></script>
</body>
</html>
I am struggling to figure out and determine how to zoom on my mouse position based on this example. (https://stackblitz.com/edit/js-fxnmkm?file=index.js)
let node,
scale = 1,
posX = 0,
posY = 0,
node = document.querySelector('.frame');
const render = () => {
window.requestAnimationFrame(() => {
let val = `translate3D(${posX}px, ${posY}px, 0px) scale(${scale})`
node.style.transform = val
})
}
window.addEventListener('wheel', (e) => {
e.preventDefault();
// Zooming happens here
if (e.ctrlKey) {
scale -= e.deltaY * 0.01;
} else {
posX -= e.deltaX * 2;
posY -= e.deltaY * 2;
}
render();
});
My desired effect is based on this example (https://codepen.io/techslides/pen/zowLd?editors=0010) when zooming in. Currently my example above only scales to the center of the "viewport" but I want it to be where my cursor currently is.
I have searched high and low for a solution that is not implemented via canvas. Any help would be appreciated!
Caveat The reason why I am using the wheel event is to mimic the interaction of Figma (the design tool) panning and zooming.
Use the canvas for zoomable content
Zooming and panning elements is very problematic. It can be done but the list of issues is very long. I would never implement such an interface.
Consider using the canvas, via 2D or WebGL to display such content to save your self many many problems.
The first part of the answer is implemented using the canvas. The same interface view is used in the second example that pans and zooms an element.
A simple 2D view.
As you are only panning and zooming then a very simple method can be used.
The example below implements an object called view. This holds the current scale and position (pan)
It provides two function for user interaction.
Panning the function view.pan(amount) will pan the view by distance in pixels held by amount.x, amount.y
Zooming the function view.scaleAt(at, amount) will scale (zoom in out) the view by amount (a number representing change in scale), at the position held by at.x, at.y in pixels.
In the example the view is applied to the canvas rendering context using view.apply() and a set of random boxes are rendered whenever the view changes.
The panning and zooming is via mouse events
Example using canvas 2D context
Use mouse button drag to pan, wheel to zoom
const ctx = canvas.getContext("2d");
canvas.width = 500;
canvas.height = 500;
const rand = (m = 255, M = m + (m = 0)) => (Math.random() * (M - m) + m) | 0;
const objects = [];
for (let i = 0; i < 100; i++) {
objects.push({x: rand(canvas.width), y: rand(canvas.height),w: rand(40),h: rand(40), col: `rgb(${rand()},${rand()},${rand()})`});
}
requestAnimationFrame(drawCanvas);
const view = (() => {
const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
var m = matrix; // alias
var scale = 1; // current scale
var ctx; // reference to the 2D context
const pos = { x: 0, y: 0 }; // current position of origin
var dirty = true;
const API = {
set context(_ctx) { ctx = _ctx; dirty = true },
apply() {
if (dirty) { this.update() }
ctx.setTransform(m[0], m[1], m[2], m[3], m[4], m[5])
},
get scale() { return scale },
get position() { return pos },
isDirty() { return dirty },
update() {
dirty = false;
m[3] = m[0] = scale;
m[2] = m[1] = 0;
m[4] = pos.x;
m[5] = pos.y;
},
pan(amount) {
if (dirty) { this.update() }
pos.x += amount.x;
pos.y += amount.y;
dirty = true;
},
scaleAt(at, amount) { // at in screen coords
if (dirty) { this.update() }
scale *= amount;
pos.x = at.x - (at.x - pos.x) * amount;
pos.y = at.y - (at.y - pos.y) * amount;
dirty = true;
},
};
return API;
})();
view.context = ctx;
function drawCanvas() {
if (view.isDirty()) {
ctx.setTransform(1, 0, 0, 1, 0, 0);
ctx.clearRect(0, 0, canvas.width, canvas.height);
view.apply(); // set the 2D context transform to the view
for (i = 0; i < objects.length; i++) {
var obj = objects[i];
ctx.fillStyle = obj.col;
ctx.fillRect(obj.x, obj.y, obj.h, obj.h);
}
}
requestAnimationFrame(drawCanvas);
}
canvas.addEventListener("mousemove", mouseEvent, {passive: true});
canvas.addEventListener("mousedown", mouseEvent, {passive: true});
canvas.addEventListener("mouseup", mouseEvent, {passive: true});
canvas.addEventListener("mouseout", mouseEvent, {passive: true});
canvas.addEventListener("wheel", mouseWheelEvent, {passive: false});
const mouse = {x: 0, y: 0, oldX: 0, oldY: 0, button: false};
function mouseEvent(event) {
if (event.type === "mousedown") { mouse.button = true }
if (event.type === "mouseup" || event.type === "mouseout") { mouse.button = false }
mouse.oldX = mouse.x;
mouse.oldY = mouse.y;
mouse.x = event.offsetX;
mouse.y = event.offsetY
if(mouse.button) { // pan
view.pan({x: mouse.x - mouse.oldX, y: mouse.y - mouse.oldY});
}
}
function mouseWheelEvent(event) {
var x = event.offsetX;
var y = event.offsetY;
if (event.deltaY < 0) { view.scaleAt({x, y}, 1.1) }
else { view.scaleAt({x, y}, 1 / 1.1) }
event.preventDefault();
}
body {
background: gainsboro;
margin: 0;
}
canvas {
background: white;
box-shadow: 1px 1px 1px rgba(0, 0, 0, .2);
}
<canvas id="canvas"></canvas>
Example using element.style.transform
This example uses the element style transform property to zoom and pan.
Note that I use a 2D matrix rather than the 3d matrix as that can introduce many problems not compatible with the simple zoom and pan used below.
Note that CSS transforms are not applied to the top left of the element in all cases. In the example below the origin is in the center of the element. Thus when zooming the zoom at point must be adjusted by subtracting half the elements size. The element size is not effected by the transform.
Note borders, padding, and margins will also change the location of the origin. To work with view.scaleAt(at, amount) at must be relative to the top left most pixel of the element
Note there are many more problems and caveats you need to consider when you zoom and pan elements, too many to fit in a single answer. That is why this answer starts with a canvas example as it is by far the safer method to managing zoom-able visual content.
Use mouse button drag to pan, wheel to zoom. If you lose your position (zoom too far in out or panned of the page restart the snippet)
const view = (() => {
const matrix = [1, 0, 0, 1, 0, 0]; // current view transform
var m = matrix; // alias
var scale = 1; // current scale
const pos = { x: 0, y: 0 }; // current position of origin
var dirty = true;
const API = {
applyTo(el) {
if (dirty) { this.update() }
el.style.transform = `matrix(${m[0]},${m[1]},${m[2]},${m[3]},${m[4]},${m[5]})`;
},
update() {
dirty = false;
m[3] = m[0] = scale;
m[2] = m[1] = 0;
m[4] = pos.x;
m[5] = pos.y;
},
pan(amount) {
if (dirty) { this.update() }
pos.x += amount.x;
pos.y += amount.y;
dirty = true;
},
scaleAt(at, amount) { // at in screen coords
if (dirty) { this.update() }
scale *= amount;
pos.x = at.x - (at.x - pos.x) * amount;
pos.y = at.y - (at.y - pos.y) * amount;
dirty = true;
},
};
return API;
})();
document.addEventListener("mousemove", mouseEvent, {passive: false});
document.addEventListener("mousedown", mouseEvent, {passive: false});
document.addEventListener("mouseup", mouseEvent, {passive: false});
document.addEventListener("mouseout", mouseEvent, {passive: false});
document.addEventListener("wheel", mouseWheelEvent, {passive: false});
const mouse = {x: 0, y: 0, oldX: 0, oldY: 0, button: false};
function mouseEvent(event) {
if (event.type === "mousedown") { mouse.button = true }
if (event.type === "mouseup" || event.type === "mouseout") { mouse.button = false }
mouse.oldX = mouse.x;
mouse.oldY = mouse.y;
mouse.x = event.pageX;
mouse.y = event.pageY;
if(mouse.button) { // pan
view.pan({x: mouse.x - mouse.oldX, y: mouse.y - mouse.oldY});
view.applyTo(zoomMe);
}
event.preventDefault();
}
function mouseWheelEvent(event) {
const x = event.pageX - (zoomMe.width / 2);
const y = event.pageY - (zoomMe.height / 2);
if (event.deltaY < 0) {
view.scaleAt({x, y}, 1.1);
view.applyTo(zoomMe);
} else {
view.scaleAt({x, y}, 1 / 1.1);
view.applyTo(zoomMe);
}
event.preventDefault();
}
body {
user-select: none;
-moz-user-select: none;
}
.zoomables {
pointer-events: none;
border: 1px solid black;
}
#zoomMe {
position: absolute;
top: 0px;
left: 0px;
}
<img id="zoomMe" class="zoomables" src="https://i.stack.imgur.com/C7qq2.png?s=328&g=1">
This zoom in the 2nd link is a bit extreme so I tried to add some constraints. You can uncomment them and play more. For now looks and works exactly the same IMHO.
const container = document.querySelector('.container');
const image = document.querySelector('.image');
const speed = 0.5;
let size = {
w: image.offsetWidth,
h: image.offsetHeight
};
let pos = { x: 0, y: 0 };
let target = { x: 0, y: 0 };
let pointer = { x: 0, y: 0 };
let scale = 1;
window.addEventListener('wheel', event => {
event.preventDefault();
pointer.x = event.pageX - container.offsetLeft;
pointer.y = event.pageY - container.offsetTop;
target.x = (pointer.x - pos.x) / scale;
target.y = (pointer.y - pos.y) / scale;
scale += -1 * Math.max(-1, Math.min(1, event.deltaY)) * speed * scale;
// Uncomment to constrain scale
// const max_scale = 4;
// const min_scale = 1;
// scale = Math.max(min_scale, Math.min(max_scale, scale));
pos.x = -target.x * scale + pointer.x;
pos.y = -target.y * scale + pointer.y;
// Uncomment for keeping the image within area (works with min scale = 1)
// if (pos.x > 0) pos.x = 0;
// if (pos.x + size.w * scale < size.w) pos.x = -size.w * (scale - 1);
// if (pos.y > 0) pos.y = 0;
// if (pos.y + size.h * scale < size.h) pos.y = -size.h * (scale - 1);
image.style.transform = `translate(${pos.x}px,${pos.y}px) scale(${scale},${scale})`;
}, { passive: false });
.container {
width: 400px;
height: 400px;
overflow: hidden;
outline: 1px solid gray;
}
.image {
width: 100%;
height: 100%;
transition: transform .3s;
transform-origin: 0 0;
}
img {
width: auto;
height: auto;
max-width: 100%;
}
<div class="container">
<div class="image">
<img src="https://picsum.photos/400/400" />
</div>
</div>
Here's my version, support pan and zoom (hold CTRL key).
let editor = document.getElementById("editor");
let editorCanvas = editor.querySelector(".canvas");
let scale = 1.0;
const minScale = 0.1;
const maxScale = 8;
const scaleStep = 0.003;
let ctrlDown = false;
let dragging = false;
let dragStartX = 0;
let dragStartY = 0;
let previousScrollLeft = 0;
let previousScrollTop = 0;
window.addEventListener("keydown", (e) => {
if (e.ctrlKey) {
ctrlDown = true;
editorCanvas.style.cursor = "move";
}
});
window.addEventListener("keyup", (e) => {
ctrlDown = false;
editorCanvas.style.cursor = "default";
});
editor.addEventListener("mousedown", (e) => {
dragging = true;
dragStartX = e.x - editor.offsetLeft;
dragStartY = e.y - editor.offsetTop;
previousScrollLeft = editor.scrollLeft;
previousScrollTop = editor.scrollTop;
});
editor.addEventListener("mouseup", (e) => {
dragging = false;
});
editor.addEventListener("mousemove", (e) => {
if (ctrlDown && dragging) {
requestAnimationFrame(() => {
let currentX = e.x - editor.offsetLeft;
let currentY = e.y - editor.offsetTop;
let scrollX = previousScrollLeft + (dragStartX - currentX)
let scrollY = previousScrollTop + (dragStartY - currentY);
editor.scroll(scrollX, scrollY);
});
}
});
editor.addEventListener("wheel", (e) => {
e.preventDefault();
requestAnimationFrame(() => {
if (e.ctrlKey) {
scale -= e.deltaY * scaleStep;
if (scale < minScale) {
scale = minScale;
}
if (scale > maxScale) {
scale = maxScale;
}
if (scale < 1) {
editorCanvas.style.transformOrigin = "50% 50% 0";
} else {
editorCanvas.style.transformOrigin = "0 0 0";
}
editorCanvas.style.transform = `matrix(${scale}, 0, 0, ${scale}, 0, 0)`;
let rect = editorCanvas.getBoundingClientRect();
let ew = rect.width;
let eh = rect.height;
let mx = e.x - editor.offsetLeft;
let my = e.y - editor.offsetTop;
editor.scroll((ew - editor.offsetWidth) * (mx / editor.clientWidth), (eh - editor.offsetHeight) * (my / editor.clientHeight));
} else {
editor.scrollTop += e.deltaY;
editor.scrollLeft += e.deltaX;
}
});
}, { passive: false });
body {
background-color: lightgray;
}
#editor {
position: relative;
width: 1024px;
height: 768px;
box-sizing: border-box;
border: 1px solid darkgray;
background-color: gray;
overflow: auto;
}
.canvas {
position: relative;
width: 100%;
height: 100%;
background-color: white;
}
.frame {
position: absolute;
box-sizing: border-box;
border: 1px solid darkslategrey;
transition: all 0.25s;
}
.frame.one {
top: 80px;
left: 400px;
width: 300px;
height: 250px;
background-color: pink;
}
.frame.two {
top: 350px;
left: 150px;
width: 200px;
height: 150px;
background-color: gold;
}
.frame.three {
top: 130px;
left: 70px;
width: 100px;
height: 150px;
background-color: cyan;
}
.frame.four {
top: 368px;
left: 496px;
width: 32px;
height: 32px;
background-color: lime;
}
.frame:hover {
cursor: pointer;
border: 3px solid darkslategrey;
}
.frame:active {
filter: invert();
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Zoom Editor</title>
</head>
<body>
<div id="editor">
<div class="canvas">
<div class="frame one"></div>
<div class="frame two"></div>
<div class="frame three"></div>
<div class="frame four"></div>
</div>
</div>
</body>
</html>
I think you need to use an external jquery plugin to achieve this:
js file :
https://ariutta.github.io/svg-pan-zoom/dist/svg-pan-zoom.js
working demo :
https://ariutta.github.io/svg-pan-zoom/
for more clarification please visit:
https://github.com/ariutta/svg-pan-zoom
Essentially i found this button that i wanted to add to my wixsite that links to a store. I have gotten the button animation to work and this button exists as a html element on wix. But all the button does currently is do the animation and dosent link. Could someone edit this code so after the animation plays the user will be redirected to a certain link.
I've tried looking up link code and inserting it in logical places to determine where it might work but obviously i dident find anything. And even if it did it likely would have redirected before the animation finished.
Here is the code without any of my attempts to try and fix this problem.
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Math.randMinMax = function (min, max, round) {
var val = min + (Math.random() * (max - min));
if (round) val = Math.round(val);
return val;
};
Math.TO_RAD = Math.PI / 180;
Math.getAngle = function (x1, y1, x2, y2) {
var dx = x1 - x2,
dy = y1 - y2;
return Math.atan2(dy, dx);
};
Math.getDistance = function (x1, y1, x2, y2) {
var xs = x2 - x1,
ys = y2 - y1;
xs *= xs;
ys *= ys;
return Math.sqrt(xs + ys);
};
var FX = {};
(function () {
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
lastUpdate = new Date(),
mouseUpdate = new Date(),
lastMouse = [],
width, height;
FX.particles = [];
setFullscreen();
document.getElementById('button').addEventListener('mousedown', buttonEffect);
function buttonEffect() {
var button = document.getElementById('button'),
height = button.offsetHeight,
left = button.offsetLeft,
top = button.offsetTop,
width = button.offsetWidth,
x, y, degree;
for (var i = 0; i < 40; i = i + 1) {
if (Math.random() < 0.5) {
y = Math.randMinMax(top, top + height);
if (Math.random() < 0.5) {
x = left;
degree = Math.randMinMax(-45, 45);
} else {
x = left + width;
degree = Math.randMinMax(135, 225);
}
} else {
x = Math.randMinMax(left, left + width);
if (Math.random() < 0.5) {
y = top;
degree = Math.randMinMax(45, 135);
} else {
y = top + height;
degree = Math.randMinMax(-135, -45);
}
}
createParticle({
x: x,
y: y,
degree: degree,
speed: Math.randMinMax(100, 150),
vs: Math.randMinMax(-4, -1)
});
}
}
window.setTimeout(buttonEffect, 100);
loop();
window.addEventListener('resize', setFullscreen);
function createParticle(args) {
var options = {
x: width / 2,
y: height / 2,
color: 'hsla(' + Math.randMinMax(160, 290) + ', 100%, 50%, ' + (Math.random().toFixed(2)) + ')',
degree: Math.randMinMax(0, 360),
speed: Math.randMinMax(300, 350),
vd: Math.randMinMax(-90, 90),
vs: Math.randMinMax(-8, -5)
};
for (key in args) {
options[key] = args[key];
}
FX.particles.push(options);
}
function loop() {
var thisUpdate = new Date(),
delta = (lastUpdate - thisUpdate) / 1000,
amount = FX.particles.length,
size = 2,
i = 0,
p;
ctx.fillStyle = 'rgba(15,15,15,0.25)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeStyle = 'lighter';
for (; i < amount; i = i + 1) {
p = FX.particles[i];
p.degree += (p.vd * delta);
p.speed += (p.vs);// * delta);
if (p.speed < 0) continue;
p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.degree * Math.TO_RAD);
ctx.fillStyle = p.color;
ctx.fillRect(-size, -size, size * 2, size * 2);
ctx.restore();
}
lastUpdate = thisUpdate;
requestAnimFrame(loop);
}
function setFullscreen() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
};
})();
body {
margin: 0;
overflow: hidden;
}
#myCanvas {
display: block;
}
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 1.5em;
text-transform: uppercase;
padding: 7px 20px;
left: 50%;
width: 200px;
margin-left: -100px;
top: 50%;
border-radius: 10px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: hsla(260, 100%, 50%, 1);
cursor: pointer;
outline: 0 !important;
animation: pulse 1s infinite alternate;
transition: background 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
background: hsla(220, 100%, 60%, 1);
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
#keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="button">Donate</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
So again the expected result is to play the animation for the button then redirect to another page and the current result is the button simply playing the animation when clicked. If anyone could please write this code it would be super helpful.
Try changing your button to a href link. You may have to add some extra styling to the id class, but this should work.
<a id="button" href="https://www.linktosite.com">Link Button</a>
Put this on the button html tag onclick="location.href='http://www.link.com'"
You should add an activity when click on button. For example:
<button id="button" onclick="window.location.href = 'https://www.google.com';">Donate</button>
Demo:
window.requestAnimFrame = (function () {
return window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (callback) {
window.setTimeout(callback, 1000 / 60);
};
})();
Math.randMinMax = function (min, max, round) {
var val = min + (Math.random() * (max - min));
if (round) val = Math.round(val);
return val;
};
Math.TO_RAD = Math.PI / 180;
Math.getAngle = function (x1, y1, x2, y2) {
var dx = x1 - x2,
dy = y1 - y2;
return Math.atan2(dy, dx);
};
Math.getDistance = function (x1, y1, x2, y2) {
var xs = x2 - x1,
ys = y2 - y1;
xs *= xs;
ys *= ys;
return Math.sqrt(xs + ys);
};
var FX = {};
(function () {
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
lastUpdate = new Date(),
mouseUpdate = new Date(),
lastMouse = [],
width, height;
FX.particles = [];
setFullscreen();
document.getElementById('button').addEventListener('mousedown', buttonEffect);
function buttonEffect() {
var button = document.getElementById('button'),
height = button.offsetHeight,
left = button.offsetLeft,
top = button.offsetTop,
width = button.offsetWidth,
x, y, degree;
for (var i = 0; i < 40; i = i + 1) {
if (Math.random() < 0.5) {
y = Math.randMinMax(top, top + height);
if (Math.random() < 0.5) {
x = left;
degree = Math.randMinMax(-45, 45);
} else {
x = left + width;
degree = Math.randMinMax(135, 225);
}
} else {
x = Math.randMinMax(left, left + width);
if (Math.random() < 0.5) {
y = top;
degree = Math.randMinMax(45, 135);
} else {
y = top + height;
degree = Math.randMinMax(-135, -45);
}
}
createParticle({
x: x,
y: y,
degree: degree,
speed: Math.randMinMax(100, 150),
vs: Math.randMinMax(-4, -1)
});
}
}
window.setTimeout(buttonEffect, 100);
loop();
window.addEventListener('resize', setFullscreen);
function createParticle(args) {
var options = {
x: width / 2,
y: height / 2,
color: 'hsla(' + Math.randMinMax(160, 290) + ', 100%, 50%, ' + (Math.random().toFixed(2)) + ')',
degree: Math.randMinMax(0, 360),
speed: Math.randMinMax(300, 350),
vd: Math.randMinMax(-90, 90),
vs: Math.randMinMax(-8, -5)
};
for (key in args) {
options[key] = args[key];
}
FX.particles.push(options);
}
function loop() {
var thisUpdate = new Date(),
delta = (lastUpdate - thisUpdate) / 1000,
amount = FX.particles.length,
size = 2,
i = 0,
p;
ctx.fillStyle = 'rgba(15,15,15,0.25)';
ctx.fillRect(0, 0, width, height);
ctx.globalCompositeStyle = 'lighter';
for (; i < amount; i = i + 1) {
p = FX.particles[i];
p.degree += (p.vd * delta);
p.speed += (p.vs);// * delta);
if (p.speed < 0) continue;
p.x += Math.cos(p.degree * Math.TO_RAD) * (p.speed * delta);
p.y += Math.sin(p.degree * Math.TO_RAD) * (p.speed * delta);
ctx.save();
ctx.translate(p.x, p.y);
ctx.rotate(p.degree * Math.TO_RAD);
ctx.fillStyle = p.color;
ctx.fillRect(-size, -size, size * 2, size * 2);
ctx.restore();
}
lastUpdate = thisUpdate;
requestAnimFrame(loop);
}
function setFullscreen() {
width = canvas.width = window.innerWidth;
height = canvas.height = window.innerHeight;
};
})();
body {
margin: 0;
overflow: hidden;
}
#myCanvas {
display: block;
}
#button {
font-family: "Gill Sans", "Gill Sans MT", Calibri, sans-serif;
position: absolute;
font-size: 1.5em;
text-transform: uppercase;
padding: 7px 20px;
left: 50%;
width: 200px;
margin-left: -100px;
top: 50%;
border-radius: 10px;
color: white;
text-shadow: -1px -1px 1px rgba(0,0,0,0.8);
border: 5px solid transparent;
border-bottom-color: rgba(0,0,0,0.35);
background: hsla(260, 100%, 50%, 1);
cursor: pointer;
outline: 0 !important;
animation: pulse 1s infinite alternate;
transition: background 0.4s, border 0.2s, margin 0.2s;
}
#button:hover {
background: hsla(220, 100%, 60%, 1);
margin-top: -1px;
animation: none;
}
#button:active {
border-bottom-width: 0;
margin-top: 5px;
}
#keyframes pulse {
0% {
margin-top: 0px;
}
100% {
margin-top: 6px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<button id="button" onclick="window.location.href = 'https://www.google.com';">Donate</button>
<canvas id="myCanvas" width="500" height="500"></canvas>
</body>
</html>
I'm trying to get this player character to point towards the mouse pointer, but it doesn't move at all. I have no idea where to start, can somebody please help me?
Here is the full code:
The part which I need help with is in the updatevalues() function in the player object (javascript)
var canvas = document.getElementById("tanks-canvas");
var game = canvas.getContext("2d");
canvas.height = screen.height / 1.175;
canvas.width = screen.width / 1.05;
game.translate(canvas.width / 2, canvas.height / 2);
clear();
txt(0, 0, "Loading...", "100px georgia", "rgb(0, 0, 0)");
var mousex = 0;
var mousey = 0;
var angle;
var mode = "menu";
var key = [];
var scale = 1;
for (i = 0; i <= 255; i += 1) {
key[i] = false;
}
/*
Class Definition:
*/
// Bodies:
var circle_body = {
x: 0,
y: 0,
radius: 100,
draw: function() {
this.setvals();
circ(this.x, this.y, this.radius, "rgb(0, 150, 255)");
},
setvals: function() {
this.radius = 25 * scale;
}
};
// Turrents:
var rect_turrent = {
x: 0,
y: 0,
width: 0,
height: 0,
offset: 0,
draw: function() {
this.setvals();
rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)");
},
setvals: function() {
this.offset = 35 * scale;
this.width = 30 * scale;
this.height = 15 * scale;
}
};
// Classes:
var base = {
draw: function() {
rect_turrent.draw();
circle_body.draw();
}
};
/*
Functions & Objects
*/
function txt(x, y, content, font, color) {
game.fillStyle = color;
game.textAlign = "center";
game.font = font;
game.fillText(content, x, y);
}
function rect(x, y, width, height, color) {
x -= width / 2;
y -= height / 2;
game.fillStyle = color;
game.strokeStyle = color.black;
game.fillRect(x, y, width, height);
game.strokeRect(x, y, width, height);
}
function img(x, y, img) {
x -= img.width / 2;
y -= img.height / 2;
game.drawImage(img, x, y);
}
function circ(x, y, radius, color) {
game.fillStyle = color;
game.strokeStyle = color.black;
game.beginPath();
game.arc(x, y, radius, 0, Math.PI * 2);
game.fill();
game.stroke();
}
function clear() {
rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)");
}
/*
IMPORTANT: Player Character:
*/
var player = {
// Variables
x: 0,
y: 0,
type: "base",
angle: 0,
autorotate: false,
// Functions
update: function() {
this.updatevalues();
game.save();
game.rotate(this.angle);
this.draw();
game.restore();
txt(0, -100, "Mouse x: " + mousex + " | Mouse y: " + mousey + " | Angle: " + this.angle, "20px georgia", "rgb(0, 0, 0)");
},
draw: function() {
if (this.type == "base") {
base.draw();
}
},
updatevalues: function() {
this.offsetY = mousex - this.x;
this.offsetX = mousey - this.y;
this.angle = Math.atan(mousex / mousey);
}
};
function menu() {
player.update();
}
function update() {
if (mode == "menu") {
menu();
}
clear();
player.update();
}
/*
Intervals:
*/
game.interval = setInterval(update, 50);
/*
Event Listeners
*/
document.addEventListener("keydown", function(event) {
for (i = 0; i <= 255; i++) {
if (event.keyCode == i) {
key[i] = true;
}
}
});
document.addEventListener("keyup", function(event) {
for (i = 0; i <= 255; i++) {
key[i] = false;
}
});
document.addEventListener("mousemove", function(event) {
mousex = event.offsetX - (canvas.width / 2);
mousey = (canvas.height / 2) - event.offsetY;
});
/* Everything */
* {
transition: 1s;
}
body {
background-color: rgb(100, 100, 100);
}
/* Flexbox: */
.flex-container {
display: flex;
flex-direction: column;
padding: 5vw;
}
#header {
flex-direction: row;
background-color: rgb(200, 0, 0);
}
#main {
background-color: rgb(200, 150, 50);
}
#navbar {
z-index: 1;
overflow: hidden;
background-color: rgb(200, 200, 200);
position: fixed;
top: 0;
width: 100%
}
/* Images */
img {
display: block;
margin-left: auto;
margin-right: auto;
}
.imgcontainer {
position: relative;
width: 50%
}
.imgoverlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 100, 200, 0.75);
overflow: hidden;
width: 100%;
height: 0;
}
.imgtext {
text-align: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
color: rgba(200, 200, 200, 0.75);
}
.imgcontainer:hover .imgoverlay {
height: 100%;
}
.image {
width: 100%;
height: auto;
}
/* Navigation Menu */
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.75);
overflow-x: hidden;
padding-top: 5vw;
}
/* The navigation menu links */
.sidenav a {
padding: 1vw 1vw 1vw 4vw;
text-decoration: none;
overflow-x: hidden;
font-size: 2vw;
color: rgba(150, 150, 150, 0.75);
display: block;
}
/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
color: rgb(255, 255, 255);
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
position: absolute;
top: 0;
right: 1vw;
font-size: 5vw;
margin-left: 50px;
}
/* Styles: */
h1 {
font: 10vw courier;
color: rgb(0, 0, 200);
text-align: center;
padding: none;
}
h2 {
font: 9vw courier;
color: rgb(0, 0, 150);
text-align: center;
padding: none;
}
h3 {
font: 8vw courier;
color: rgb(0, 0, 150);
text-align: center;
padding: none;
}
h4 {
font: 7vw courier;
color: rgb(0, 0, 150);
text-align: center;
padding: none;
}
h5 {
font: 6vw courier;
color: rgb(0, 0, 150);
text-align: center;
padding: none;
}
h6 {
font: 5vw courier;
color: rgb(0, 0, 150);
text-align: center;
padding: none;
}
p {
font: 2vw georgia;
color: rgb(0, 100, 0);
text-align: justify;
}
/* Other */
.link {
color: rgb(150, 150, 150);
}
.link:hover {
color: rgb(255, 255, 255);
}
code {
font-family: courier;
}
canvas {
padding: none;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
display: block;
background-color: rgb(255, 255, 255);
border: 5px solid rgb(0, 0, 0);
}
<!DOCTYPE html>
<html>
<head>
<title>Game Goods</title>
<link rel="stylesheet" href="style.css">
<script src="functions.js"></script>
</head>
<body>
<!-- Game -->
<canvas id="tanks-canvas"></canvas>
<script src="tanks-script.js"></script>
</body>
</html>
(If you run it, hit "full page", or it won't work.)
Edit 10-30-18: I've changed the code according to Helder's answer. At least the mousex works now...
Edit 10-31-18: I changed mousex and mousey to also be at coordinates 0, 0 when the mouse is at the middle. The canvas works like a coordinate plane now. I also added debugging text (you can see it if you run the snippet).
Your calculations for the angle are incorrect, take a look at this sample...
This is by no means the exact solution but should get you moving on the right direction, I'm only using mousex in my calculation.
var canvas = document.getElementById("tanks-canvas");
var game = canvas.getContext("2d");
canvas.height = canvas.width = 170;
game.translate(canvas.width / 2, canvas.height / 2);
clear();
var mousex = 0;
var mousey = 0;
var angle;
var mode = "menu";
var key = [];
var scale = 1;
for (i = 0; i <= 255; i += 1) {
key[i] = false;
}
var player = {
x: 0, y: 0,
type: "base",
angle: 0,
autorotate: false,
update: function() {
this.updatevalues();
game.save()
game.rotate(this.angle);
this.draw();
game.restore();
},
updatevalues: function() {
this.offsetY = mousex - this.x;
this.offsetX = mousey - this.y;
this.angle = 360 * Math.sin(mousex/30000);
},
draw: function() {
if (this.type == "base") {
base.draw();
}
}
};
/*
Class Definition:
*/
// Bodies:
var circle_body = {
x: 0,
y: 0,
radius: 100,
draw: function() {
this.setvals();
circ(this.x, this.y, this.radius, "rgb(0, 150, 255)");
},
setvals: function() {
this.radius = 25 * scale;
}
};
// Turrents:
var rect_turrent = {
x: 0,
y: 0,
width: 0,
height: 0,
offset: 0,
draw: function() {
this.setvals();
rect(this.x + this.offset, this.y, this.width, this.height, "rgb(150, 150, 150)");
},
setvals: function() {
this.offset = 35 * scale;
this.width = 30 * scale;
this.height = 15 * scale;
}
};
// Classes:
var base = {
draw: function() {
rect_turrent.draw();
circle_body.draw();
}
};
/*
Functions & Objects
*/
function rect(x, y, width, height, color) {
x -= width / 2;
y -= height / 2;
game.fillStyle = color;
game.strokeStyle = color.black;
game.fillRect(x, y, width, height);
game.strokeRect(x, y, width, height);
}
function circ(x, y, radius, color) {
game.fillStyle = color;
game.strokeStyle = color.black;
game.beginPath();
game.arc(x, y, radius, 0, Math.PI * 2);
game.fill();
game.stroke();
}
function clear() {
rect(0, 0, canvas.width + 10, canvas.height + 10, "rgb(200, 200, 200)");
}
function update() {
clear();
player.update();
}
game.interval = setInterval(update, 50);
document.addEventListener("mousemove", function(event) {
mousex = event.offsetX;
mousey = event.offsetY;
});
<canvas id="tanks-canvas"></canvas>
I found out the formula with help from my math teacher & a different question.
The formula is
Math.atan2(-y, x);
The below HTML and Javascript has an easing function applied to a background. It works fine in Chrome, Safari, and even IE, but not firefox?
anyone out there know why it wont work in FF?
var element = "ele";
var ease_against = true;
window.onload = function() {
var target = {
x: 0,
y: 0
};
var position = {
x: target.x,
y: target.y
},
ease = 0.2;
document.getElementById(element).addEventListener("mousemove", function(event) {
target.x = event.clientX / 5;
target.y = event.clientY / 5;
});
update();
function update() {
var vx = ease_against ? (((target.x - target.x - target.x) - position.x) * ease) : ((target.x - position.x) * ease);
var vy = ease_against ? (((target.y - target.y - target.y) - position.y) * ease) : ((target.y - position.y) * ease);
position.x += vx;
position.y += vy;
document.getElementById(element).style.backgroundPositionY = position.y + "px";
document.getElementById(element).style.backgroundPositionX = position.x + "px";
requestAnimationFrame(update);
}
};
html,
body {
margin: 0;
width: 100%;
height: 100%;
padding: 0;
}
#ele {
background: url('hex.jpg') repeat;
width: 400px;
height: 400px;
margin-left: auto;
margin-right: auto;
border-top: 1px solid black;
border-bottom: 1px solid black;
border-radius: 50%;
overflow: hidden;
}
<div id="ele">
</div>
It's not the easing that causes your problem.
Firefox doesn't support backgroundPositionX, but it does support background position
For example you can do:
myElement.style.backgroundPosition = position.x + "px "+position.y + "px";