Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I remember seeing a codepen or a fiddle of this effect a while back.
I'm looking to build a small js feature that would track the direction of the mouse movement and transform a css card-like element in 3d space so that it looks like it's being dragged. So if I move my mouse towards the top right it would sort of push down on the top right of the card and and lift the bottom left towards the viewer.
What's an easy way to do this in javascript?
This stackoverflow question has mostly what you need.
But you can check out the chill the lion codepen too, it's using
requestAnimationFrame(loop);
which is a nice solution.
Related
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 2 years ago.
Improve this question
I've been learning how to code for some time and I come to you because I'm stuck on the construction of an animation. I've been trying to figure out how to make it for two days (image attached) but it seems that I don't have the knowledge to build this animation alone. I've been looking in css but the revelation of a text at a fixed position is not possible with a moving element, and I don't master java script frameworks.
The animation starts with the right image (this is the default state), it then goes through the left image to then let appear only the orange background and the texts.
Animation description
What I can't manage to do is the progressive revelation of the text by this orange form (the two little bars are important and I want to keep them even if it's more complicated).
I simply don't know what to search on google to find the answer, nor if I should do it with css or js or a framework.
I don't necessarily want you to give me the code already pre-made but mostly a direction to exploit.
Thank you in advance for your answers.
You’ll might want to make an SVG shape, and then use clip-path to create a mask. These two articles work their way up to something like what you’re after:
https://css-tricks.com/clipping-masking-css/
https://css-tricks.com/animating-with-clip-path/
The SVG itself could be animated, or you might animate the clip-path property which is covered more in that second link.
Hope that’s helpful!
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am making a javascript game and I have an obstacle that when it touches the player's image, should take away a life. The problem is that I am currently detecting with the images' rectangles, and there are clear parts so it sometimes detects a collision when it doesn't look like the images are touching. I need a way to detect if the image is touching part of the image that isn't just clear background, like you make an outline of the non-clear part and check if the outlines collide. I don't know if this is possible to do with javascript, but let me know.
I have no good way of doing it fast. You see, if we do that, it will slow down much, as it says here : https://benjaminhorn.io/code/pixel-accurate-collision-detection-with-javascript-and-canvas/. You could make some smaller rectangles of different sizes, to help with more precise collisions.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I want to develop a maze, but the maze is bigger than the screen and i can't scroll down to see it.
I tried to change the height of the body, but that didn't work.
Can anyone see what that makes the maze so big?
here is all of my code on github.
here is how it looks.
Any help is appreciated!
You need to change your layout posting on your HTML body elements. You're using the "fixed" position, and you should be using the "relative" position.
This should explain the difference and get you back on the right path.
Additionally, you can check this for posting.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
I am currently working with a canvas that holds shapes. So I want to be able to keep the shapes size while zooming in or out.
I think that I need to know the canvas scale or the dpi, so I can recalculate the shape dimensions. My questions
Is there better solution for that?
If I am on the good track how can I get the current scale of a canvas? I am looking for something like in the code below.
let scale = ctx.getCurrentScale();.
Thanks for your help.
No long ago I had an issue, and Clemens helped me with that :
Zoom on Canvas, centered on mouse position
take his solution then "play" with it it will help you understand better.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I recently found recently the JavaScript library - tracking.js
Is there any way to detect what div I see now by image or camera?
I have two elements on the desktop, the left and right columns, and I would like to check if I see left div ( with console.log() ) or right div. This library is simple, and I know how to add a script, but I don't know how to detect my eye and detect what element I see.
Maybe there are other ways to detect this.
Thats a bit complicated because you need detect minimal ocular movements and the common webcams, haven't resolution enough, but with some hardware like this project http://pupil-labs.com/pupil/, could do that.
A good solution is tracking.js because this library simulate human behavior with a some algorithms and should be enough to make simple decisions like the columns position.