Project 5:Flex-gallery

Welcome to my "Build 30 Js Projects in 30 Days" Series .This is day 5 and project 5. If you haven't read the other articles in this series please check them out first. I'll list them at the end of this article.

As mentioned in my previous article. This is the Day 5 challenge of Wes Bos Javascript30 course.

Final result:

Set codepen to 0.25x if using small screen devices to see the full result.
My source code
I've added the images used in the lecture, they aren't included in starter files of this course, so you can download it from my repo.

As you can see this turned out to be super cute! 😻😌

As always before starting download the starter files from here. I've made a separate article on how to download starter files, you can check it out here.

PART 1:HTML

As you can see I've made 5 boxes inside container that will contain our background-image and text.

PART 2:CSS

Now we are going to style our project.
This is the main part for this challenge.
First, we want all our boxes to be aligned like shown in result and to achieve this the best way is either grid or flex. I've used flex and aligned them in column direction on container.

.container{
    display:flex;
    height: 100vh;
    overflow: hidden;
    font-family: 'Amatic SC', cursive;
}

Now we will go to individual classes and apply background images ,center those images and will set it's size to cover to make it fill the whole container element(individual box classes).

Then we will simply set font-size for text and set h1 to scale(0) so that it's pushed inside the screen.(This will later on give the 3d look of text coming out of the screen)

Then I've again applied flex on the box. This is done to position all the heading tags such that they take 3 equal rows using flex:1.

.box{
    flex:1;
    height: 100vh;
    display:flex;
    flex-direction: column;
    color: #fff;
    justify-content: center;
    align-items: center;
    gap:2em;
    transition: ease-in-out 0.8s;
    text-transform: uppercase;
    flex-wrap: wrap;
}

Then I've again applied flex on all the elements of box i.e. h3,h1,h3.This is done to further center the heading tags inside their individual flex. Without this part, translateY won't work as we need to give a wrapper class to the element we want to translate. You can also give classes to the both h3's to achieve this..But flex is used for better positioning of elements.

.box>*{
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   flex:1;
   transition: cubic-bezier(0, 0.95, 0.49, 0.65) 0.8s;


}

Then I've taken the first and the last tag and translated them above and below the boxes such that they disappear from the screen. We will later use them to give a sliding effect as shown in result.

.box>*:first-child{
    transform: translateY(-100%);
}
/* moving lower h3 down */
.box>*:last-child{
    transform: translateY(100%);
}

Then I've created a focus class that will increase the size of box user clicked upon by giving it a flex:5. I will later add and remove this class.

.focus{
    flex:5;
}

This is it for css part.

PART 3:JAVASCRIPT

Now we will make our project interactive.

The idea is to traverse all the items with box class, add an event listener which will be called if user clicks on the box and calls out focusImg function.

focusImg function -->
Here we will add the class focus to increase the size of container, change the property of translateY to slide our h3's back to the frame.
Also, we want our box to restore back to it's initial state when clicked upon again, to do this we'll simply check if the box element being clicked upon has focus class add to it, if it has that means that it has been clicked by the user before. Now we will simply remove the focus class and remove h3 by using translateY to restore it's initial state.

Things I learnt:

1.Nested flex
2.Animation in css.

Previous article from this series:

Project 4 Day 4. This project discusses various important array prototype methods that I found super helpful. Do check it out if you haven't already

Conclusion

That's it for today's project.Next project will be Ajax Type Ahead .

If you have any doubts or suggestions please do let me know in the comment section. I'll be more than happy to interact with you.

If you like this series and want to be a part of it, do consider following me at @prachigarg19

Thanks for reading. :)