preface

Why would you want to revisit this login at the end of the year?

Because this dynamic effect of clicking three pictures to log in to the skipping content page is the small finished product of realizing my own and others’ ideas through front-end technology for the first time in my college life, which can be said to be the starting point of my relationship with front-end. What I thought at the time was “wow, that’s so cool” may seem very simple to me now, but the knowledge behind it will continue throughout my career.

So at the end of 2021, I want to use my starting point as an ending point.

Without further ado, if you are interested, let’s take a look at the implementation of this effect and the knowledge behind it.

Keywords: elastic layout, Flex properties, CSS animation

Results the preview

🤔 Effect analysis

1. When the screen width does not change, the picture box fills the parent element space from left to right and from top to bottom;

2. When we start scaling the screen width, the image box size changes as we zoom, but still fills the parent element space from left to right and top to bottom as shown in the first paragraph.

3. Move the mouse (hover) to the corresponding picture box, you can see that the picture box has a corresponding zooming effect and the frame is orange;

4. The clicked picture box changes from orange to green. After successfully lighting three boxes, jump to the content page.

Combined with the above functional analysis, we can summarize the corresponding requirements and corresponding knowledge and skill points behind such a dazzling login effect:

HTML level

We can use a big box with picture box, picture box with picture structure to realize the basic code. Here, we choose the out-of-order UL label as the big box, and the nested list item LI label as the picture box, and the corresponding picture of the box is stored inside LI to increase the readability of the code.

CSS level

1, 2 effect realization

