基于50projects50days的复习（二）| 青训营笔记

这是我参与「第四届青训营 」笔记创作活动的的第5天

3 Rotating Navigation Animation 旋转菜单

    <div class="container">
        <div class="circle-container">
            <div class="circle">
                <button id="close"><i class="fas fa-times"></i></button>
                <button id="open"><i class="fas fa-bars"></i></button>
            </div>
        </div>
        <div class="content">
            <h1>🐕🐕文章</h1>
            <small>微笑.g</small>
            <p>Lorem100...</p>
            <h3>我的狗</h3>
            <img src="https://images.unsplash.com/photo-1507146426996-ef05306b995a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2100&q=80"
                alt="doggy" />
            <p>Lorem50...</p>
        </div>
        <nav>
            <ul>
                <li><i class="fas fa-home"></i><a href="#"> Home</a></li>
                ...
            </ul>
        </nav>
    </div>

body内的结构还是比较简单明了的，这个项目主要是给close和open两个按钮绑定事件来增删container.classList内.show-nav，主要是css中有一些点要注意。
首先用到了transform-origin: top left;这个css属性transform-origin让你更改一个元素变形的原点，这里是指定左上为原点，注意的是这个属性值可以使用一个，两个或三个值来指定（xyz三方向）。
其次用.container.show-nav {transform: rotate(-20deg);} [transform](transform - CSS（层叠样式表） | MDN (mozilla.org))属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改 CSS 视觉格式化模型的坐标空间来实现的。我们这里就是用来旋转rotote()。
这里还用了position: fixed来绝对定位，这种情况下元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口（viewport）的位置来指定元素位置。元素的位置在屏幕滚动时不会改变。
nav内用了list-style-type: none来设置列表元素的 marker为空；text-transform: uppercase 这个属性指定如何将元素的文本大写。它可以用于使文本显示为全大写或全小写，也可单独对每一个单词进行操作。这里让其大写。

4 Hidden Search Widget 隐藏搜索框

    <div class="search">
        <input type="text" class="input" placeholder="搜索...">
        <button class="btn">
            <i class="fas fa-search"></i>
        </button>
    </div>

这个项目挺让人熟悉的，也挺简单的，用js给.btn绑定点击事件，执行search.classList.toggle('active')与input.focus()来切换css方案和让输入框聚焦，这样效果就达成了。
css方面首先进行常规布局，主要是给.search.active 后的.input加长度和让按钮向右偏转 transform: translateX(198px) 这样效果就完成了。

5 Blurry Loading 模糊加载

const bg = document.querySelector('.bg')
const loadText = document.querySelector('.loading-text')

let load = 0
let int = setInterval(blurring, 30)

function blurring() {
    load++
    if (load > 99) {
        clearInterval(int)
    }
    loadText.innerText = `${load}%`
    loadText.style.opacity = scale(load, 0, 100, 1, 0)
    bg.style.filter = `blur(${scale(load, 0, 100, 30, 0)}px)`
}

// https://stackoverflow.com/questions/10756313/javascript-jquery-map-a-range-of-numbers-to-another-range-of-numbers
const scale = (num, in_min, in_max, out_min, out_max) => {
    return ((num - in_min) * (out_max - out_min)) / (in_max - in_min) + out_min
}

这个项目主要是js利用setInterval来控制变化，每次load++，让文字透明度变大，模糊效果减弱。
css中用到了calc(100vw + 60px)来设置背景宽高，这个salc()计算的符号必须左右空格，计算符号要有才能生效。
此外js中用到的css属性filter将模糊或颜色偏移等图形效果应用于元素，简单来讲就是添加滤镜效果。