Theatre website

:desktop_computer: Covo degli Artisti

:hammer_and_wrench: Built with Elements by Christian Sassano

:link: Visit the site: https://www.covodegliartisti.com

:pencil: Builders Notes (optional):
The “Covo degli Artisti” website is a digital space for the theater, designed to showcase its artistic vision, performances, and initiatives. Working with Elements allowed me to create an intuitive and visually engaging user experience.

5 Likes

Super impressive, the site looks great!

I love the parallax artwork effect, I’m sure others would love to know how you created that :slight_smile:

First, I set up the background, which, to avoid slowing down page loading with too many posters, was created as a mosaic of photographs. The background component has its height and width set to auto.

Inside this background, there is a simple container with a full size and a height of 600px, in line with the site’s theme.

This container holds a Flex Box component that centers the elements within it. This setup ensures that components maintain secure positioning even as the screen resolution changes. In this way, the Reveal components, which are positioned absolutely, use the center of the Flex Box as their reference point.

The Reveal components are positioned absolutely. To achieve a semi-random effect, their values were set with a trial-and-error approach. Their scroll effect was also set to scrub, and each Reveal component has custom settings that can be adjusted as needed.

For a quicker understanding, since rereading this description makes it sound like I wrote it while drunk :sweat_smile: , I’ve attached an explanatory PDF that I hope can serve as a guide for everyone.

Parallax scroll.pdf (341.8 KB)

3 Likes

That is a really great explanation, and the PDF is super helpful :star_struck:

Thanks for taking the time to do that, I’m sure it’s going to help a lot of others out there wanting to do this kind of parallax effect!

Thank you for the kind words! It’s a pleasure to help. I believe that it’s only through sharing our knowledge that we can all progress and grow together.

I’m glad the explanation was helpful. Creating it was a lot of fun, and that’s thanks to Elements. This program has made web design enjoyable for me again with its extreme simplicity and intuitive nature. They are truly doing an excellent job.

As a developer who focuses on complex animations, I hope you’ll consider adding more animation controls (this would be a game-change), perhaps even with deeper GSAP integration, since I’ve read it’s already part of your core.

You guys are doing a great job! I hope to keep creating amazing things with your wonderful application and I’m happy to be a part of this community.

1 Like