title: [native javascript project] Flex Panel 05
date: 2021-11-17 20:10:40
tags: native javascript project
categories: 30 native javascript projects

introduction

This paper introduces a dynamic screening web page. The knowledge points mainly involve flex container and element click events.

Effect website: https://janice143.github.io/f...

text

1, html part

There are mainly five div elements, which divide the web page into five blocks and arrange them horizontally. There are three p tags in each div element, corresponding to three paragraphs.

<div class="panels">
    <div class="panel1 panel" onclick="clickOpen(1)">
        <p>Hey</p>
        <p>Let's</p>
        <p>Dance</p>
    </div>
    <div class="panel2 panel" onclick="clickOpen(2)">
        <p>Give</p>
        <p>Take</p>
        <p>Receive</p>
    </div>
    <div class="panel3 panel" onclick="clickOpen(3)">
        <p>Experience</p>
        <p>It</p>
        <p>Today</p>
    </div>
    <div class="panel4 panel" onclick="clickOpen(4)">
        <p>Give</p>
        <p>All</p>
        <p>You can</p>
    </div>
    <div class="panel5 panel" onclick="clickOpen(5)">
        <p>Life</p>
        <p>In</p>
        <p>Motion</p>
    </div>
</div>

2, css part

There are 5 labels corresponding to the horizontal picture and the div code in each CSV element. The text of the P tag is also centered left and right and evenly arranged up and down in each div element. It is mainly realized by using flex container.

1 flex container

Reference website: https://www.ruanyifeng.com/bl...

Elements with Flex layout are called Flex containers, or "containers" for short. All its child elements automatically become container members, which are called Flex items, or "items" for short.

Properties of the container:

• Flex direction: arrangement direction of items
• Flex Wrap: by default, items are arranged on one line (also known as "grid line"). The flex wrap attribute defines how to wrap lines if an axis cannot be arranged.
• Flex flow: short form of flex direction attribute and flex wrap attribute
• Justify content: the alignment of items on the main axis
• Align items: how to align items on the cross axis
• Align content: defines the alignment of multiple axes

Properties of the project:

• Order: the order of items. The smaller the value, the higher the order
• Flex growth: defines the magnification of the project. The default value is 0
• Flex shrink: the reduction scale of the project. The default value is 1
• Flex basis: the spindle space occupied by the project
• Flex: short for flex grow, flex shrink and flex basis. The default value is 0 1 auto
• Align self: allows a single item to have a different alignment from other items. You can override the align items attribute

2 css font

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Amatic+SC">
text-transform: uppercase;
font-family: 'Amatic SC',cursive;
text-shadow: 0 0 4px rgba(0,0,0,0.72),0 0 14px rgba(0,0,0,0.45);

3 transition style

transition:
font-size 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
flex 0.7s cubic-bezier(0.61,-0.19, 0.7,-0.11),
background 0.2s;
transform:translateY(-100%);

4 background picture

background-size: cover;
background-position: center;
.panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
.panel2 { background-image:url(https://source.unsplash.com/rFKUFzjPYiQ/1500x1500); }
.panel3 { background-image:url(https://images.unsplash.com/photo-1465188162913-8fb5709d6d57?ixlib=rb-0.3.5&q=80&fm=jpg&crop=faces&cs=tinysrgb&w=1500&h=1500&fit=crop&s=967e8a713a4e395260793fc8c802901d); }
.panel4 { background-image:url(https://source.unsplash.com/ITjiVXcwVng/1500x1500); }
.panel5 { background-image:url(https://source.unsplash.com/3MNzGlQM7qs/1500x1500); }

5 others

CSS selector

*All elements of the document will be matched; > The combiner selects the node of the immediate child of the previous element.

. Panel > * select the direct child element of the class named panel

Js part

The general idea of the program I wrote is to set the onclick attribute in the html code, and then write the function content in js. The input parameters of different panel s are different

The location class name has more than two labels document getElementsByClassName(panel${num} panel-open)；

// Click panel 12345 to add to the corresponding panel Panel open attribute
function clickOpen(num){
    const panelNumIf = document.getElementsByClassName(`panel${num} panel-open`);
    const panelNum = document.getElementsByClassName(`panel${num}`);
    // console.log(panelNumIf[0])
    if (panelNumIf[0])
        panelNumIf[0].classList.remove('panel-open');
    else
        panelNum[0].classList.add('panel-open');//Add panel open class attribute
    console.log(`panel${num} panel-open`);          
};

The general idea of other people's programs is to traverse five panels to monitor whether there are click events. If so, run the toggleOpen function, which contains this classList. Toggle ('open ') means that if this has an open class name, it will be deleted, and if not, it will be added.

e. Propertyname get the property name of transitionend, e.propertyName Includes ('flex ') contains the attribute name of the flex field

const panels = document.querySelectorAll('.panel');
function toggleOpen() {
    console.log('Hello');
    this.classList.toggle('open');
}
function toggleActive(e) {
    console.log(e.propertyName);
    if (e.propertyName.includes('flex')) {
        this.classList.toggle('open-active');
    }
}
panels.forEach(panel => panel.addEventListener('click', toggleOpen));
panels.forEach(panel => panel.addEventListener('transitionend', toggleActive));

summary

The complete code is in the Github In fact, if readers are interested, they might as well give it a try.