Synchronized Scrolling Demo

[ALsp]

In my opinion, true parallax effects are impossible without video, massive amounts of highly specialized images, and/or extremely bloated markup. So, we crafted a faux parallax page using minimal markup and simple images and called it something else

http://www.projectseven.com/products/tools/pch/showcase/doo-wop/index.htm

Enjoy... or not.

[B i r n o u]

what do you mean by "... true parallax effects are impossible .... " ? please could you elaborate ?

[ALsp]

Not really, it would take a book.

[Jon Fritz]

Actual Parallax requires the observer to view something from multiple angles and applies to the apparent movement of an object from angle to angle. A quick and dirty parallax demo would be to hold a finger at arm's length in front of a computer screen. Close one eye then switch eyes back and forth. The apparent movement of your finger (jumps quickly left to right) when compared to the screen (only moves very slightly) compared to the wall behind it (doesn't at all) is true Parallax.

I think Paula hits the nail on the head, it probably sounded good when the designer came up with "disproportionate scroll speeds on multiple html elements" and they went with Parallax as the name.

[pziecina]

https://forums.adobe.com/people/Jon+Fritz+II  wrote

"disproportionate scroll speeds on multiple html elements"

I think I would be scratching my head if someone asked how to do that.

[B i r n o u]

https://forums.adobe.com/people/Jon+Fritz+II  a écrit

I think Paula hits the nail on the head, it probably sounded good when the designer came up with "disproportionate scroll speeds on multiple html elements" and they went with Parallax as the name.

thanks Jon for your brief explanation, it was clear enought...  so what Paula describe is what parallax.js is suppose to do

http://pixelcog.github.io/parallax.js/

[ALsp]

Hi Birnou,

It's a very complicated issue. A parallax effect is design-centric. You need to first create the "stages" then you need to script the action,,, and the script relies on what the designer puts on the stage - or behind the curtain. A very good studio can easily create a parallax effect cinematically. Doing it for the web? Not so easy. And if a script or a plugin claims to do "parallax" I believe they are either not aware of what it entails to do parallax or they've staged a specific scenario, using carefully crafted images, many container DIVs, all of which are obviously not part of the plugin and that would typically be near impossible for the average web designer to pull of.

[B i r n o u]

thanks for your time, but that doesn't explain anything about what is a true paralax... except saying

"... You need to first create the "stages" then you need to script the action,,, and the script relies on what the designer puts on the stage - or behind the curtain... " I must admit that this desciption is really... and I say really... descriptive...

sorry my english is too low...

It remind me when politician try to explain what they do and why they do ....

[pziecina]

There should be a french language version of the Wikipedia page, but I cannot find it, (keeps defaulting to the u/k page).

https://en.m.wikipedia.org/wiki/Parallax

The small video on the r/h side does illustrate a real parallax effect.

[B i r n o u]

thanks Paula for the link.. well looking close to the video on this page is not so far from the plugin result... whell vertically instead of horizontally... but more or less that does the job

Parallax.js | Simple Parallax Scrolling Effect with jQuery

[pziecina]

There is a big problem with using that plug-in, here is the message I have on my iPad -

"Notice: Hello mobile user. Unfortunately, this parallax effect is not reliably achieved on mobile devices, so all you will see on this demo page are static backgrounds. Please visit this page on a desktop browser to see its full effect."

Now that mobile devices account for over 50% of internet browsing,!

[W_J_T]

By the same notion, many people have considered the use of background-attachment fixed, to be poor man's parallax-esque effect over the years. So it might be somewhat deceptive to some unwitting viewers, when looking at AL’s demo thinking that is also somehow part of its abilities. When it’s not nor does that aspect of the page work on mobile either.

@AL, why the absence of using requestAnimationFrame instead solely opting to use intervals and timeouts? Also the state management seems a bit weird the way the animations replay as they do.

[ALsp]

By the same notion, many people have considered the use of background-attachment fixed, to be poor man's parallax-esque effect over the years. So it might be somewhat deceptive to some unwitting viewers, when looking at AL’s demo thinking that is also somehow part of its abilities. When it’s not nor does that aspect of the page work on mobile either.

We do these showcases, usually in two parts. First we show it, then we announce it to our customers as a tutorial, in which case background-attachment and how it effects background-size on mobile devices would be explained and a simple media query written. Perhaps I should have done that on the initial showcase demo to prevent confusion. In any event, you can see it on a phone now without the gigantic pixelated effect:

http://www.projectseven.com/products/tools/pch/showcase/doo-wop/tutorial.htm

I wouldn't call it a "poor man's parallax". Perhaps how I initially described the entire scope of the issue in that true parallax is nearly impossible, should clearly indicate that I am, by no means, presenting this as parallax scrolling - poor man's or otherwise The widget works with or without the need to fix background images. You also need to understand that our extensions are far more than code "ploppers". This one, in particular, is a tool whereby you can select an element on your page and "orchestrate" an animation effect. You can do as many as you want, coordinating the timing into a staged show. Just look at the other examples... and/or the user guide.

I'll ask my partner, Gerry, for a more complete explanation of the timing mechanisms, but the way it is programmed was carefully considered in terms of browser support and smoothness.

Let me know if you'd like more information or you are more than welcome to email us directly.

[ALsp]

Let me know if you'd like more information or you are more than welcome to email us directly.

I wanted to give you more insight into what we're doing, because your questions were actually good. Panache animations, except for the Typewriter effect (which is not being used on the page in question) are actually just script-triggered CSS animations. The user can actually edit the CSS at any time to alter the effects if they are capable. So the timeouts and intervals you see in the script are simply triggering mechanisms which should be managed the way we are managing them. You should take a look at the clear timer function for a better understanding of what we are doing.

