We Keep Coding

Changing the text to another on hover, but only where I have the cursor

I have a script made so that I can color the screen by moving the cursor. Now I would like this text to change to another text when you hover over it.
function drawAnimation() {
var yellowBrush = new Image();
yellowBrush.src = 'wp-content/themes/starter/assets/images/brush-yellow.png';
var drawCanvas = document.getElementById('hero__canvas');
var canvasOverlay = document.getElementById('hero__headings');
drawCanvas.width = drawCanvas.offsetWidth;
drawCanvas.height = drawCanvas.offsetHeight;
var ctx = drawCanvas.getContext('2d');
ctx.lineJoin = ctx.lineCap = 'round';
var lastPoint = { x: 0, y: 0 },
brushColor = yellowBrush;
function distanceBetween(point1, point2) {
return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
}
function angleBetween(point1, point2) {
return Math.atan2(point2.x - point1.x, point2.y - point1.y);
}
canvasOverlay.onmouseenter = function (e) {
var offsetCheck = window.pageYOffset + window.innerHeight - document.querySelector('.hero').clientHeight;
var offset = offsetCheck > 0 ? offsetCheck : 0;
lastPoint = { x: e.clientX, y: e.clientY + offset };
};
canvasOverlay.onmousemove = function (e) {
var offsetCheck = window.pageYOffset + window.innerHeight - document.querySelector('.hero').clientHeight;
var offset = offsetCheck > 0 ? offsetCheck : 0;
var currentPoint = { x: e.clientX, y: e.clientY + offset };
var dist = distanceBetween(lastPoint, currentPoint);
var angle = angleBetween(lastPoint, currentPoint);
for (var i = 0; i < dist; i++) {
x = lastPoint.x + (Math.sin(angle) * i) - 25;
y = lastPoint.y + (Math.cos(angle) * i) - 105;
ctx.drawImage(brushColor, x, y);
}
lastPoint = currentPoint;
};
}
jQuery(document).ready(function ($) {
drawAnimation();
});
.brush::before {
position: absolute;
content: 'w marketingu';
color: #ffdd00;
font-size: 80px;
top: 0;
left: 0;
z-index: 1;
}
.brush::after {
position: absolute;
content: 'w brandingu i digital';
color: #ffffff;
font-size: 80px;
top: 0;
left: 0;
z-index: 1;
}
<section
class="hero">
<div id="hero__animation_container" class="hero__animation_container">
<canvas id="hero__canvas" class="hero__canvas"></canvas>
<div id="hero__headings" class="hero__headings flex flex-col justify-center items-start">
<img class="absolute top-0 -right-48 rotate-90 z-10" src="{{theme.link}}/assets/images/icons/dots-references.png" alt=""/>
<div class="heading Container">
<p class="">Wiemy, co działa</p>
<p class="brush"></p>
</div>
</div>
</div>
the effect I want to achieve in the attachment:
I have no idea how to go about it, I tried to combine something with mix-blend but it will not solve the problems. Anyone able to help?

How to make moving text bounce off each other instead of overlapping in JS?

