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.
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
I want to get like a jQuery UI effect that flips a div.
An example would be clicking "forgot password" on this site:
https://drive.jolicloud.com/welcome
You will notice the whole signup div flips to the back of it.
How would I achieve this effect?
They are using Flippant, very simple and cool. Its mostly based on CSS transform effects and animations.
I highly recommend this option over the use of a jQuery plugin if you just want to flip things back and forth.
Not sure if this should qualify as an answer or comment, but check out http://lab.smashup.it/flip/ . I think the amount of code required to create a cross browser flipping effect is a little too much to ask without trying yourself and getting close
For a very simple and crude flip effect, you could just animate the width to zero, swap the content, then animate the width back to its original value.
This is a simple animation using CSS
http://davidwalsh.name/css-flip
Basically you create a front and back div in a container. Rotate the back one 180 degrees over the Y axis. When you want to flip, you rotate the container 180 degrees. Add smooth transition and your done.
I have a background image, like a map, with a road. The road is not straight, it also has some curves on it.I want to do something similar with the attached link, but like I said, on a road that is not straight. I tried some existing scripts, like jQuery Scroll Path, but this is based on background rotation around the object that you want to scroll, and I don't need it this way. If you can give me some suggestions on how to make it happen, I will appreciate.
Thanks!
Maybe this could be something for you
http://forum.jquery.com/topic/new-plugin-jquery-crspline-animates-elements-smoothly-along-arbitrary-length-sequences-of-waypoints-in-2d
there you set positions and the element will follow
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
There are many of us looking for a Javascript/CSS3 solution that can provide a windows7-like UI within a webpage, without using flash.
We need an Opacity mask, rounded borders, and a Blur...
We've got the Opacity and the rounded borders, now we need to be able to apply some Blur effects to a semi-transparent Div.
I tried the BlurFast effect from the Pixastic Library, but it only blurs the actual image, not the background we are seeing trough the image...
Basically, we want a Div to act as a Blur Mask over other contents...
If someone actually succeeded with this, i'll be glad to know its possible :) Thank you
http://t.co/fFLPKnzC
very good article on blur showing the state of the art
sadly "masking" parts of your page, that blur everything behind, is not that easy.
maybe the suggestions in ths blog help you out, as they are very straight forward and from a totally different direction..
therefor to embedd html within svg and use svg-filters on html elements later on
Thought this could be relevant: Aero
Personally, I think the fact that the author states this to be "In other words, one of the most messy and most ineffecient implementations ever"... AND that he can onlt get the effect to work in a single browser... to be extremely telling.
There is no way to do this efficiently or cross-browser at the moment.
The only way you might be able to do it is by using Pixastic to create the blurred image within Canvas, export as dataURI, then use that image as the background for your div. If the div moves, then the positioning of the background-image should move accordingly.