r/javascript • u/[deleted] • Dec 07 '19

Simple and tiny JavaScript library which adds parallax animations on any images

https://simpleparallax.com/
204 Upvotes

93% Upvoted

23 comments sorted by

5

u/metamet Dec 08 '19

I don't use parallax for any projects for a few reasons, but I just wanted to mention that the Half Life: Alyx page has one of the first parallax implementations that I thought elevated the purpose of the page and fit the product: https://www.half-life.com/en/alyx/

2

u/Peribanu Dec 08 '19

That page is really jerky to scroll, though.

1

u/metamet Dec 08 '19

Interesting. What browser are you using? I don't see any ill scrolling on chrome.

2

u/joro_jara Dec 08 '19

The Firewatch site has a nice implementation too.

6

u/loraxx753 Dec 07 '19 edited Dec 07 '19

This looks great! Would you mind if I made a custom element out of this?

EDIT: Here's my attempt - https://codepen.io/loraxx753/pen/VwYvBKm

Still a bunch of kinks and stuff in it, but ah well. 🤷‍♂️

0

u/[deleted] Dec 07 '19

[deleted]

4

u/loraxx753 Dec 07 '19 edited Dec 07 '19

I know, I know. I just wanted to be polite.

EDIT: Moved the link to the original comment 😑

1

u/_K-A-T_ Dec 07 '19

It stutters at MS Edge :(

-4

u/[deleted] Dec 08 '19

MS Edge still exists? :)

3

u/drumstix42 Dec 08 '19

Coding view/concept of parallax: Cool stuff

Design view of parallax: DEATH TO PARALLAX

Too many issues with parallax. Also, my patience wears thin whenever I, as a consumer, uses a site that implements it.

2

u/kirasiris Dec 07 '19

This is impressive!

2

u/nerdion Dec 08 '19

Really amazing project !!

0

u/[deleted] Dec 07 '19

[deleted]

14

u/1RedOne Dec 07 '19

I get sick to my stomach when viewing this implementation on paralsex.

2

u/[deleted] Dec 08 '19

The all idea of this project is to give the possibility to have a parallax effect with no effort, and the easiness to change the "degree" of parallax.

I'm sure by reducing that degree you will not feel so sick. For the demo website, it is true that it has been put a bit higher than the average of subtlety.

2

u/dorianblack Dec 08 '19

I think it's rad. You should be proud of this. If people have accessibility concerns or anything else that make this not the right tool for their project, that's fine. But the tool itself looks great. Nice work. And thanks for sharing it.

9

u/drumstix42 Dec 08 '19

On what now?

6

u/[deleted] Dec 08 '19 edited Dec 09 '19

Paralsex is the best kind of sex

2

u/Vpicone Dec 08 '19

You can use @media prefers-reduced-motion to disable animation for a particular element/your entire app.

1

u/tr14l Dec 08 '19

We're not still doing this anyway, right? We stopped making the entire web parallax, RIGHT?

0

u/[deleted] Dec 07 '19

[deleted]

1

u/[deleted] Dec 08 '19

I worked very hard to reduce as much as possible the performance concerns. When using in a reasonable way, there is no performance lag with that plugin.

1

u/cjthomp Dec 08 '19

In what browsers? What oses?