50 Projects 01 Expanding Cards(附帶新手菜雞註釋) Live Demo HTML: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compati ...
50 Projects
01 Expanding Cards(附帶新手菜雞註釋)
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Expanding cards</title>
<link rel="stylesheet" href="/static/css/Expanding-cards.css">
</head>
<body>
<div class="container">
<div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Explore World</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Wild Forest</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
<h3>Sunny Beach</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
<h3>City on Winter</h3>
</div>
<div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
<h3>Mountains - Clouds</h3>
</div>
</div>
<script type="module" src="/js/Expanding-cards.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
}
.container {
display: flex;
width: 90vw;
}
.panel {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
height: 80vh;
border-radius: 50px;
color: #fff;
cursor: pointer;
/* 增長繫數,這樣會使圖片有豎條感覺 */
flex: 0.5;
margin: 10px;
position: relative;
/* 過渡方式，好多動畫用到這個，看來著重要學一下，不過這個all好像去掉不影響大局？ */
transition: all 700ms ease-in;
/* 時間影響展示時間，感覺調節時間匹配更好 */
}
.panel h3 {
font-size: 24px;
position: absolute;
/* 定義說明文字位置 */
bottom: 20px;
left: 20px;
margin: 0;
/* 文字透明度 */
opacity: 0;
}
.active {
/* 這個MDN上說是增長繫數，就是比值可以這樣說吧，按我來講 */
flex: 5;
}
.active h3 {
/* 如果有active屬性，就將說明文字顯現 */
opacity: 1;
transition: opacity 0.3s ease-in 0.4s;
}
@media (max-width: 480px) {
/* 一般而言這種都是電腦展示吧，所以很雞肋？當然依然不可或缺，可以不用，但不能沒有 */
.container {
width: 100vh;
}
}
/* 下麵這個真的不知道為什麼有啊 */
/* .panel:nth-of-type(4),
.panel:nth-of-type(5) {
display: none;
} */
JS
const panels = document.querySelectorAll('.panel');
// 找到pnael標簽，這應該是列；
// console.log(panels);
// 遍歷所有的元素，查看誰被點擊了，找到之後將其他元素的active全部清除，併為當前屬性添加active
panels.forEach(function(panel) { //遍歷 panels 序列
panel.addEventListener('click', function(){
removeActiveClasses(); //移除 active標簽
panel.classList.add('active');
});
});
function removeActiveClasses () {
panels.forEach(function (panel) {
panel.classList.remove('active');
})
}
02 Hidden-search
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hidden-search</title>
<link rel="stylesheet" href="/static/css/hidden-search.css">
<link rel="stylesheet" href="/third-part/font-awesome-4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="search">
<input type="text" class="input" placeholder="Search...">
<button class="btn">
<i class="fa fa-search" aria-hidden="true"></i>
</button>
</div>
<script type="module" src="/js/hidden-search.js"></script>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
/* 背景圖片為漸變色 */
background-image: linear-gradient(90deg,#7d5fff,#7158e2);
/* flex佈局 */
display: flex;
/* 豎直居中 */
align-items: center;
/* 水平居中 */
justify-content: center;
/* 非常奇怪啊，有100vh可以居中，100%不成 */
height: 100vh;
overflow: hidden;
margin: 0;
}
.search {
position: relative;
height: 50px;
}
.search .input {
background-color: #fff;
border: 0;
font-size: 18px;
padding: 15px;
height: 50px;
width: 50px;
/* 轉變屬性width */
transition : width 0.3s ease;
}
.btn {
background-color: #fff;
border: 0;
cursor: pointer;
font-size: 24px;
position: absolute;
top: 0;
left: 0;
height: 50px;
width: 50px;
/* 平滑移動 */
transition : transform 0.3s ease;
}
.btn:focus,
.input:focus {
outline: none
}
.active .input {
width: 200px;
}
.active .btn {
/* 向X軸偏移198px */
transform: translateX(198px);
}
JS
let search = document.querySelector('.search');
let btn = document.querySelector('.btn');
let input = document.querySelector('.input');
// 添加監聽函數
btn.addEventListener('click',function(e) {
// 如果active已經存在，則移除它，否則添加屬性
search.classList.toggle('active');
// 效果：<div class="search active"></div>
console.log(search);
// input.focus();
});
