Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add parallax effect to the header #21

Merged
merged 4 commits into from
Nov 1, 2023
Merged

Conversation

Polostor
Copy link
Collaborator

@Polostor Polostor commented Sep 24, 2023

Short description

Work in progress of having Parallax effect on the website as requested in #17.

Closes #17.

Changes

feat: use magic scrolling
fix: fix missing github icon
feat(static): add more layers
feat: add background layers in idraw

Static visuals

Macbook

trim 692BC851-7156-4777-94AA-505ECA9C0CE4

iPhone

trim 3AAE231D-54F9-4D94-B641-85030E565D10

@Polostor Polostor changed the title Feat/design/change text feature/add-parallax-effect Sep 24, 2023
@Polostor
Copy link
Collaborator Author

@Indy2222 it is work in progress but I'd like your thoughts on design.

@Polostor Polostor force-pushed the feat/design/change-text branch 3 times, most recently from 1d01b2a to 7e3adc7 Compare October 25, 2023 21:17
@Polostor
Copy link
Collaborator Author

@Indy2222 it should be done. What do you think? 🤔

@Polostor Polostor marked this pull request as ready for review October 26, 2023 10:26
sass/github.scss Show resolved Hide resolved
templates/base.html Outdated Show resolved Hide resolved
templates/base.html Show resolved Hide resolved
static/header_wide.idraw Outdated Show resolved Hide resolved
@Indy2222
Copy link
Contributor

I tested it in Firefox and it is sometimes smooth and sometimes lagging for some reason.

@Polostor
Copy link
Collaborator Author

Polostor commented Oct 27, 2023

I tested it in Firefox and it is sometimes smooth and sometimes lagging for some reason.

So I have checked what is wrong and it may be a problem between forcing a hardware acceleration in translate3d and without it translateY would fail because of too many layers.

https://stackoverflow.com/a/22336799/4745695

@Indy2222 Indy2222 changed the title feature/add-parallax-effect Add parallax effect to the header Nov 1, 2023
@Indy2222 Indy2222 merged commit 856481f into main Nov 1, 2023
2 checks passed
@Indy2222 Indy2222 deleted the feat/design/change-text branch November 1, 2023 09:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Development

Successfully merging this pull request may close these issues.

Add parallax effect to the header image
2 participants