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 codeIii. 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 codeAnd now our page looks like this:
- 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 codeIt then achieves something like this:
- Text initialization on both sides disappears
.panel >*:first-child {
transform: translateY(-100%);
}
.panel >*:last-child {
transform: translateY(100%);
}
Copy the codeSo 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 codeAt 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 code4. 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.