This is an example page to showcase how the cwdj parallax directive works. On the page are shown different examples of what the result is and what the configuration was that I used in order to get the effect. Please refer to the introduction page for more information on the installation of this directive plugin.


Example 1 - Basic Parallax Effect

This is how it looks if you just add the directive to an element then give it a width, height, and background-image property in your styles:

HTML:
CSS:

NOTE: Each of the examples are set up similarly as far as the styles go, so this styling snippet will be the only one shown.


Example 2 - Adding Customization

If you want to modify the effect, you can pass in a config object (definition found in the .ts file) that has the properties you want to override.

HTML:

Or define the config object in your component class and just pass the reference through the HTML. The cool thing about this is that then you could use the IParallaxConfig interface exported with the directive to type-check what you're sending it.

TS:
HTML:

If all you're doing is changing one or two things, you can also reference those specific attributes through HTML instead of a config object:

My preference is just use the config object defined in HTML, though I've used the other strategies before, too. Remember that with either of the data-binding syntaxes, you need to make sure that it make sense from a JavaScript standpoint (e.g. strings are strings, numbers are numbers, refrences are refrences).


Example 3 - Watching a Different Element's Scroll

Suppose you want to track the scroll of a different element on the page that has a unique id (such as a scrolling route element on a separate component). You can pass in a string that is the selector for that element you want to track the scrolling of. Now the div below isn't tracking the scrolling of the page, but of the element beneath it, moving the picture from left to right rather than right to left.

Bacon ipsum dolor amet tenderloin pork salami leberkas ham hock pork chop. Doner sirloin capicola brisket hamburger. Filet mignon flank jowl cow turkey ground round. Kielbasa jowl alcatra biltong, meatloaf chicken pastrami swine strip steak doner pork loin jerky porchetta chuck capicola. Tail brisket shoulder capicola doner meatball ham hock.

Rump tri-tip chicken shoulder ball tip bresaola jowl alcatra tongue bacon shank. Beef ribs bresaola frankfurter pork tri-tip strip steak pork belly spare ribs sausage cow. Spare ribs tri-tip ribeye cupim t-bone pig corned beef. Beef frankfurter sausage t-bone, ball tip landjaeger pastrami rump kevin doner. Beef ribs venison boudin turducken shoulder pastrami, t-bone pork loin short loin sirloin. Jerky pastrami capicola pork, chuck biltong cow t-bone tenderloin tail tri-tip shank prosciutto. Corned beef pork belly kevin, bresaola sausage filet mignon swine prosciutto capicola frankfurter ball tip.

Spare ribs salami pastrami fatback beef ribs shankle bacon tenderloin cow ham hock shoulder corned beef short loin short ribs. Ball tip cow strip steak, fatback turkey kevin boudin meatball venison. Sausage salami meatloaf ham hock, kevin ground round short loin shankle beef ribs kielbasa tongue porchetta tenderloin beef. Turducken tri-tip pork frankfurter, kevin ball tip chicken kielbasa. Turducken picanha pastrami ham hock jerky beef frankfurter brisket bacon ball tip cow sirloin. Short loin turkey pork loin beef ribs boudin chicken jerky shankle salami meatball.

HTML:

You could also specify the scrolling element from the HTML via the reference syntax in the template:

HTML:

You also have the 'parallaxElement' option you can pass into the config object as well, if the element you're wanting the effect to apply to isn't the element you're putting the "parallax" attribute onto. Usually, you would put the "parallax" attribute straight onto the element you'd want the scrolling to modify, but the option is open to you. It'd be using the template reference syntax on the element you want it to apply to, however you can't currently pass in a selector of the parallax element. That feature will be added if people request it.


Example 4 - Other "parallaxCss" Options

We've only really been observing examples that affect a background-image, which may be the bulk of what you'd be using the parallax effect for. However, it came to my attention while I was building another website that it would be best if I could use this on other elements as the page scrolls (in this case, I wanted to shrink the header when I was a certain distance from the top of the page). As such, here are a couple of examples modifying other portions of the page:

I move when you scroll!

Bacon ipsum dolor amet tenderloin pork salami leberkas ham hock pork chop. Doner sirloin capicola brisket hamburger. Filet mignon flank jowl cow turkey ground round. Kielbasa jowl alcatra biltong, meatloaf chicken pastrami swine strip steak doner pork loin jerky porchetta chuck capicola. Tail brisket shoulder capicola doner meatball ham hock.

Rump tri-tip chicken shoulder ball tip bresaola jowl alcatra tongue bacon shank. Beef ribs bresaola frankfurter pork tri-tip strip steak pork belly spare ribs sausage cow. Spare ribs tri-tip ribeye cupim t-bone pig corned beef. Beef frankfurter sausage t-bone, ball tip landjaeger pastrami rump kevin doner. Beef ribs venison boudin turducken shoulder pastrami, t-bone pork loin short loin sirloin. Jerky pastrami capicola pork, chuck biltong cow t-bone tenderloin tail tri-tip shank prosciutto. Corned beef pork belly kevin, bresaola sausage filet mignon swine prosciutto capicola frankfurter ball tip.

