I'm a complete newbie when it comes to Javascript and canvases and stuff but I have this image (1920x1080) and what I want to do is when someone hovers over the image it tilts.
So if I move my mouse to the top of my image then it would look like the bottom of the image was coming out towards me and the top was going into the document. And if I move the mouse to the right the left side comes out a bit and the right side goes into the document.
Like this, http://www.simpleviewer.net/tiltviewer/app/ just more subtle and not in Flash.
This example is done with JavaScript but I don't know how, and I can't fully read the source and I don't want to rip out the source code
http://mrdoob.com/97/depth_of_field
I have no idea where to start or even how to start, I'm just diving into the more advanced section of Javascript right now so any help/advice would be greatly appreciated.
This is a demo I just made. You can change the value in there.
-webkit-transform: skewX(30deg);
to 40 deg
try hover to the cat image.
http://jsfiddle.net/B8FSb/
Basically you need to understand css transition and css transformation to able to do the demo app you mention.
https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_transitions
Related
I'm trying to replicate this scrolling effect as seen here: http://prm.ooo.
In which the image elements flip and rotate continuously on a scroll as it enters and exits the page, I know this requires jquery/javascript and not just CSS alone.
So far I am able to rotate an image while scrolling.
Does anyone know how I can achieve this?
Here is the code: http://prm.ooo/wp-content/themes/prmo/main.js you can look at the source of any page and try and figure out how they did things. People also use plugins like scrollorama for this type of thing
Someone can help me to realize an attitude indicator like this:
http://www.clker.com/cliparts/c/6/b./2/1223615301572097144Startright_Attitude_Indicator.svg.med.png
I must utilize it inside an web page html and modify the rotation and the vertical move of the background image.
Tanks
I would like to know how to be able to "darken" the image of a html page without darkening the area I selected over that same image, just like this example http://odyniec.net/projects/imgareaselect/ . I studied the code but remained the same. Can someone help me? Thank you!
EDIT:
I was able to darken the body but unfortunately, even playing with opacity, the content inside the div referring to the selection remained faded to.
They are achieving this affect using four different div's to do the darkening. One for everything to the top, right, bottom and left. Don't have time to explain further right now, but that is what is happening on the surface level.
Does anyone know if its possible to flip an image and have content on its back. This is what I mean:
Imagine holding a portrait in your hand. You then flip and look at the BACK of the portrait and the back has writing there. Im looking for something like that, that onClick the image will mirror/flip to the other side which will have writing on it. No 90 180 degree rotation. Its kind of a 3rd dimension rotation. Does anyone know if thats possible? and if so, how?
Thanks
Have a look at the Flip jQuery plugin and its demo or QuickFlip
You could use the scale option in css with negative values. that flips an image.
Then you also have 3dtransforms in css.
Together with javascript they give nice effects.
How do I prevent a user from seeing a certain parts of the page. My goal was to make a huge maze within the browser (so big that the path is big as the width of the browswer screen); the user has to navigate using the scroll bar or any other scrolling method until they find the end of the maze. Making the maze is not the challenge, but to prevent the user from crossing over the boundaries is where I am having trouble.
My thought process is to make objects/areas on the page that block the user from continuing to move in that particular direction. Maybe the user can see 50px of the block/area before he can not go any further? I have never seen this done and I was curious to know if this is even possible.
Thanks in advance. Any help or advice will be appreciated.
Maybe that won’t be that answer you were looking for, but if you have some experience in graphics, you can try to use three.js library to generate the maze with canvas or webgl. You can use point light to lighten only small part of the maze. Other part can have something like “fog of war”.
If you are not interested in canvas/webgl, then you can try to use an overlay png image with transparent hole in it. Width and height of the image has to be screen.height*2 x screen.width*2 (not sure about that, but that is how I see it). That image should be on top of whole maze. It’ll hide whole maze except for that under transparent area. And your starting point should be in the center of that transparent area. Then you need to move that image along with user input (arrow keys, mouse, whatever). Alternatively, you can move maze itself. This way overlay image can have screen dimetions.
These are two option that came to my mind.