Because of the nature of jQuery, for instance, which is a script only, animations are usually handled in a much different manner - out of need and because it is only a script. In our experience, using pure CSS to animate our widgets has yielded much smoother animations than is usually possible with jQuery. Of course, there are many other variable and factors at play, but this is our experience.

Thanks for the discussion, by the way!

[W_J_T]

Thanks for the followup AL.

The poor man's reference was regarding fixed backgrounds, not anything to do with your extension or approach.

I had seen Panache was managing and cleaning the timers, using an in view mechanism to apply predefined classes via data-attributes etc. But admittedly I only briefly looked through things. I didn’t take time to wade through all the var, func, obj, prop, etc., PVII naming conventions to piece it all together when quickly scanning through things. ;—)

But I would add, many times with window scroll events, even when simply applying classes when items come into view its more performant to use requestAnimationFrame along with either a simple debounce or throttle. But if you are targeting older browsers you can only do what is available. You can’t get all will-change, intersectionObserver, etc., unless you want to polyfill and write the crap out of possible fallbacks. ;—)

So I was not in anyway referring too or implying the current approach as being non-performant, it seems nicely put together. Was just me being inquisitive, so thanks again for the followup(s).

[ALsp]

Just remember, the timers are not timing the animations, simply the triggering of them. The actual animations are in the CSS dimension. But it was my pleasure to explain - as best I could. Good questions are as hard to come by sometimes as good answers

[B i r n o u]

it seems that the 6.5 version of Layer Slider handle parralax correctly on mobile... any way it has to be tested and for 15us$... it is not expensive at all... don't you think ?

https://layerslider.kreaturamedia.com/

[ALsp]

Birnou,

Aside from hijacking my topic, the animation in "layerslider" is horribly choppy. If that doesn't matter to you, then I guess that's fine and simply means that we have different concepts of quality, or perhaps a different suite of test systems.

[BenPleysier]

I don't see it as hijacking, just offering a different solution as so often happens in this forum.

[ALsp]

BenPleysier  wrote

I don't see it as hijacking, just offering a different solution as so often happens in this forum.

This topic was not a question. It was a demonstration. Hence, a solution is actually an answer to a question never asked.

[BenPleysier]

So, are you insinuation that we should be 'muzzled'? Are we suddenly to dance to your tune? Please be realistic.

[ALsp]

I really think you are a smart guy. So, I'm a little baffled by your responses.

[B i r n o u]

ALsp  a écrit

Birnou,

Aside from hijacking my topic, the animation in "layerslider" is horribly choppy. If that doesn't matter to you, then I guess that's fine and simply means that we have different concepts of quality, or perhaps a different suite of test systems.

Al,

in the hope that my Franco-English approach to dialectics specific to this forum will not be interpreted in a tone that could be offensive...

First of all, I don't understand your reaction on three points....

1 - it seems to me that the starting subject was based on parallax effects and I was quoting layerslider for its parallax possibilities when answering to Paula... but note that I could also have quoted http://creativeslider.demo.offlajn.com/index.php/parallax-slider or https://revolution.themepunch.com/parallax-scroll/

2 - in what way do I hijack YOUR subject... here too I question about the notion of ownership of the subjects or the debates they generate... perhaps it's because I'm french, but I perceive this as an exclusivity of speech... but I also question about the notion of hijacking when proposing alternative solutions... is it diversion or a deepening of the subject?

3 - what do you mean by 'is horribly choppy'... well it's true that this is not a reference (see the thread on the recognition of expert trainers)... but on code canyon only ... layer slider represents 88000 sales, 9500 comments, with a score of 4.74 out of 5 for a panel of 3000 voters?... we should perhaps inform everyone there that layer slider is horribly choppy, don't you think ? https://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin/1362246

I would add

by seeing your recommendations, should I deduce from them, that before posting the opening to a parallel debate of the original post, we should have your approval in order to validate its relevance?

as well as

- when we propose a link to a library to ensure that this library is not too verbose, nor obsolete as for its algorithm, and that it remains in your eyes a quality reference,

- both when we point to a course or tutorial to verify with your expertise that these course(s) are of sufficient quality and especially provided by an expert other than those defined by Adobe

- and that's not to mention the plugin products marketed which, despite their immense deployment on the web (which I concede is not a guarantee of quality, but just of propensity) must also receive your approval....

so do I have to conclude that before posting, anything on this forum, we should first send you a draft, so that you can give proper approval in the form of a publication... a good to print in some way

I hope you will have understood that I am not polemical, and that I only relate facts and the feelings that flow from them. So, that I wonder about the last exchanges and try to understand what I have to conclude from them. Thank you for your attention.

[ALsp]

Simply amazing.

I'm not sure about your approach to "dialetics", but I'm fairly certain of what you're doing. In American English, the term is piling on.

I sought to initiate a discussion of the word parallax, as it relates to web pages design, and how it might in fact be impossible to do a true parallax effect. That's it. Not one of the ACPs who have posted remarks here has been on-topic, with the most egregiously off-topic remarks coming from you.

So my conclusion is either none of you understand, none of you really care, or all of you simply want to attack. Piling on.

Goodnight and thank you for giving me a big smile before bedtime

[pziecina]

I do agree with ALsp Birnou, in that what many define as parallax as used in websites, has very little to do with parallax, if anything. It sounds good is the only conclussion I can make when parallax web sites are mentioned.