Introducing......Parallaxer

Classic Stacks
1

Hi All,

I’m back with a new stack: Parallaxer!

It sounds like a wrestling move but is, in fact, a super simple way to add the stunning parallax effect to images on your web pages.

Parallaxer allows you to set the parallax ‘direction’: up, left or right. You can also control how bug the effect should be by ‘scaling’ it.

Parallax images work beautifully on their own adding a really great effect. With Parallaxer stack you can however also opt to add content on top of the images. You can add this to one of 5 areas (centre, top-left, top-right, bottom-left and bottom-right).

The best way to see all that I am talking about is to see it in action. You can do that here: https://shakingthehabitual.com/stacks/parallaxer/

If you like what you see then until 20th June you can get 20% off by using the code sth-parallaxer-launch.

All comments and feedback appreciated.

Hope you like it :slight_smile:

8 Likes
2

Looks Promising, thank you.

1 Like
3

Hi All,

Thanks to everyone that has checked out/downloaded Parallaxer. Just wanted to update with a couple of points:

There’s a nice review from @mabinogion that points out a couple of key things that I should probably have mentioned when introducing the stack…

  1. Parallaxer works really well on mobile devices. Many parallax stacks/effects are disabled on mobile but Parallaxer uses really lightweight code that is great for all devices. Try it out on your mobile to see!
  2. Unlike many other (if not all!) parallax effect stacks/plugins, Parallaxer works its magic on foreground images (as opposed to background images). This is great if your image content is important/meaningful and you want to be adding Alt tags etc for SEO and accessibility. This isn’t something that you can do with background images as they are classed as just decorative elements.

And finally, I have now added a downloadable project file so that you can see exactly how I have set up the stack to achieve the various effects. You can view the published version of the example file by hitting the link in the Project File section of the Parallaxer web page.

6 Likes
4

Great Stack. Thanks!

1 Like
5

Looks interesting! And good to know more stacks developers :slight_smile:

1 Like
6

Looks great - will investigate this more. Plays nicely with Foundation?

7

Hi @manofdogz - Thanks for checking it out. Yes - plenty of folk using it with Foundation.

Also - I may as well just mention while I am here that I’ll be shipping another update later today that will add the ability to set the fill mode to ‘cover’ (currently the default is ‘contain’. This has been requested by a couple of users so that they can set the image to cover the full screen on all devices (e.g for when using as a full-height banner).

2 Likes
8

I purchased Parallaxer a few days ago. Looking good! I was wondering if it would be possible to add a hyperlink to a Parallaxer image?

9

Hi @Mysterion - yes. good idea! I’ll try and get that added in the next update. Parallaxer uses normal/foreground images so that makes this possible.

At the minute you are able to add some content above the image (a button or a hyperlink etc) that could take the person to a new page.

1 Like
10

Hi All,

I have just pushed out v1.2 of Parallaxer stack with a few great additions:

  • Option to add a delay to the parallax effect so that when the user stops scrolling the image continues to move a little. This is a really nice effect!
  • Option to add a link to an image
  • Also, have added the missing direction of ‘down’! So you can now choose to have the parallax effect work in any of the 4 directions (up, down, left and right)!

You can see examples of all of this on this example project page.

Enjoy :slight_smile:

5 Likes
11

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.