Caio-Chella

Your favorite coding festival (Readme under construction)

Access

Access the website.

Built with:

Features

General

🏋️ Built without the use of libraries or frameworks;
🎢 Animation on header on hover (desktop);
🍔 Animation on burger menu (mobile);
🎡 Animation on banner's header;
🕸️ Image optimization usin webp;
🖼️ Banner images framed properly from 320px to 2500px;
📱 Responsive design from 320px to 2500px;
🖋️ Fluid typography;
🎢 Social network icons with background animation on hover and focus;
💈 Custom scrollbar;
🖱️ Custom selection (try selecting text with your mouse);
⌨️ Keyboard-navigation friendly

Home

Parallax banner Lineup animation based on scroll;

Mapa Setores

Parallax banner Interactive map (on hover and focus);

Informações

Animation on accordion movement and arrow;
Accordion can be navigated with keyboard;
Accordion links are only accessible when the content is open

Ingresso

Label animation;
Form validation with custom error display;
Button Arrow Animation on hover and focus

Seu Ingresso

QR Code takes to my github page;

Some techniques used

CSS-only navbar toggle

The menu is toggled using CSS only, through a checkbox linked to a label.

Animated underline on menu

The line addapts to each navigation item size and position as they are hovered. I wanted it to happen only when hovering, but wanted it to disappear when hover stoped. But not so fast. To achieve that I combined mouseover, mouseout and timeout on JavaScript.

Burger Animation

I used divs as lines for the burger icon. That way, I was able to transition them. I used differente transition properties for opening and closing the menu, and cubic-bezier to get a bouncy effect.

Throttle on Scroll event listener

I wanted the lineup animation to be linked to scroll. However, scroll events are triggered too many times, making the script too heavy. To solve that I used a throttle function, that limits the amount of times the event is triggered to two times per second. I also kill the event listener after the two lineups are rendered.

Lineup animation

To make each band appear one after the other I linked the transition delay to a CSS variable that is set by JavaScript. To make each animation start from a different position i used nth-child even and odd, and to style the groups of bands I used a combination of nth-child, for example:

.lineup li:nth-child(n + 2):nth-child(-n + 5)

This helped me with code legibility and maintenance.

Footer icons animation

To achieve the effect on the footer icons I used them as masks over the li. When hovered or focused, the background is moved. And of course, theres is transitions to make it smooth.

Cards carefully not aligned

On Mapa de Setores the cards on the desktop layout are not aligned. To achieve that, and get the same proportion on every screen I used margin-bottom on the cards, and only on the second one I set the margin-bottom to zero, and used align-self to put it in the bottom.

Dynamic border-radius

Sometimes we set border radius as a fixed value, and if object grows or shrinks, its appearance changes. I was careful to keep elements' shape the same whenever it was possible. An example on that: the images on Mapa de Setores. Their border-radius is normally 4.5vw:

.setores-detalhes article > div{
   padding-top: 76.7%;   
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   border-radius: 4.5vw;
   margin-bottom: calc(var(--fs-3) * .75); /*Equal to h3 margin-bottom*/
}

But on desktop they are not 100% of the container anymore. So I changed it:

.setores-detalhes article > div{
   width: 100%;
   padding-top: 65%;
   border-radius: 1.44vw;
   /*For the border-radius I calculated the image's width: 100% - gap (~ 3.4%) / 3. I then applied the rule of three with 4.5vw -> 100% and 32% -> 1.44vw  */
}

Banner effect

The images used on banners used different techniques to make the blend-mode. On a experiência, for example, I used a pseudoelement with opacity over the image - since setting opacity to the element itself would affect the header. That disrupted the menu animation, so I fixed it using isolation on the section, and setting the header z-index to 1.

Use of focus withn to animate social network on focus

When the li was hovered I had the background animation, but when focusing it wouldn't trigger. It was happening because the tab was targeting the anchor tag inside of the li. I could have worked it out with :has pseudoclass, but that wouldn't cover FireFox (please FireFox, I've never asked you anything). My solution was to use focus-within on the li.

Tasks

Home

• Structure whole HTML
• Create reset css
• Create color structure
• Create font structure
• Create utility class for container
• Header inner positioning
• Header animation
• Header padding
• Create burger menu with label
• Style menu options
• Header on desktop
• Make font better on 1440px
• Adjust lineup distribution
• Set scrollbar
• Make burger animation
• Make active link marking
• Make animation when hovering links
• General information section - Start
• General info mobile
• General info tablet
• General info desktop
• Line-up Padding
• Line-up font
• Set Selection
• Banner footer
• Footer padding
• Footer font
• Footer padding
• Create animation for lineup
• Detect lineup position to fire animation
• Throttle scroll event
• Make throttle get last action
• Unmount function after all has appeared

Experiência

• Banner on mobile
• Filter on banner
• Tablet
• Desktop
• General info section

Setores

• Banner
• Banner responsivity
• Create cards
• Enhance color-scheme. Change color in legenda and change svg accordingly
• Map can be navigated by tab

Accordion

• Accordion hover action (invert button color);
• Include arrow
• Make arrow rotate
• Section banner
• Accessibility

Form

• General styling
• Test keyboard navigation
• Focus, hover,
• Validate
• Make action to another page

Extra

• Adjust form