I am trying to make two words which are divs that move around the page randomly for my website.
However whenever the two words come into contact, I want them to bounce off each other instead of overlapping each other.
What do I need to change and add in my Javascript? I have posted the code of the moving words.
$(document).ready(function(){
animateDiv();
animateDivTwo();
});
// MOTION
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 100;
var w = $(window).width() - 100;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.motion').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.motion').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function animateDivTwo(){
var newq = makeNewPosition();
var oldq = $('.designer').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.designer').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDivTwo(this);
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed; }
#import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
/*MOTION*/
h2{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.motion {
width: 100%;
position: absolute;
left: 50px;
}
/*DESIGNER*/
h3{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.designer {
width: 100%;
position: absolute;
left: 1200px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
</head>
<body>
<div class="motion">
<h2>
motion
</h2>
</div>
<div class="designer">
<h3>
designer
</h3>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>
</body>
</html>

In order to avoid overlaps, you can get started with simple collision detection function in Javascript called overlaps running continuously, it detects the overlapping between motion div and designer div as follows:
$(document).ready(function(){
animateDiv();
animateDivTwo();
setInterval(function(){
var $motion = $('.motion');
var $designer = $('.designer');
var isOverlap = overlaps($motion[0], $designer[0]);
if(isOverlap){
$motion.stop(true);
$designer.stop(true);
$motion.animate({ top: $motion.offset().top - 20, left: $motion.offset().left - 20 }, 100, function(){
animateDiv();
});
$designer.animate({ top: $designer.offset().top + 20, left: $designer.offset().left + 20 }, 100, function(){
animateDivTwo();
});
}
}, 100);
});
function overlaps(a, b) {
const rect1 = a.getBoundingClientRect();
const rect2 = b.getBoundingClientRect();
const isInHoriztonalBounds =
rect1.x < rect2.x + rect2.width && rect1.x + rect1.width > rect2.x;
const isInVerticalBounds =
rect1.y < rect2.y + rect2.height && rect1.y + rect1.height > rect2.y;
const isOverlapping = isInHoriztonalBounds && isInVerticalBounds;
return isOverlapping;
}
// MOTION
function makeNewPosition(){
// Get viewport dimensions (remove the dimension of the div)
var h = $(window).height() - 100;
var w = $(window).width() - 100;
var nh = Math.floor(Math.random() * h);
var nw = Math.floor(Math.random() * w);
return [nh,nw];
}
function animateDiv(){
var newq = makeNewPosition();
var oldq = $('.motion').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.motion').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDiv();
});
};
function animateDivTwo(){
var newq = makeNewPosition();
var oldq = $('.designer').offset();
var speed = calcSpeed([oldq.top, oldq.left], newq);
$('.designer').animate({ top: newq[0], left: newq[1] }, speed, function(){
animateDivTwo(this);
});
};
function calcSpeed(prev, next) {
var x = Math.abs(prev[1] - next[1]);
var y = Math.abs(prev[0] - next[0]);
var greatest = x > y ? x : y;
var speedModifier = 0.1;
var speed = Math.ceil(greatest/speedModifier);
return speed; }
h2{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.motion {
position: absolute;
left: 50px;
}
h3{
font-size: 40px;
font-family: 'Roboto Mono', monospace;
user-select: none;
}
.designer {
position: absolute;
left: 1200px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="motion">
<h2>
motion
</h2>
</div>
<div class="designer">
<h3>
designer
</h3>
</div>

Draggable element gets stuck near edges

Dragging the element seems to make it get stuck randomly before touching the edges of its parent container. Would someone be able to spot why this is going on?
On a side note, I could not get the remembered position transferred to "updateDrag" correctly.
And no, I don't want any jQuery solution, like one created with jQuery UI.
let $container = document.getElementById('container');
let $element = document.getElementById('element');
let mousePosition;
let offset = [0, 0];
let isDown = false;
function initDrag(event) {
isDown = true;
// Element also remembers previous position wrong
// offset = [
// $element.offsetLeft - event.clientX,
// $element.offsetTop - event.clientY
// ];
offset = [
0,
0
];
}
function updateDrag(event) {
event.preventDefault();
if (isDown) {
mousePosition = {
x: event.clientX,
y: event.clientY
};
let diffY = mousePosition.y - offset[1];
let diffX = mousePosition.x - offset[0];
if (diffY >= 0 && diffY + $element.offsetHeight <= $container.offsetHeight) {
$element.style.top = (mousePosition.y + offset[1]) + 'px';
}
if (diffX >= 0 && diffX + $element.offsetWidth <= $container.offsetWidth) {
$element.style.left = (mousePosition.x + offset[0]) + 'px';
}
}
}
function haltDrag() {
isDown = false;
}
$element.addEventListener('mousedown', initDrag, false);
document.addEventListener('mouseup', haltDrag, false);
document.addEventListener('mousemove', updateDrag, false);
#container {
position: relative;
top: 10px;
left: 10px;
height: 300px;
width: 300px;
background-color: green;
}
#element {
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: red;
color: blue;
}
<div id="container">
<div id="element"></div>
</div>

Div goes to wrong position

I am editing the vertical slider I used from this color picker. It uses top to adjust the cursors position. I want to use transform translateY instead. When I do that, I apparently have to calculate it differently.
The original calculation is: (Line: #286)
hsv_barcursor.style.top = ((1 - color.hsv.v) * hsv_barHeight) + 'px';
My updated version is: (Line 43 at JSFiddle Below)
hsv_barcursor.style.transform = 'translateY(calc(' + (color.RND.hsv.v * 10) + '% - ' + cursorRadius + 'px))';
The position of my version is wrong.
Why doesn't the math for top work for tranlateY?
What's the correct math to use for translateY?
I'm not looking for JQuery answers, nor am I looking for html's input range.
JSFiddle
var luminenceBarWrapper = document.getElementById('luminenceBarWrapper'),
hsv_barBGLayer = document.getElementById('bar-bg'),
hsv_barcursor = document.getElementById('hsv-barcursor'),
hsv_barCursors = document.getElementById('hsv-barcursors'),
hsv_barHeight = hsv_barCursors.offsetHeight,
cursorRadius = hsv_barcursor.offsetHeight / 2,
startPoint,
currentTarget,
myColor = new Colors();
// Create Event Functions
var hsvDown = function(e) { // mouseDown callback
e.preventDefault();
if (e.target === hsv_barcursor) currentTarget = e.target.parentNode;
else if (e.target === hsv_barCursors) currentTarget = e.target;
else return;
startPoint = getOrigin(currentTarget);
window.addEventListener('mousemove', hsvMove);
hsvMove(e);
startRender();
},
hsvMove = function(e) { // mouseMove callback
myColor.setColor({
v: (hsv_barHeight - (e.clientY - startPoint.top)) / hsv_barHeight * 100
}, 'hsv');
};
// Initial Rendering
doRender(myColor.colors);
// Adde Events To Objects
luminenceBarWrapper.addEventListener('mousedown', hsvDown);
window.addEventListener('mouseup', function() {
window.removeEventListener('mousemove', hsvMove);
stopRender();
});
function doRender(color) {
hsv_barcursor.style.transform = 'translateY(calc(' + (color.RND.hsv.v * 10) + '% - ' + cursorRadius + 'px))';
//hsv_barcursor.style.top = ((1 - color.hsv.v) * hsv_barHeight) + 'px';
}
var renderTimer,
startRender = function(oneTime) {
renderTimer = window.setInterval(function() {
doRender(myColor.colors);
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
},
stopRender = function() {
window.clearInterval(renderTimer);
};
function getOrigin(elm) {
var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
top: 0,
left: 0
},
doc = elm && elm.ownerDocument,
body = doc.body,
win = doc.defaultView || doc.parentWindow || window,
docElem = doc.documentElement || body.parentNode,
clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
clientLeft = docElem.clientLeft || body.clientLeft || 0;
return {
left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
};
}
body {
position: absolute;
}
#bar-bg {
width: 15px;
height: 500px;
background-color: greenyellow;
}
#hsv-barcursors {
position: absolute;
right: -7.5px;
width: 30px;
top: 0;
height: 500px;
overflow: hidden;
cursor: pointer;
}
#hsv-barcursor {
position: absolute;
right: 7.5px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid black;
margin-bottom: 5px;
}
<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<div id="luminenceBarWrapper">
<div id="bar-bg"></div>
<div id="hsv-barcursors" id="hsv_cursors">
<div id="hsv-barcursor"></div>
</div>
</div>

