Looking to create a scrathie ticket effect in javascript where a block is presented and you with the mouse) click and drag to reveal the image behind
Am determined not to use Flash
This is the best I could find so far in terms of an example script
http://www.siteexperts.com/tips/styles/ts37/page1.asp
Anyone know of a better more 'scratch-like' example with code?
Best bet would be to overlay a canvas over something, and scratch away the position of the mouse pointer.
jsFiddle.
Related
This is a question that comes up quite frequently when I'm building sites. I've never come up with a solution but I thought maybe some smart SO contributer might be able to work it out so here goes:
Say I have a large full page background image with background-size:cover. I want a specific part of the image to have a hover state e.g. Say it's a large picture of a car driving on a mountain. If you hover over the car I want it to be replaced with a glowing car.
One way I could do this is to use javascript to replace the whole background image for the same image of the mountain scene but with a glowing car. But obviously this requires an additional large image download. (As in this example).
What would be better would be for me to have another div that covers the car and just assign a new background to the inner div which is perfectly lined up to the parent image.
This is straightforward to do in an unresponsive way (see this example) but I can't think of a way to do it with a responsive background-size:cover image.
It feels like there might be a solution, possibly using object-fit or something. But nothing springs to mind. Here's a responsive version of the pen (which doesn't work but demonstrates my desired set up).
Can anyone think of a way of acheiving this? What other techniques could work here?
Thanks
Have a situation that I am trying to figure out the best approach.
It consists of an image, then peg's pointing off reference points of the image w/ labels. I am attaching an image as an example.
I have not mocked up code yet, still debating the best approach so I was hoping to get some input from the community.
Thoughts:
Static use of top/left positioning: Issue there is this needs to be responsive. As the image scales, we lose accurate placement
Javascript: Could try n use javascript to calculate the positions using ratio'd equations and jquerys .postition()
SnapSVG (or similar), This is what I am playing with right now, create the lines/circles with snap and animate them in. I've never used it, so there is a learning curve.
Would love to hear some thoughts! Thank you
I'm currently doing a project which is an interative website for a "company". My idea was to use an image of the company room, where they work and use it as the background for the website. The problem is that i wanna do it like a point and click game, where i move my mouse and as soon as I step into something it will pop up information about that something. For example, a written board at the bottom right side of the picture talks about a meeting they are doing, so as soon as my mouse goes over that board it would pop up something talking about that meeting. My difficulty is that i don't know how to "split" the image into those small things (the board, the 3 desks, the posters on the wall...).
The idea is to use an html base and use JavaScript auxiliated by jQuery.
Any help would be appreciated :)
PS: can't post the image because I still don't have 10 reputation.
This link has pretty much example what you want. You can use css :hover on the areas to detect when the mouse moves over them.
Hope that helps!
I just noticed that if you drag anything on facebook, no matter it's a link, or image, or pure text, the update status part changes to a box saying Drag Links/Photos Here. I'm wondering how to implement this functionality? Or in other words, how to detect that the cursor is dragging and do any subsequent change of a particular element on the webpage?
Perhaps HTML5? The following links should help you understand how to implement drag and drop with html5. You might also want to check the second link which implements drag "anything".
http://www.sitepoint.com/html5-file-drag-and-drop/
http://html5demos.com/drag-anything
what you could do is in the drag function that Mike linked just add JavaScript to change what you want. something here might help.
I have a small problem with how should i think a... problem. I want to do something somehow similar with this: when you move mouse near to the edges, you will see images scrolling faster than how is scrolling when you have the mouse in the midle of the DIV.
Don't know if i explained right, but ... i don't know how to tackle this. I'm sure that is binded on mousemove but also i guess is somehow related to math. And math isn't my best skill :D
Thanks guys!
Unfortunately there's not much more to tell you than what you can already read in the source code of the site you linked from line 59 onwards.
I'd likely recommend simply trying to duplicate something similar within your own sandbox page using that code they have as a guideline. Simply strip out everything you can and just start with a single image, bind the mousemove event and try and get relative positions using offset (see jquery - offset).
It's a pretty nice implementation of the new canvas tag though, I haven't seen it used much yet, so thanks for passing on the link. I can at least offer you some interesting links on the canvas tag that might give you a few pointers.
This is an old question, but you can calculate a procentage based on the distance between the mouse position and the edges. Then use that procentage to set the speed of the animation.