Spare ribs salami pastrami fatback beef ribs shankle bacon tenderloin cow ham hock shoulder corned beef short loin short ribs. Ball tip cow strip steak, fatback turkey kevin boudin meatball venison. Sausage salami meatloaf ham hock, kevin ground round short loin shankle beef ribs kielbasa tongue porchetta tenderloin beef. Turducken tri-tip pork frankfurter, kevin ball tip chicken kielbasa. Turducken picanha pastrami ham hock jerky beef frankfurter brisket bacon ball tip cow sirloin. Short loin turkey pork loin beef ribs boudin chicken jerky shankle salami meatball.

HTML:

You can see that elements can move about according to the scroll, you can set maximum and minimum constraints, specify a different unit, and use special css syntaxes (in regards to the 'transform:rotate'). Most css attributes work when you plug it in to the parallaxCss property of the config, but you have to make sure it is in camelCase, and if it takes a CSS function (e.g. "rotate(VALUE)", "calc(VALUE)", "translate(VALUE)", etc.), you can add a ":" and the function name without the parentheses and value ("rotate", "calc", etc.). It will construct the values for you.

I would also like to mention that currently, this plugin doesn't support multiple properties being passed in and modified on scroll. It is a possible future feature, but for now, the only way to do it is to pass in another function that modifies it further as I'll explain below. Either that, or you can just write something by yourself to handle that.


Example 5 - Parallax Update Event

What if you want to do something more complex such as change multiple properties or perhaps you need to redirect the element's movement after a certain point. You can subscribe to the update event when you need to.

My background and text color change as you scroll

Bacon ipsum dolor amet tenderloin pork salami leberkas ham hock pork chop. Doner sirloin capicola brisket hamburger. Filet mignon flank jowl cow turkey ground round. Kielbasa jowl alcatra biltong, meatloaf chicken pastrami swine strip steak doner pork loin jerky porchetta chuck capicola. Tail brisket shoulder capicola doner meatball ham hock.

Rump tri-tip chicken shoulder ball tip bresaola jowl alcatra tongue bacon shank. Beef ribs bresaola frankfurter pork tri-tip strip steak pork belly spare ribs sausage cow. Spare ribs tri-tip ribeye cupim t-bone pig corned beef. Beef frankfurter sausage t-bone, ball tip landjaeger pastrami rump kevin doner. Beef ribs venison boudin turducken shoulder pastrami, t-bone pork loin short loin sirloin. Jerky pastrami capicola pork, chuck biltong cow t-bone tenderloin tail tri-tip shank prosciutto. Corned beef pork belly kevin, bresaola sausage filet mignon swine prosciutto capicola frankfurter ball tip.

Spare ribs salami pastrami fatback beef ribs shankle bacon tenderloin cow ham hock shoulder corned beef short loin short ribs. Ball tip cow strip steak, fatback turkey kevin boudin meatball venison. Sausage salami meatloaf ham hock, kevin ground round short loin shankle beef ribs kielbasa tongue porchetta tenderloin beef. Turducken tri-tip pork frankfurter, kevin ball tip chicken kielbasa. Turducken picanha pastrami ham hock jerky beef frankfurter brisket bacon ball tip cow sirloin. Short loin turkey pork loin beef ribs boudin chicken jerky shankle salami meatball.

HTML:
TS:

In this example, I made the parallax-enabled header change depending on the current scroll of the div. I can see many advantages of this, but ultimately, that means that you're on your own about this.


Final Thoughts

There are some other considerations you should have when you use this that I'd like to mention before I am fully done with this test page. First is you have to be careful how many properties you send into the ParallaxConfig via the html route. By default, Angular does not allow more than 9 properties defined in the html, and as such if you have a really large, complex ParallaxConfig object, you need to define it in your component's class.

The function scrolling handler in this directive are run synchronously. If you use the update event binding, make sure to not use any hefty process in the provided functions, as it can cause some negative effects on your page, and in the end gives the user a bad experience. The lighter you make everything and the less you use the parallax effect on a single page, the better off this will be.

If more interest is given, I may also include some element placement detection so if the parallax element is not in the viewport, it will ignore scrolling until it's back on the page. That can be a bit complicated, and there would need to be a way to cancel that effect if you need to (such as if you're doing something fancy with the update event). Feedback on this idea would be greatly appreciated.

Feedback and issues are very helpful in the development of this component. It will be kept up-to-date with the development of Angular as much as possible. If you'd like to see this directive in another format, post an issue for it on the GitHub page, and I'll do my best to work on it and get back to you. If you'd like to help with the development of this directive, feel free to send me a message or email and I can add you as a collaborator or just send a pull request out.

Above all, thanks for showing interest in this project!