Let me show you the flex property, which is the big box ul(images), which is the elastic box => Display: Flex, which is the elastic layout. (I really liked this layout at the beginning because I thought it was flexible and you could do a lot of cool things with it. Flex is flexible, a property that will be covered in more detail later in this article and briefly outlined here.

At the same time our image box set the Flex property to Flex :1 1 109px; The flex-wrap attribute is flex-wrap: wrap.

  • Flex :flex-grow flex-shrink flex-basis. The default value is 0. 1 Auto. The last two attributes are optional.

    Flex-grow (defines the scale of the project. Default is 0; If there is free space, do not enlarge)

    Flex-shrink (defines the size of the project to shrink. Default is 1. If there is not enough space, the project will shrink.)

    Flex-basis (which defines the main size of the main space a project occupies before allocating extra space)

    Before we use these three attributes, we need to be clear about two concepts: what is the main axis and the remaining space:

    • A parent container with a Flex environment usually has a main axis and a side axis, which by default is horizontal from left to right and vertical from top to bottom

    • Remaining space = parent element width – sum of all child element widths.

    So, our remaining space in this example is the amount of free space that ul has horizontally from left to right up.

    Here we set the flex-grow(flex-shrink) value of each picture box to 1, which means that each picture box will grow(shrink) in the same proportion if the larger box has space left. For the effect analysis of standard 1 and 2, the size of the picture box can be adjusted with the zoom of the screen. Flex-basis is set to 109px, meaning that each picture box takes up 109px width before the remaining space is allocated.

  • Flex-wrap, the flex-wrap property specifies the line wrap for the child elements of the elastic box.

    Flex-wrap The value can be nowrap/wrap/wrap-reverse.

    Nowrap is the default for flex-wrap, and the elastic container is a single line. In this case the picture box may overflow the larger box. Here we use wrap, which means the elastic container has multiple lines so that the big box can break itself.

In addition, we also need to set the picture box to relative positioning, and the picture inside the picture box to absolute positioning, in order to achieve the picture is relative to the size of the picture box. If you’re not familiar with the concepts of relative and absolute positioning, check out my article, Weekly Skill Tree Lighting: CSS + JS Lighting up Halloween Pumpkins (plus: CSS positioning mechanism sorting), or check out other resources online.

3, 4 effect realization

Mouse movement (hover) to the corresponding picture box Li trigger Li’s Hover CSS selector, so that the corresponding picture box has a zoomIn zoomIn effect and realize the picture magnification is 120% of the original, and the border is orange, achieve effect 3;

Here, we set the zoomIn effect to change from transparent to opaque, and set the original length and width to 0.3 at the beginning, and set the length and width to 1.2 times of the original at the end of the animation. The animation lasts for 1 second, so as to achieve a good visual amplification effect.

And don’t forget to write the green border style after the click for effect 4.

Js level

Corresponding to 4 of the above effect analysis, we need to trigger the jump after identifying the three boxes are clicked, and the picture box should turn into a green box after clicking. That is, we need to listen for click events on all picture boxes, each box is clicked successfully and the green box property is triggered, and once three boxes are clicked, the jump is made.

OK, the analysis is done, let’s turn the idea into cash!

No more talking. Put the code in

HTML part

<ul class="images" id="login-by-image">
<! Remember to place square images of the same length and width, and please replace them with your own image path (more is recommended for viewing the zoom effect)-->
<li><img src="images/1441A4F3-EC71-433A-BACE-92C86632CAA8.png"></li>

<li><img src="images/0447FC44-849B-47DB-84C0-5A2F839544A6.png"></li>

<li><img src="images/1441A4F3-EC71-433A-BACE-92C86632CAA8.png"></li>
<! -... -->
</ul>
Copy the code

The CSS part

/* Large box ul is an elastic box and can break lines by itself */
.login .images {
    padding: 10px 0 0;
    width: 100%;
    display: flex;
    flex-wrap: wrap
}
/* Picture box li scaling ratio is 1, no remaining space in the main axis occupies 109px, and also relative positioning */
.login .images li {
    flex: 1 1 109px;
    list-style: none;
    border: 1px solid transparent;
    position: relative;
}
/* The effect of moving the mouse over the picture box: for absolute positioning, the size of the picture box becomes 120% of its original size, and the z-index property is set to 10 */
.login .images li:hover img {
    position: absolute;
    width: 120%;
    height: 120%;
    top: -12%;
    left: -12%;
    z-index: 10;
    /* Orange border */
    border: 3px solid #ff8c01;
    /* Use action action zoomIn for 1s */
    animation: zoomIn 1s
}
/* When li is selected, the border is green */
.login .images li.selected {
    border: 3px solid #88bc00;
}
/* Fill the image box */
.login .images li img {
    width: 100%;
    height: 100%
}

/* Move the mouse over the image box to enlarge the action */
@-webkit-keyframes zoomIn {
    from {
        opacity: 0;
        /* Define the 3D zoom transform, that is, the x,y,z axis are all reduced to the original 0.3 */
        -webkit-transform: scale3d(.3.3.3);
        transform: scale3d(.3.3.3)}to {
        opacity: 1}}Copy the code

Js part

// This is a slightly older but very powerful jQuery library for image box click recognition and green box style triggering
$('#login-by-image li').off('click').on('click'.function () {
    // Get all clicked items by finding the Li tag with selected
    const selectedList = $('li.selected');
     // Check whether the selected item is less than 2. If so, switch the selected box to the selected style
    if (selectedList.length < 2) {$(this).toggleClass('selected');
    } else {
         // Otherwise, the page will be redirected
        window.location = "practiceHome.html";
    }

    return false;
})
Copy the code

Flex related attributes analysis

Personally, I prefer mind maps and tables. Here I use mind maps to sort out flex properties.

References:

Ruan Yifeng Flex layout tutorial: Grammar (strong strongly recommended, write very concise and detailed at the same time the combination of text and text is very easy to understand)

Janeflex :1 and the understanding of flex values

CSS animation infuses magic

Here is a mind map of CSS animation to do a tidy up.

References:

CSS animations

Introduction to CSS animation – Ruan Yifeng’s weblog

The CSS transition properties

At the same time in this example we use the Transform property to define the 3d scaling effect of the image, here is also the link. Range of the transform properties

Blast a New Year’s fireworks 🎆

Here Po out of the very interesting use of CSS animation fried New Year fireworks example 1 and the use of Js fireworks example 2, also quite suitable to consolidate the knowledge just introduced and develop Js use ideas, let us together fried see.

Example 1: CSS3 implements fireworks effects -web front end

In this example, the author uses the Animation effect of the two pictures to realize the fireworks, which is useful to the Animation knowledge we just mentioned and simple and easy to understand. It can be used as a reinforcement to try to explode.

Example 2: js to achieve the effect of fireworks – click on the fireworks will rise from the bottom up

This example comes from the author of blog Garden and Yishui Si. He realized a box with JS. If you click any position in the box, there will be fireworks rising from the bottom to the click point and set off a circle of fireworks with cool effect. Pro test out of the box, and detailed notes, want to fry fireworks friends can live horses.

Week week Last week of the year: Year-end summary

“Looking forward to looking forward to, the pace of the end of the year near” (immediately go home for the New Year good!

Year after year, year after year, another year will pass in a blink of an eye. Although it is said that every day is 24 hours without change, at the end of this year, at the node of special significance, I would like to share with you my views on the past year:

Learning (business driven, self-driven, and good habit cultivation);

Life (separable training, interpersonal communication, personal mentality, planning and thinking four parts).

And at the end of the year:

Wishes for the New Year;

Thanks and blessings;

See you soon 👋🏻