cyrilf / cyrilf/cyrilf.com

Parallax effect

Open
#4 0 comments 0 reactions 0 assignees View on GitHub
enhancement
Dominant language
Vue
Stars
1
Forks
0
PR merge metrics
No merged PRs in 30d

Description

Try to implement a pure CSS parallax effect on the leaves.

See the commented code in the CSS file, the effect work already in Chrome.

:one:

But there is one issue, it creates an invisible horizontal scrollbar.
So the site can be scrolled, need to find out why and fix it.

Playing around with:
```
.parallax {
perspective-origin-x: 100%;
}
.parallax__layer {
transform-origin-x: 100%;
}
```

might help. See [this reference](https://keithclark.co.uk/articles/pure-css-parallax-websites/)

:two:

In Firefox, the `translateZ` and `scale` doesn't seem to work at all. The `perspective` neither.
So more tweaking is definitely required here.

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.