translateY(Npx) translates something downward if N > 0 therefore you need translate(0px) when the marker is up and translate(Npx) when the marker is down at the bottom of your component
Your variables are
color.RND.hsv.v which is 100 when the marker is up and 0 when the marker is down
hsv_barHeight is the height of your component
The first step is to invert the value of color.RND.hsv.v i.e. (100 - color.RND.hsv.v) next we will map it to the range [0,1] which is simply done by a simple division i.e. t = (100 - color.RND.hsv.v) / 100 we do this so that the height is linearly mapped with this value t to be in the range [0, height] i.e. (100 - color.RND.hsv.v) / 100 * hsv_barHeight which is the final equation
var luminenceBarWrapper = document.getElementById('luminenceBarWrapper'),
hsv_barBGLayer = document.getElementById('bar-bg'),
hsv_barcursor = document.getElementById('hsv-barcursor'),
hsv_barCursors = document.getElementById('hsv-barcursors'),
hsv_barHeight = hsv_barCursors.offsetHeight,
cursorRadius = hsv_barcursor.offsetHeight / 2,
startPoint,
currentTarget,
myColor = new Colors();
// Create Event Functions
var hsvDown = function(e) { // mouseDown callback
e.preventDefault();
if (e.target === hsv_barcursor) currentTarget = e.target.parentNode;
else if (e.target === hsv_barCursors) currentTarget = e.target;
else return;
startPoint = getOrigin(currentTarget);
window.addEventListener('mousemove', hsvMove);
hsvMove(e);
startRender();
},
hsvMove = function(e) { // mouseMove callback
myColor.setColor({
v: (hsv_barHeight - (e.clientY - startPoint.top)) / hsv_barHeight * 100
}, 'hsv');
};
// Initial Rendering
doRender(myColor.colors);
// Adde Events To Objects
luminenceBarWrapper.addEventListener('mousedown', hsvDown);
window.addEventListener('mouseup', function() {
window.removeEventListener('mousemove', hsvMove);
stopRender();
});
function doRender(color) {
hsv_barcursor.style.transform = 'translateY(' + (100 - color.RND.hsv.v) / 100 * (hsv_barHeight - cursorRadius) + 'px)';
//hsv_barcursor.style.top = ((1 - color.hsv.v) * hsv_barHeight) + 'px';
}
var renderTimer,
startRender = function(oneTime) {
renderTimer = window.setInterval(function() {
doRender(myColor.colors);
}, 13); // 1000 / 60); // ~16.666 -> 60Hz or 60fps
},
stopRender = function() {
window.clearInterval(renderTimer);
};
function getOrigin(elm) {
var box = (elm.getBoundingClientRect) ? elm.getBoundingClientRect() : {
top: 0,
left: 0
},
doc = elm && elm.ownerDocument,
body = doc.body,
win = doc.defaultView || doc.parentWindow || window,
docElem = doc.documentElement || body.parentNode,
clientTop = docElem.clientTop || body.clientTop || 0, // border on html or body or both
clientLeft = docElem.clientLeft || body.clientLeft || 0;
return {
left: box.left + (win.pageXOffset || docElem.scrollLeft) - clientLeft,
top: box.top + (win.pageYOffset || docElem.scrollTop) - clientTop
};
}
body {
position: absolute;
}
#bar-bg {
width: 15px;
height: 500px;
background-color: greenyellow;
}
#hsv-barcursors {
position: absolute;
right: -7.5px;
width: 30px;
top: 0;
height: 500px;
overflow: hidden;
cursor: pointer;
}
#hsv-barcursor {
position: absolute;
right: 7.5px;
width: 11px;
height: 11px;
border-radius: 50%;
border: 2px solid black;
margin-bottom: 5px;
}
<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>
<div id="luminenceBarWrapper">
<div id="bar-bg"></div>
<div id="hsv-barcursors" id="hsv_cursors">
<div id="hsv-barcursor"></div>
</div>
</div>

