Viewing parallax scroll animation
parallax scroll animation
|
User: Michael S. 12 years ago
|
|
|
A new trend in enlivening the experience is parallax as seen on Squarespace and Adobe Muse. Many examples of this feature is overdone and taken to the point of being silly, but I'm looking to find a more restrained implementation and use it to smoothly scroll navigation transitions. So, I'm wanting you to concider some level of animation activated by scrolling. Thank you for your consideration. |
|
|
User: Roddy 12 years ago
|
|
|
CSS transitions can now be used in most cases since they are implemented in the latest versions of all the major browsers. Can you give some examples of the type of transitions that you would want to use? Here's an example of a drop down menu with different transition times applied to four different elements which illustrates a few of the many possible effects. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jumbo T. 12 years ago
|
|
|
I don't think your menu is what the OP is looking for : http://marquee-demo.squarespace.com/ http://onepagelove.com/tag/parallax-scrolling |
|
|
User: Roddy 12 years ago
|
|
|
Oh, I see. I took it that the OP thought these were too fancy and wanted to apply the technique to hyperlinks to create smooth transitions. If you are into using keyframes with the transitions, here's a demo of a simple one that I did for a client a couple of years ago... http://ezmacwebdesign.com/Demo/CSS-Sliders/cloud-slide-in/index.html It's also responsive as you can see if you adjust your browser width. I didn't bother with an app for doing it since there wasn't much demand for this type of thing back then due to lack of browser support. Things have changed a lot since then. These are not a beginner level project. It would be a lot easier to use something like Hype to create them and then use code injection to insert them into EW. You would need to be creating quite a few of these to justify the cost of Hype. There is another app which, in some ways, is better the Hype and is free - Radi. Simpler effects would be fairly easy to implement in EW and I have some widgets for these on the back burner. Here's some examples of what can be done with simple transitions without using keyframes. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Michael S. 12 years ago
|
|
| Jimbo T. has the right reference. I was thinking that animation effects that are triggered by scroll motions would ad interest and the ability to add a little creativity. The disolve motion Roddy demonstratetes is interesting and has promise but is limited. I'm working on the idea in Tumult's Hype, but am unsure about its compatability with Everweb. | |
|
User: Roddy 12 years ago
|
|
|
Inserting a project created with Tumult Hype into EverWeb is very simple since it only requires a styled div sized to suit the project and a reference to the Hype JS file. Hosting the files generated by TH are another matter of course. An alternate is to export the project as an MP4 and use one of the video widgets to insert it into EverWeb… http://everwebcodebox.com/widgets/mp4-video.html http://everwebcodebox.com/widgets/video-js.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
| Post Reply |
| You must login or signup to post. |