This is the 7th day of my participation in Gwen Challenge

Flex Panels Image Gallery

1. Effect display

The effect of this part of the content today is that when you click on any image, the image will expand, and the text will slide in from the top and bottom of the image. Click on the expanded image again, and the image will be compressed to its previous appearance, while the text will be squeezed out and restored to its original state.

1.index-START.html

2.index-FINISHED.html

3. My end result

Second, the implementation

The final code

<! DOCTYPE HTML > < HTML lang="en"> <head> <meta Charset ="UTF-8"> <title>Flex Panels 💪</title> <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> </head> <body> <style> html {  box-sizing: border-box; background: #ffc600; font-family: 'helvetica neue'; font-size: 20px; font-weight: 200; } body { margin: 0; } *, *:before, *:after { box-sizing: inherit; } .panels { min-height: 100vh; overflow: hidden; display: flex; } .panel { flex: 1; display: flex; flex-direction: column; justify-content: center; background: #6B0F9C; Box-shadow: inset 0 0 0 5px rgba(255,255,255,0.1); color: white; text-align: center; align-items: center; /* Safari transitionend event.propertyName === flex */ /* Chrome + FF transitionend event.propertyName === flex-grow */ 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; font-size: 20px; 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); } /* Flex Children */ .panel > * { flex: 1; margin: 0; width: 100%; The transition: 0.5 s transform; } .panel p { display: flex; justify-content: center; 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); font-size: 2em; } .panel >*:first-child { transform: translateY(-100%); } .panel >*:last-child { transform: translateY(100%); } .panel.open-active>*:first-child { transform: translateY(0%); } .panel.open-active >*:last-child { transform: translateY(0%); } .panel p:nth-child(1) { display: flex; align-items: flex-end; } .panel p:nth-child(2) { font-size: 4em; align-items: center; } .panel.open { font-size: 40px; flex: 5; } </style> <div class="panels"> <div class="panel panel1"> <p>Hey</p> <p>Let's</p> <p>Dance</p> </div> <div class="panel  panel2"> <p>Give</p> <p>Take</p> <p>Receive</p> </div> <div class="panel panel3"> <p>Experience</p> <p>It</p> <p>Today</p> </div> <div class="panel panel4"> <p>Give</p> <p>All</p> <p>You can</p> </div> <div class="panel panel5"> <p>Life</p> <p>In</p> <p>Motion</p> </div> </div> <script> ; (function(){ const panels = document.querySelectorAll(".panel") function clickHandler(){ this.classList.toggle("open"); } function transionHandler(e){ if(e.propertyName.indexOf('flex') ! == -1){ this.classList.toggle("open-active") } } panels.forEach(panel =>{ panel.addEventListener("click",clickHandler); panel.addEventListener("transitionend",transionHandler) }) })() </script> </body> </html>Copy the code

Iii. Summary and review

There are three key points to grasp in this case:

Flex Flex layout CSS Class style transition animation event handling

Of course, Flex layout is used mainly for convenience, but float should not be discarded. In some cases, float will be used for style layout.

Process decomposition

1. Change the initialization page to the Flex layout

The initial display of the page by the original author is not the same as the final display, because the initial layout of the page is display: block; So the whole module is just row on row down.

We will use Flex layout when we want to make the page horizontal.

.panels {
      min-height: 100vh;
      overflow: hidden;
       // Change the flex layout
      display: flex;
    }

    .panel {
    // Fill the page with a single piece
      flex: 1;
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255.255.255.0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      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;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }
Copy the code

And now our page looks like this:

But we find that our text is not centered, so the next step is to center the text

Vertically centered text

.panel {
      flex: 1;
      //-----------
      display: flex;
      flex-direction: column;
      justify-content: center;
      //-----------
      background: #6B0F9C;
      box-shadow: inset 0 0 0 5px rgba(255.255.255.0.1);
      color: white;
      text-align: center;
      align-items: center;
      /* Safari transitionend event.propertyName === flex */
      /* Chrome + FF transitionend event.propertyName === flex-grow */
      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;
      font-size: 20px;
      background-size: cover;
      background-position: center;
    }
    
    /* Flex Children */
    .panel > * {
      //-----------
      flex: 1;
      //-----------
      margin: 0;
      width: 100%;
      transition: transform 0.5s;
    }

    .panel p {
      //-----------
      display: flex;
      justify-content: center;
      //-----------
      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);
      font-size: 2em;
    }
    
    //-----------
   .panel p:nth-child(1) {
      display: flex;
      align-items: flex-end;
    }
    //-----------
    
    .panel p:nth-child(2) {
      font-size: 4em;
      //-----------
      align-items: center;
      //-----------
    }
Copy the code

It then achieves something like this:Now our text is vertically centered, but when we initialize it, the text above and below is gone.

Text initialization on both sides disappears

    .panel >*:first-child {
      transform: translateY(-100%);
    }

    .panel >*:last-child  {
      transform: translateY(100%);
    }
Copy the code

So the text on both sides of us has now disappeared

JavaScript event

Here we can divide into two animation events:

(1) Enlarge and restore animation;

(2) display of text on both sides.

Let’s implement the first animation.

We have each of these five portions as one portion, and now when we expand the implementation, we’re going to make each portion larger than one portion, so I’ve set it to 5.

    .panel.open {
      font-size: 40px;
      flex: 5;
    }
    
   ;(function(){

      const panels = document.querySelectorAll(".panel")

      function clickHandler(){
        this.classList.toggle("open");
      }

      panels.forEach(panel= >{
        panel.addEventListener("click",clickHandler);
      })

    })() 
Copy the code

At this point, we have achieved the first step of our animation, so we will not do the demonstration, but try it on our own, we continue.

When implementing the second animation, we will use the transionend event.

   .panel.open-active>*:first-child {
      transform: translateY(0%);
    }

    .panel.open-active >*:last-child  {
      transform: translateY(0%);
    }

Copy the code

     function transionHandler(e){
        if(e.propertyName.indexOf('flex')! = = -1) {this.classList.toggle("open-active")
        }
      }

      panels.forEach(panel= >{
        panel.addEventListener("click",clickHandler);
        panel.addEventListener("transitionend",transionHandler)
      })
Copy the code

4. Key and difficult points

As far as this case is concerned, there are no hard points to pay attention to, but the main point is to consolidate the Flex Flex layout.

The following post ruan Yifeng teacher’s Flex learning website, summarized very in place, follow this document to go through, I believe that you will have a comprehensive understanding of Flex layout learning and will master its use.

Address: www.ruanyifeng.com/blog/2015/0…

However, there is a layout style typesetting, that is Grid layout, if interested can go to do a study, use is also very convenient.

mo4tech.com (Moment For Technology) is a global community with thousands techies from across the global hang out!Passionate technologists, be it gadget freaks, tech enthusiasts, coders, technopreneurs, or CIOs, you would find them all here.

JavaScript 30-day Coding Challenge — Day 5

Flex Panels Image Gallery

1. Effect display

1.index-START.html

2.index-FINISHED.html

3. My end result

Second, the implementation

The final code

Iii. Summary and review

Process decomposition

4. Key and difficult points

JavaScript 30-day Coding Challenge — Day 5

Flex Panels Image Gallery

1. Effect display

1.index-START.html

2.index-FINISHED.html

3. My end result

Second, the implementation

The final code

Iii. Summary and review

Process decomposition

4. Key and difficult points

Related Posts

A set of SAO down, webpack project packaging speed soared 🚀, volume dropped ↓

Learn at once – Asynchronous programming in JavaScript

【Vue】 Actual combat project: e-commerce background management system (2) user management module