Day05 - Flex Chinese Guide to Scalable Image Wall

Posted by Chelsove on Tue, 11 Jun 2019 21:15:26 +0200

Day05 - Flex Chinese Guide to Scalable Image Wall

Author: liyuechun
Introduction: JavaScript30 yes Wes Bos A 30-day challenge to launch. The project provides 30 video tutorials, 30 challenge start documents and 30 challenge solution source code free of charge. The goal is to help people write in pure JavaScript, without using frameworks and libraries or compilers and references. Now you see the fifth in this series. The complete guide is in From Zero to Yiquantan Tribe.

Achieving results

Click on any picture, expand the picture, and move the text from the top and bottom of the picture. After clicking on the expanded image, the image is compressed and the text at both ends of the image is squeezed away.

HTML source code

  <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>

The DOM structure of the initial document: under. panels as the parent div, there are five divs named. panel, each of which contains three sub-p tags. In the corresponding CSS style, the animation time and other features have been set up, just need to complete the different state of the page layout and event monitoring.

CSS source code

  <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 {
      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: 1;
      justify-content: center;
      display: flex;
      flex-direction: column;
    }


    .panel1 { background-image:url(https://source.unsplash.com/gYl-UtwNg_I/1500x1500); }
    .panel2 { background-image:url(https://source.unsplash.com/1CD3fd8kHnE/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 Items */
    .panel > * {
      margin:0;
      width: 100%;
      transition:transform 0.5s;
      flex: 1 0 auto;
      display:flex;
      justify-content: center;
      align-items: center;
    }

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

    .panel p {
      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(2) {
      font-size: 4em;
    }

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

  </style>

CSS plays an important role in this process, using flex can make each element occupy a certain proportion of the page. When debugging, the border can be displayed to facilitate the viewing effect. (border: 1px solid #f00;)

Set. panels to display:flex
Set the flex value of each SubPanel to 1
For each sub panel, set display:flex and set its flex spindle direction
Control. The text in the sub-element <p> of panle is vertically and horizontally centered (look at each panel separately, and the text can also be divided into three parts and then centered by flex).
1. Set it to display:flex
2. Setting flex value
3. Set up the layout of its sub-elements: vertical and horizontal centering (along the main axis, side axis centering)
Set the style of text movement after clicking on an image
Set the flex value of the expanded image by clicking on it

Important: Children's shoes without understanding CSS and Flex must be seen.

JS source code

  <script>
    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));
  </script>

Get all the elements of the class named panel
To add click event listener, write trigger event call function (add/remove style to trigger DOM element, achieve stretch/compression effect)
Adding transitionend event listener to it and writing the calling function (adding/removing style to achieve text flying in/out effect)