This is a solution to the Easybank landing page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the site depending on their device's screen size
- See hover states for all interactive elements on the page
- Mobile-first workflow
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- JavaScript
I have practice scroll animations with the help of the IntersectionObserver API. It was awesome to realize that the code below can cause a bug if more than one element is observed at the same time
function animateCard(entries, observer) {
const [entry] = entries;
if (entry.isIntersecting) {
entry.target.classList.add("card-observer-animate");
observer.unobserve(entry.target);
}
}
If there is more than one element observed at the same time, only the first element will receive the animation, while the other won't. So I concluded that the best thing is to do the following instead:
function animateCard(entries, observer) {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("card-observer-animate");
observer.unobserve(entry.target);
}
});
}
Here, doesn't matter how many elements are observed, all of them will get the animation.
Also, I am very proud because I used the SASS for loop for the first time:
@for $i from 1 through 4 {
&:nth-child(#{$i}) {
transform: translateY(50px * $i);
}
}
I really liked working with the IntersectionObserver API, because it makes it so easy to determine what happens to an element as soon as it comes into the viewport. From now on, whenever I can, I will try to use it in my next projects so that I can practice it even more