Wayan Jaya wrote:
Ok a quick look
So it's really either or (personally I would do it from scratch, but then I have some knowledge and experience using Site Designer.)
You will of course get plenty of help and assistance from users here on this forum.

Wayan Jaya wrote:
I seem to remember giving a little bit of help before with ar project although I thought it was for a different one than the orphelion-ensemble one.

Bosco wrote:
Hi all,

Regarding the Foundation Framework, it's no longer being developed by Zurb. [https://github.com/foundation/foundation-sites/issues/11767] I didn't know about it until today. Going forward, is it still a good recommendation to use it on a new site?

Wayan Jaya wrote:
Ok a quick look


The Kobe foundation one is as you mentioned already foundation framework (I don't have that template and it's a paid one so not goimg to download it, but looking at the live preview, it seems pretty straightforwards and should be pretty easy to adapt, however sometimes readymade templates still require some in depth knowledge of

Astropilot wrote:


The main thing I like about the Kobe template is the way the images are being partly moved, covered and revealed by the accompanying text, as one scrolls down the page.
I faintly remember a tutorial about implementing those effects, but can't find it anymore. Do you know any place where I could find more information about that?

I think a good strategy for me would be to create some sample content pages with out of the box elements and see where that takes me. That way, I recover lost skills and also get into the design mode rather than copying a ready design and wasting lots of time implementing changes all over the place.

regards
Berthold

Wayan Jaya wrote:

It's a nice effect if done properly, there is a fiddle that sort of looks like it and can be done just with site designer. The true effect is called Parallax and looks even more amazing but requires some special JS code inserting but that's not too complicated either. I can do you a step by step video showing both ways if you would prefer to learn contact me if you think it would help. Inger also has one or two components on her sharing site that you could download and then reverse engineer to discover how the ones she has are done then practice with that way.

The effect you described—where images are overlaid and revealed by text sections as you scroll down the page—can indeed be part of a broader category of effects known as "parallax." However, it's important to differentiate between the specific effect you're aiming for and the traditional definition of parallax scrolling.

### Parallax Scrolling

Parallax scrolling is a technique in web design where background images move by the camera slower than foreground images, creating an illusion of depth on a webpage. It can provide a 3D effect as you scroll down the page. This technique involves moving different layers at different speeds to create a sense of depth and immersion.

### Your Effect

The specific effect you mentioned involves images being revealed by text sections as the user scrolls, which may not necessarily involve different scrolling speeds for the background and foreground but does involve elements changing based on scroll position. This could be considered a form of parallax if the revealing or overlay effect occurs with a sense of depth or motion that differs from the scroll speed of the main page content.

### Implementation

Regardless of whether your desired effect is traditional parallax or a related scroll-triggered animation, the implementation approach would involve:

- **Layering**: Positioning text over images using CSS (with `position: relative` for the container and `position: absolute` for the text).
- **Scroll Detection**: Using JavaScript to detect the scroll position and trigger the reveal or overlay effect. Libraries like ScrollReveal.js or writing custom JavaScript can be used for this purpose.
- **Animation**: Applying CSS transitions or animations for a smoother reveal effect as the text overlays the image.

### Clarification

So, while your described effect shares similarities with parallax scrolling—especially if it creates a depth effect or involves elements moving at different speeds or timings—it might be more accurate to refer to it as a "scroll-triggered reveal" effect if the primary interaction is revealing text over images without the depth illusion characteristic of parallax scrolling.

Both parallax and scroll-triggered reveals are popular in modern web design for creating engaging, dynamic user experiences. The choice between them, or combining elements of both, depends on the specific design goals and the desired user interaction on your site.

Astropilot wrote:


A video would be marvellous, of course, if it is not too much trouble! I'll look up Inger's site as well for the components.
The idea for my portfolio page is to give on the landing site an eye-catching overview of my different professional activities. From there, I would branch out to dedicated pages for each profession.

A quick search on ChatGPT returned this: