search

theaterpedia / crearis-nuxt

2 stars 0 forks source link

N-19 Parallax-Studies #19

Open crearis opened 1 month ago

crearis commented 1 month ago

0. PRESUMPTION: What is "Parallax"?

Maybe I use a different terminology: From now on I call my solution "basic parallax", it provides 3 Options: Option A: We have a fixed background-image. It gets covered (top) or uncovered (bottom). Option B: We have a fixed foreground-items: They fade-out or ease-in as we scroll Option C: We have things scrolling onto the screen from below the fold as we scroll. They are sticky and stay on the screen until the mother-div disappears

Maybe we will add effects to that (like shrinking, zooming elements, snap-scrolling)

1. YOUR CHANGES

I will ask you to change the implementation of the current parallax: The background-image should be fixed (not moving with different speed).

MY QUESTIONS

I have ideas/questions around the "section-simple" + "section-slide" - thing. I would like to find a good way to abstract away parallax from inside a bunch of components that are section-like. Why I ask this? Because I would like to build MOLECULES and don't want to double-build them with/without parallax.

2. IDEA

Basic Parallax will simply be implemented using Tailwind-Utilities + CSS-Classes, it is prepared with scoped css inside "section-simple" but only gets activated by the MOLECULE that adds the Parallax-Trigger-Class to the ATOM. Question: Isn't this 'doable'? Isn't basic parallax based on css quite reliable nowadays?

Here you find a running example with all three options: https://theaterpedia-2022-crearis-projects.vercel.app/

See the code of the Post-ITs (Option C):

  1. we mount the cardsCanvas: https://github.com/crearis/theaterpedia2022/blob/theaterpedia/main/components/content/CardsCanvas.vue -> has a double sticky-logic

  2. we configure placement and rotation of the items https://github.com/crearis/theaterpedia2022/blob/theaterpedia/main/components/content/PostIt.vue

  3. Cards-Canvas receives tw-classes from md-file > https://github.com/crearis/theaterpedia2022/blob/theaterpedia/main/content/0.index.md

IF WE NEED some JS-Code,

.. scrollspy or stuff like that to accompany

3. INJECT Component

Otherwise I have the question whether similar effect could be achieved if we only have the "section-simple" but pass a parallax-provider into the MOLECULE via prop or via slot?

4. IDEA

Let's say we have 2 ATOMS that share a whole bunch of props while "section-slide" has more props that enable Parallax among others. Then we build a "Media-Banner" as MOLECULE within the theme. It provides parallax-props as well but they default to "false/none". Is there a way to dynamically choose whether to import the "section-slide" or the "section-simple" depencant on parallax-option = "true" or "false" is found when script setup is executed? Does this make sense?

5. IDEA > HOW do you achieve the 'Switch' in Pruvious? Can't we have this implemented without pruvious as well?

murisceman commented 1 month ago

A pure CSS solution is very challenging since Safari on iOS does not support fixed background attachments.

https://caniuse.com/background-attachment

murisceman commented 1 month ago

We'll create a new Section component in theme that lazily loads Section or Hero (e.g., Parallax) from ui. Concept coming soon.

Ideas for Hero Variants:

Content props:

Background image props:

murisceman commented 1 month ago

47d03ad130a9ee2fea0e4d21d914f82fd8ebf9bc

crearis commented 1 month ago

Great success!!: Component ist working so far. Closed #18.

What still missing is Height-Control. I use the prop height-tmp: (full) | prominent | medium | mini

On Desktop this is equivalent to: 1/1 | 3/4 | 1/2 | 1/4 On other viewports it will have slightly different sizing (TBD)

murisceman commented 1 month ago

Update: Implemented height-tmp prop. See http://localhost:5173/heroes