Here’s an old school version of 3-D rotation.
In terms of motion, this is a very low-resolution example, made of a grid of 25 rollover elements – five horizontal angles and five vertical angles. The greater the density of the grid, the smaller the shift in rotation angles, and the smoother the animation.
Note that it begins with an invisible photo and the triggering of a fade-in timeline. For easier viewing, set the opacity in the main timeline to 100%.
Photo Rotate Animation.zip (141.0 KB)
I’m trying to do something similar with rollover elements. I think there’s a better way than the technique you’ve employed, because the movement is very jerky, and I don’t think the answer is, or it’s practical to, make more rollover elements. If I’m able to figure out a template to share, I’ll post it. I’m currently trying to make an image move in the inverse direction of the position of the cursor, using 15 rollover elements, inspired by the top of the page parallax effect on this page: http://kennedyandoswald.com/#!/premiere-screen
The goal is to have the movement be as smooth as in the linked example. The parallax effect seems to be created simply by having the text and other elements move at different speeds and different distances than the background of the two men (cut out from bg) and the bg.
As I said, this is old school. It is definitely a kunky, mechanical way of doing it.
The proper way to do this is to use Javascript that tracks the relative mouse position and calculates the angles on the fly. I could do this in Lingo in the old days, but I never made the transition to JS.
I assume that Hans or DBear could figure out the JS.
The catch is that people want to click and drag. One can easily create a huge invisible object and make it draggable. I haven’t done that in this instance.
Attached is a simple 2-D example that can be used to control the operation of a window shutter by dragging or clicking.:
ShutterOperation.zip (3.0 MB)
Regarding the inverse motion of parallax, this can be done through nested containers with animating opposing relative positions of content. It can also be done to force objects to cross over when changing the width of the browser window.
Very basic manual parallax: DragParallax.hype.zip (14.3 KB)
Yes, nice example. I’m attempting to do that both with rollover/mouseover and flexible layout, inspired by that link to the Kennedy movie site. Did you take a look at that page, the top of the page with the photos of the actors. I’m trying to do everything that slide shows, before you click or scroll, in Hype, using only drag and drop rather than JS. I laid out five rollover tiles/rectangles in a top row, five in a middle row, and five in a bottom row. I tried three timelines, with pause timeline keyframes, with each rollover tile triggering a continue timeline action, but this caused jerky motion. I’m attempting another variation with separate timelines for each tile. But before I put that into effect, which is 15 timelines, I’m still playing around with making the invisible rollover tiles, and the content of actors, background, and text, all behaving like the inspiration when resizing the browser window. I keep getting it close but not exact. I imagine that it’s possible to get it exact with the right settings in Hype.
@TYancy Here is that first fairly successful test I created with my concept for creating a parallax effect that’s got smooth-ish motion, with 15 rollover tiles. I’d made something similar awhile back where the ball followed the cursor, so in this case, I made the direction inverse. Give it a spin, let me know what you think.
Substitute an image for the circle, and it’s getting close to the Kennedy movie parallax effect. Adding multiple elements, like the text in the movie page effect, that move differently than other elements and it’d be like your drag example.
Parallax_Test.hype.zip (27.0 KB)
Thanks for your creativity.