Issue
I'm using the cursor : url('./path/to/small-image.png') X Y, grab
to set a custom image as my cursor, with an offset because I use a particular point of that image as a pointer (and a fallback value being the grab cursor).
When I render the page on a larger/smaller screen, naturally, the cursor stays the same size, and looks either tiny or gigantic compared to the page's content.
How could I make the cursor scale with the page ? If that's possible, how could I make sure the offset (cursor image corner to pointer distance) is proportionally the same ?
The mdn doc doesn't list a size / scale attribute.
I've had no luck with computing offset (using 50%
or calc(50%)
fails), so even that is out for me.
How to scale my custom cursor on anchor tag hover does say that there is nothing in the cursor spec allowing for an easy on-the-fly scaling, but I'm looking for something I think is more static, so maybe there's a solution ? Maybe all browsers now implement something cool with cursors ?
Am I stuck with pre-making tons of different scale cursors and trying to select the right one once I've determined the rendered page's size ?
Problem
Here's a jsfiddle with a simple reduction of my problem
https://jsfiddle.net/bnjprevL/28/
I'll consider this question answered if someone can either show a method to solve the problem in the jsfiddle, or confirm that using a lot of precomputed sizes is indeed the only solution.
Solution
Update:
Ok, I got a mad idea, you will know what I thought by watching the code below.
function scaleImage(scale, imageUrl, callback) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.onload = function () {
const finalWidth = img.width * scale;
const finalHeight = img.height * scale;
canvas.width = finalWidth;
canvas.height = finalHeight;
ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
const dataURL = canvas.toDataURL('image/jpeg');
callback(dataURL);
};
img.src = imageUrl;
}
window.addEventListener('resize', () => {
const innerWidth = window.innerWidth;
// Notice, the origin of the image url must be the same as your site, or using base64 data.
const cursorUrl ='';
// 1920 is just a supposed value, you can change it to what you wanted
const scale = innerWidth / 1920;
scaleImage(scale, cursorUrl, dataURL => {
document.body.style.cursor = 'url(' + dataURL + ') 0 0, grab';
});
});
The code above has more points to be optimized, whatever, now you can achieve your goal.
Before:
You can use media queries to achieve this by setting different styles on screens with different sizes.
The code below shows how to do it:
// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) {
cursor : url('./path/to/small-image.png') X Y, grab;
}
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) {
cursor : url('./path/to/small-image.png') X1 Y1, grab;
}
// ...and so on
The problem now becomes what the min-width value is or how can I set the min-width value. Fortunately, The Bootstrap has a good practice, click here to get more details.
Answered By - cj0x39e
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.