how to animate div from its center

I am trying to animate a div tag from center. Initially I want the div tag to be none visible. when user clicks on link then this div tag should animate from its center. How can I achieve this using jquery. Here is my current code.
link one<br><br><br><br>
<section class="one">one</section>
here is css
.one {
margin: 0 auto;
width: 200px;
height: 200px;
border: 1px solid red;
background: lightblue;
}
and here is my jquery
$('a').on('click', function (e) {
e.preventDefault();
var w = 200; //$('.one').outerWidth();
var h = 200; //$('.one').outerHeight();
var x = $('.one').width() / 2;
var y = $('.one').height() / 2;
var startW = h - y/2;
var startH = w - x/2;
var endTop = y - h/2;
var endLeft = x - w/2;
$('.one').animate({
opacity: 1,
width: (w+200) + 'px',
height: (h+200) + 'px',
top: endTop+'px',
left: endLeft+'px'
}, 1000);
console.log(endLeft);
});

Something like this:
http://jsfiddle.net/TJNTq/
$('.linkone').on('click', function (e) {
e.preventDefault();
var w = 200; //$('.one').outerWidth();
var h = 200; //$('.one').outerHeight();
var x = $('.one').width() / 2;
var y = $('.one').height() / 2;
var startW = h - y/2;
var startH = w - x/2;
var endTop = y - h/2;
var endLeft = x - w/2;
$('.one').show().animate({
opacity: 1,
width: (w+200) + 'px',
height: (h+200) + 'px',
marginTop: 0 + 'px'
}, 1000);
console.log(endLeft);
});
note that your animations of top and left weren't doing anything because the .one div isn't positioned absolutely or relatively.