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'm creating photo slides using simple scrollbar method but also adding js for left and right button to make it flexible to view slide horizontally.
Scrollbar is working just perfect but the bellow buttons doesn't seem to show any action. Can someone please guide me what's wrong in the coding? TIA
Here's what I am talking about: [https://jsfiddle.net/sh27dyx3/1/]
scrollbar doesn't set $("#slide").left. jQuery's offset().left is just clever enough to tell you what is its offset. you need to update the parent's scrollbal scrollLeft property
https://jsfiddle.net/txth2usk/
by the way, i guess you could determine what image is at the leftmost position and then instead of -100 and +100 you could scroll to the next/previous sibling's offset, would be much cooler
In this 404 page, I can see the stars particle is moving as the mouse moving in different locations in the browser. I have no idea how to call this effect.
Can anyone provide a hint of the name of the effect and what is the right tool and how to achieve this? Thanks!
The stars and every layer on that example are not particles. They are fixed images using Parallax effect as you can see on the elements that compose the page under the div#container_layer.
This effect can be achieved from various ways. The most common, responsive and best optimised solutions use JQuery, such as this one: http://wagerfield.github.io/parallax/
Basically the way this works is by using a number of layers and incrementing or decrementing their absolute or relative position based on the mouse's co-ordinates.
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.
Google has the coolest effects - once it was a Pac-man game, today is apparently the 160th anniversary of the first World Fair, and Google's logo has an image of it. They also turn the mouse into a magnifying glass that can sweep over the picture (the gold ring).
I'm wondering how they do that. It's obviously Javascript, and I looked at the page source, but it's not especially readable (no surprise).
Looking at their source code, it seems they are using rather basic techniques to achieve this.
Ignoring all the embedded nifty animated gif's, there are basically two images - large, and small of the entire scene. The larger image is repeated thrice in the document. Look at the annotated image below to get a better idea of how the zoom works.
The portion inside the magnifying circle is split up in three div's - top, mid, and bottom. The overflow for each div should be hidden. Each div is relatively positioned inside the zoom circle. On mouse move, change the absolute position of the zoom circle to the mouse coordinates. Their example also uses CSS3 for the scaling and adding some animation delays.
Here's a sorta minimal reconstructed example.
Another example where we don't hide the div overflow to reveal the entire thing as a square.
Well, firstly, for anyone who wants to use such an effect, there are loads of jQuery plugins. Here are just a few:
Power Zoomer
Featured Image
Zoomer
Cloud Zoom
Secondly, it's quite easy to achieve. Just load the full-size image, but give it a width smaller than it's actual width, so it is scaled by CSS. Then, use JavaScript+CSS to create a Div (the magnifying glass) with the same image as background, but change the background-position property to the corresponding scaled x,y coordinate that the user's mouse is currently on.
There are other ways of doing it I suppose, and Google might be doing it differently, but this is the most obvious way for me that comes to mind.
Visit http://codeblab.com/glass/ for an real life example and in depth explanation of this technique. Flash and CSS v3 have ample functionality to construct a round magnifying glass.
However, simulate-a-circle-with-overlapping-rectangles works on (many) more platforms.
(DISCLOSURE: codeblab.com is my personal hobby blog with some weak links to my work in The Netherlands.)
There is a full example of magnifying any sort of HTML, including HTML5 at http://www.aplweb.co.uk/blog/js/magnifying-glass/. Works cross-browser too - although rounded corners are a bit iffy on most browsers - so you are going to have to use a box rather than circle.
Here is how to works:
Duplicate the content you want to zoom
Place the duplicated content into another element and set the visible width/height and overflow hidden
Use JavaScript to move the duplicated content so that it moves by the zoom amount * mouse movement. Also move the visible div by the mouse movement.
That is pretty much it too it. There are lots of little things to look out for though to make it work on all browsers.
I don't know how Google does it, since the logo is no longer showing in my area; but this effect can be achieved by clipping the enlarged animated GIF over the regular image using canvas. Alternatively, it is also possible to create create a circular clipping using CSS border-radius (commonly used to implement rounded corners).
EDIT: I've hacked this up together to show the basic technique that you need if you used CSS border-radius: http://jsfiddle.net/yjBuS/
Looks like they're using two images, one for the logo and one for the zoom (the zoomed one is actually sliced, to run the animations separately...?) They probably detect if the mouse is over the normal logo, then show the yellow circle and attach it to the mouse position. Then showing the other image, shifting it opposite of the mouse. Or something similar.