I am trying to show a tooltip by hovering the mouse on a circle inside a canvas. While the CSS is changing from hidden to visible by javaScript (saw that through chrome inspect), the tooltip is not showing up. Please help to sort this out. Thank you for your help.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
</canvas>
</div>
</body>
</html>
you need to move the .tooltip element out of the canvas element, otherwise it won't display.
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
// Create circle
const circle = new Path2D();
circle.arc(150, 75, 50, 0, 2 * Math.PI);
ctx.fillStyle = 'red';
ctx.fill(circle);
// Listen for mouse moves
canvas.addEventListener('mousemove', function(event) {
// Check whether point is inside circle
if (ctx.isPointInPath(circle, event.clientX, event.clientY)) {
showtext();
} else {
hidetext();
}
});
function showtext() {
document.getElementById("tooltiptext").style.visibility = 'visible';
}
function hidetext() {
document.getElementById("tooltiptext").style.visibility = 'hidden';
}
.tooltip {
visibility: hidden;
position: absolute;
top: 20px; left: 20px;
}
body {
margin: 0;
}
<canvas id="canvas"></canvas>
<div class="tooltip">
<span id="tooltiptext" class="tooltiptextstyle">blah</span>
</div>
There were two issues:
The manner in which you were applying styles to your canvas were causing its display not to match its internal tracking of the position of the items it contained, so the if condition was not necessarily returning true when the cursor was over where the circle was appearing.
A canvas cannot render and display contents.
As such, the below snippet shows a version of this that works. You'll need to figure out how to position things correctly, but it solves the immediate issue.
const canvas = document.getElementById('flower');
const ctx = canvas.getContext('2d');
const circle2 = new Path2D();
circle2.arc(100, 100, 25, 0, 2 * Math.PI);
ctx.fillStyle = "red";
ctx.fill(circle2);
canvas.addEventListener("mousemove", function(event2) {
if (ctx.isPointInPath(circle2, event2.clientX, event2.clientY)) {
showtext();
}
});
function showtext(){
document.getElementById("tooltiptext").style.visibility = 'visible';
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
.tooltip {
position: relative;
display: inline-block;
border-bottom: 1px dotted black;
}
.tooltip .tooltiptextstyle {
visibility: hidden;
display: block;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
position: absolute;
z-index: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" href="style.css"/>
<script type="text/typescript" src="main.ts"></script>
</head>
<body>
<div id="design" class="design">
<canvas id="flower">
</canvas>
<div class="tooltip">
<span id ="tooltiptext" class="tooltiptextstyle">
blah
</span>
</div>
</div>
</body>
</html>
The problem was that you set the width and height of the canvas as the 100% of the parent in the css.
You need to set the canvas's width and height attribute instead.
html, body, div, canvas {
width: 100%;
height: 100%;
margin: 0;
}
html, body, div {
width: 100%;
height: 100%;
margin: 0;
}
<canvas id="canvas" width="200" height="200">
Related
This is my first HTML code. i m trying to put a canvas where user can put e signature by his mouse. Can anyone help me where im wrong. The html and css part works but e signature is not showing on the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
<style>
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white;
}
</style>
<script>
var canvas = document.getElementById('signature-pad');
function resizeCanvas() {
var ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
var signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
</script>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
</body>
</html>
There is this point :
You seem to use this external library but you don't load it on
your code
You need to load it, the simplest way is to load it from the CDN
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
After as you specify the background-color in your css :
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: white; // <----- Here
}
Hence, you don't need to add the option when you create your signaturePad :
// BEFORE
const signaturePad = new SignaturePad(canvas, {
backgroundColor: 'rgb(255, 255, 255)'
});
// AFTER
const signaturePad = new SignaturePad(canvas);
const canvas = document.getElementById('signature-pad');
function resizeCanvas() {
const ratio = Math.max(window.devicePixelRatio || 1, 1);
canvas.width = canvas.offsetWidth * ratio;
canvas.height = canvas.offsetHeight * ratio;
canvas.getContext("2d").scale(ratio, ratio);
}
window.onresize = resizeCanvas;
resizeCanvas();
const signaturePad = new SignaturePad(canvas);
document.getElementById('clear').addEventListener('click', function () {
signaturePad.clear();
});
.wrapper {
position: relative;
width: 400px;
height: 200px;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.signature-pad {
position: absolute;
left: 0;
top: 0;
width: 400px;
height: 200px;
background-color: lightgrey; // For visualisation puropse, I changed it
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>eSignature Page</title>
</head>
<body>
<div class="wrapper">
<canvas id="signature-pad" class="signature-pad" width=400 height=200></canvas>
</div>
<button id="clear">Clear</button>
<script src="https://cdn.jsdelivr.net/npm/signature_pad#2.3.2/dist/signature_pad.min.js"></script>
</body>
</html>
I'm trying to implement an effect on overlapping images so when I click and drag a bar the other image underneath should reveal modifying the width. My code works, but it's kind of buggy. When I click on the bar I have to then release it to make it work, so it's not really a drag, and it supposed to stop moving when I release the click.
And second, the bar goes right even outside my container. How could I fix my code?
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function () {
container.on("mousemove", function (e) {
bar.css("left", e.clientX);
up.width(e.clientX);
});
});
$("body").on("mouseup", function () {
container.off("mousemove");
});
container.on("mouseleave", function () {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
Explanation : When the bar was being slid, the images were acting as draggable elements. To stop that, I set draggable attribute to false in both image elements. Besides that, the blue color appearing was highlight because of selection of element. To prevent that, I set CSS property user-select to none for the container divs of images.
For browser compatibility, use different versions for user-select.
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
bar.on("mousedown", function() {
container.on("mousemove", function(e) {
let left = e.clientX;
let containerWidth = container.width();
let barWidth = bar.width();
if((left + barWidth) > containerWidth)
left = containerWidth - barWidth;
bar.css("left", left);
up.width(left);
});
});
$("body").on("mouseup", function() {
container.off("mousemove");
});
container.on("mouseleave", function() {
container.off("mousemove");
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
}
#up {
width: 50%;
}
#bottom, #up {
position: absolute;
overflow: hidden;
user-select: none;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" draggable="false"/>
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" draggable="false"/>
</div>
<div id="bar"></div>
</div>
My advise is to NOT unregister (remove) the mousemove event listener.
Below, I used a barActive as a "flag" to know if the mouse button is down. The flag is resetted on mouseup and mouseleave of the container.
The mousemove event is a machinegun... But is still not fast enough to "really" follow the mouse. So if a user moves the bar fast, the cursor often is off the bar (I'm sure you noticed it). So a mouseup has good chances to not fire if the mouseup event listener is on the bar. So the event listener has to be on the container.
Now... While mousemove is not fast enought to follow the mouse perfectly... It often is too fast and may interfeer with the actions you wish to do with the other events, like mousedown were you set the "flag". At the same millisecond, you can have the mousedown event and multiple mousemove events. So to "isolate" it form the mousemove events, I used a real tiny setTimeout. That is giving enought time for the flag to be set bafore any next mousemove to enact.
About making sure the bar does not go outside the container, I used a condition on e.clientX.
I also took the container's padding in account.
console.clear();
var up = $("#up");
var bar = $("#bar");
var container = $("#container");
var barActive = false;
bar.on("mousedown", function (e) {
barActive = true;
});
container.on("mousemove mouseup mouseleave", function (e) {
if (barActive && e.type === "mousemove") {
setTimeout(function () {
if (e.clientX < container.width() && e.clientX>5) {
bar.css("left", e.clientX - 8);
up.width(e.clientX - 8);
}
}, 1);
return;
}
barActive = false; // Applies only for mouseup and mouseleave
});
* {
margin: 0;
box-sizing: border-box;
}
img {
height: 400px;
width: 600px;
object-fit: cover;
user-select: none; /* Prevents the image itself to be selected */
}
#up {
width: 50%;
}
#bottom,
#up {
position: absolute;
overflow: hidden;
}
#container {
position: relative;
border: 5px solid cornflowerblue;
height: 410px;
width: 610px;
overflow: hidden; /* Will make sure the bar does not go over the border */
}
#bar {
position: absolute;
height: 400px;
width: 10px;
background-color: hotpink;
left: 300px;
cursor: e-resize;
}
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>Document</title>
</head>
<body>
<div id="container">
<div id="bottom">
<img src="https://via.placeholder.com/600x400?text=Image1" alt="image" />
</div>
<div id="up">
<img src="https://via.placeholder.com/600x400?text=Image2" alt="image" />
</div>
<div id="bar"></div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="script.js"></script>
</body>
</html>
CodePen
Basically, I want to make the resize bar move as I move the cursor across as long as I'm focusing on it. I did that but the thing is that it's being glitchy. It returns to the original state one time and the other time follows the cursor. I don't want it to do that.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
slider.style.left += e.offsetX + "px";
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
slider.style.left = e.offsetX + "px"
console.log("Cursor is " + e.offsetX)
console.log("Element is" + slider.style.left)
}
})
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
As you can see, as you drag the element, it works but it isn't smooth. It returns to its original coordinates sometimes and then follows the cursor the other time.
.offsetX is the mouse position relative to the element, so that makes the slider jump. .clientX is the mouse position relative to the document.
In order to use clientX, however, you need to subtract the original x position of the slider. I'm going to assume that .Container will always be the container for the slider. By using getBoundingClientRect() (which is a operation that takes time), I can get the x position (.left) from said container.
let slider = document.querySelector(".Slider");
let container = document.querySelector(".Container")
let contone = document.querySelector(".contone");
let conttwo = document.querySelector(".conttwo");
let clicked = false;
slider.addEventListener("mousedown", function(e) {
clicked = true;
})
container.addEventListener("mousemove", function(e) {
if(clicked) {
updateSliderPosition(e.clientX);
console.clear();
console.log("Cursor is " + e.clientX);
console.log("Element is" + slider.style.left);
}
})
function updateSliderPosition(value) {
let box = container.getBoundingClientRect();
slider.style.left = value - box.left + "px";
}
container.addEventListener("mouseup", function() {
clicked = false;
})
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone {
position: absolute;
width: 100%;
height: 100%;
z-index: -11;
overflow: hidden;
}
.contone img {
position: relative;
}
.conttwo {
position: absolute;
width: 100%;
height: 100%;
z-index: -11111;
overflow: hidden;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: black;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="Style.css" />
<script src="Script.js" async></script>
</head>
<body>
<div class="Container">
<div class="contone">
<img
class="Pic1"
src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg"
alt=""
/>
</div>
<div class="Slider"></div>
<div class="conttwo">
<img
class="Pic2"
src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg"
alt=""
/>
</div>
</div>
</body>
</html>
My approach is to use a translation, which are generally considered better for animations than absolute positioning, for moving the slider.
I'm also using pointer events over mouse events. These work the same as mouse events but also will work for touch devices. They also allow the use of setPointerCapture, which means that once we have clicked on the slider, it will receive all events until we release it (which we do in the mouseUpHandler). You can see in the demo that even if the pointer goes outside the image, you can still move the slider around.
let slider = document.querySelector("#slider");
let container = document.querySelector('#container');
let sliderWidth = container.offsetWidth * (1 / 100);
let maxWidth = container.offsetWidth - sliderWidth;
let lastX = 0;
let thisX = 0;
let leftEdge = 0;
function mouseDownHandler(e) {
lastX = e.clientX;
slider.addEventListener('pointermove', mouseMoveHandler);
slider.setPointerCapture(e.pointerId);
}
function mouseMoveHandler(e) {
thisX = e.clientX;
xDiff = thisX - lastX;
leftEdge = Math.min(maxWidth, Math.max(0, leftEdge + xDiff));
slider.style.transform = `translate(${leftEdge}px)`;
lastX = thisX;
}
function mouseUpHandler(e) {
slider.removeEventListener('pointermove', mouseMoveHandler);
slider.releasePointerCapture(e.pointerId);
}
slider.addEventListener("pointerdown", mouseDownHandler);
slider.addEventListener("pointerup", mouseUpHandler)
.Container {
position: relative;
width: 500px;
height: 300px;
overflow: hidden;
}
.contone,
.conttwo {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.contone {
z-index: -11;
}
.conttwo {
z-index: -11111;
}
img {
width: 100%;
height: 100%;
}
.Slider {
cursor: ew-resize;
background-color: red;
opacity: 0.5;
width: 1%;
z-index: 9999;
height: 100%;
position: relative;
}
<div id="container" class="Container">
<div class="contone">
<img class="Pic1" src="https://aluminumwheelsguide.com/wp-content/uploads/2020/04/Best-All-Wheel-Drive-Cars-2020-700x300.jpg" />
</div>
<div id="slider" class="Slider"></div>
<div class="conttwo">
<img class="Pic2" src="https://signatureautoworld.com/wp-content/uploads/2020/06/SONATA-hero-option2-764A4983-640x354.jpg" />
</div>
</div>
I have a project where I want to achieve a glass effect through a lens, running over the entire site. I tried with PixiJS, but it only works on the canvas. It's important that the filter is on every element on the site. I've succeded in putting an SVG displacement filter on the body through CSS, and it distorts (!) but the body and everything on the site, is also only visible through the image, I'm using to displace.
Is it possible to achieve a glass lens, running over the site using SVG filters, or is there another way which is better?
Here is the code I have so far
I did not write the js entirely by myself. I found an example of displacement here https://codepen.io/osublake/pen/WQyBJb
For reference this is the effect I'm after, but without canvas https://zumi.gucci.com/
And how would I go ahead an animate the SVG feImage? I tried with the setAttribute x and y, but it doesn't move
Thanks
<!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>Glass Displacement</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.5/pixi.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<svg>
<defs>
<filter id="displace-filter">
<feImage id="displaceImg" x="512" y="512" width="100%" height="100%" result="displaceImage" />
<feDisplacementMap id="displacement-map"
xChannelSelector="R"
yChannelSelector="G"
in="SourceGraphic"
in2="displaceImage"
color-interpolation-filters="sRGB"
scale="100"
result="displacementMap"
/>
<feComposite in2="displaceImage" operator="in" />
</filter>
</defs>
</svg>
<div class="wrapper">
<img src="https://source.unsplash.com/X0Tavx1j8Wc" alt="">
<h1>Bornholm</h1>
</div>
<div id="glass"></div>
<script src="svgdisplace.js"></script>
</body>
</html>
*,
*::before,
*::after{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
#font-face {
font-family: system;
font-style: normal;
font-weight: 400;
src: local(".SFNSText-Light"), local(".HelveticaNeueDeskInterface-Light"), local(".LucidaGrandeUI"), local("Ubuntu Light"), local("Segoe UI Light"), local("Roboto-Light"), local("DroidSans"), local("Tahoma");
}
html, body {
margin: 0;
padding: 0;
}
body {
line-height: 1.5;
font-family: "system";
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
filter: url("#displace-filter");
}
html {
font-size: 16px;
}
h1 {
margin-top: 0;
font-size: 11.089em;
font-weight: 100;
}
.wrapper {
position: relative;
width: 75vw;
height: 75vh;
overflow: hidden;
}
.wrapper img {
width: 100%;
position: relative;
bottom: 50%;
}
#glass {
background: chartreuse;
width: 200px;
height: 200px;
position: absolute;
/* filter: url(#noise); */
}
svg {
position: absolute;
top: 500px;
left: 500px;
transform: translate(-50%, -50%);
}
.wrapper h1 {
color: white;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
var xlink = "http://www.w3.org/1999/xlink";
var imgUrl = "_assets/displace2.png";
var feImage = document.querySelector("feImage");
var displaceImg = document.getElementById("displaceImg");
var speed = {
x: 2,
y: 1
};
toBase64(imgUrl, function(data){
feImage.setAttributeNS(xlink, "xlink:href", data);
});
function toBase64(url, callback){
var img = new Image();
img.crossOrigin = "anonymous";
img.onload = function(){
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.height = this.height;
canvas.width = this.width;
ctx.drawImage(this, 0, 0);
var dataURL = canvas.toDataURL("image/png");
callback(dataURL);
canvas = null;
};
img.src = url;
}
animate();
var tx = 0;
var ty = 0;
function animate(){
tx += 0.027;
ty += 0.031;
displaceImg.setAttribute("x", speed.x);
displaceImg.setAttribute("y", speed.y);
speed.x += 0.1;
speed.y += 0.1;
renderer.render(stage); */
requestAnimationFrame(animate);
}
Here is the image, I'm using to displace
I'm working on my personal project and i need to change div style which is my cursor (from width and height 10px to width and height 100px) when i'm hovering it on h1 element inside another div.
I tried
h1:hover ~ .cursor{
width: 100px;
height: 100px;
}
and
h1:hover + .cursor{
width: 100px;
height: 100px;
}
but it didn't work in this case. Do you know how to do it?
HTML:
<!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>Test</title>
<link rel="stylesheet" href="css/main.css">
</head>
<body>
<header class="mainHeader">
<h1>WELCOME</h1>
</header>
<div class="cursor"></div>
<script src="js/cursor.js"></script>
</body>
</html>
CSS:
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,700,800&display=swap');
*, html{
margin: 0;
font-family: 'Montserrat', sans-serif;
cursor: none;
}
.mainHeader{
background: rgb(255, 255, 255);
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
h1{
color: rgb(255, 255, 255), 255);
font-weight: 800;
}
.cursor{
width: 10px;
height: 10px;
background: rgb(255, 255, 255);
position: absolute;
border-radius: 50%;
box-sizing: border-box;
pointer-events: none;
transition: 200ms ease-out;
mix-blend-mode: difference;
}
h1:hover ~ .cursor{
width: 100px;
height: 100px;
}
here is my js code responsible for following div with the mouse:
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: " + (e.pageY - 5) + "px; left: " + (e.pageX - 5) + "px;");
});
The cursor works because when I changed the code so that the "~" works, everything was ok.
I'm open to solutions in javascript.
Codepen version: https://codepen.io/Flayy/pen/vYBwzgE
You need to add a class (or an id) on the H1 tag to be able to select it in the script, e.g.:
<h1 class="bigCursor">WELCOME</h1>
And in the script:
const bigCursor = document.querySelector('.bigCursor')
So change your 'mousemove' event function to a more flexible way to edit style:
document.addEventListener('mousemove', e => {
cursor.style.top = e.pageY + 'px';
cursor.style.left = e.pageX + 'px';
});
And add this to functions to respectively increase and decrease size of the cursor
bigCursor.addEventListener('mouseenter', e => {
cursor.style.width = "100px";
cursor.style.height = "100px";
});
bigCursor.addEventListener('mouseleave', e => {
cursor.style.width = "10px";
cursor.style.height = "10px";
});
At this point you may have realised that the cursor is not centered on the mouse, so add this line inside the .cursor CSS tag to fix this:
transform: translate(-50%, -50%);
Codepen version
Hey in CSS you can only change the CSS properties of another element on hover if the element is a child or adjacent to the hovered element.
I moved your cursor div to be adjacent to the H1 element and added a + to your h1 hover css property:
CodePen: https://codepen.io/sudoxx2/pen/dybEqqY
just write two functions one on mouseenter and second on mouseleave
document.getElementById(hoverElement).addEventListener("mouseenter",function(){
document.getElementById(cursorElement).style.width = "100px"
document.getElementById(cursorElement).style.height = "100px"})
and add another on mouseleave
document.getElementById(hoverElement).addEventListener("mouseleave",function(){
document.getElementById(cursorElement).style.width = "10px"
document.getElementById(cursorElement).style.height = "10px"})