(個人筆記)在給在線簡歷增加js殊效過程當中碰到的題目及解決方法二

github
預覽

點擊菜單轉動動畫首頁

let top = element.offsetTop;
let targetTop = top-80;//目的位置,看成盡頭坐標
let currentTop = window.scrollY;//當前windows轉動到的間隔,當作出發點
let n = 50;//n是步數
let step = (targetTop-currentTop)/n;//分25步
let i = 0;//i是每次反覆都加1的變量
let meauscroll = setInterval(() =>{
if(i===n){
window.clearInterval(meauscroll);
return;//既要消滅,又要return
}
i++;//
window.scrollTo(0,currentTop+step*i)
},500/n)//500毫秒除以25幀,就是每走一步的時刻

tween.js庫(緩動動畫)

緩動函數速查表
tween.js庫GitHub
cdnjs搜刮tween
引入

tween.js一個網站的教程

基礎運用指南

let targetTop = top-80;//目的位置,看成盡頭坐標
let currentTop = window.scrollY;//當前windows轉動到的間隔,當作出發點
let s = targetTop-currentTop;//間隔
let t =Math.abs(s)/100*100 ; //每100像素用100毫秒來走,如許時刻就不是牢固的,是
t>500 ? 500:t;//t假如大於500毫秒,就強迫他變成500,防備挪動間隔太長過慢
///tween.js
function animate(time) {
requestAnimationFrame(animate);
TWEEN.update(time);
}
requestAnimationFrame(animate);//上面這段代碼是瀏覽器用來依據電腦差別機能差別,限制動畫的幀數的.幀數不是本身定的,是瀏覽器自動天生的
var coords = { x: currentTop };//肇端位置
var tween = new TWEEN.Tween(coords)
.to({ x: targetTop }, t)//目的位置
.easing(TWEEN.Easing.Quintic.Out)//動畫範例
.onUpdate(function() {
window.scrollTo(0,coords.x);//每次更新的變量要附在什麼上面
})
.start();

張鑫旭輕便用法

張鑫旭的文章怎樣運用tween.js,且衍生了本身的animation.js簡樸用法

張鑫旭基礎運用指南:

div1.Onclick= function () {
Math.animation(0, 800, function (value) {
div1.style.left = value + 'px';
}, 'Bounce.easeInOut', 600);
}

自動高亮導航

//auto height light navbar 自動高亮個導航
let specialArr = document.querySelectorAll('[data-x]');//挑選悉數屬性為data-x的標籤
let minIndex = 0;
for (let i = 1; i if(Math.abs(specialArr[i].offsetTop-window.scrollY) minIndex = i;
}
}
// console.log(specialArr[minIndex]);
for (let i = 0; i specialArr[i].classList.remove('active');
}
specialArr[minIndex].classList.add('active');
let minid = specialArr[minIndex].id;//取到id
// console.log(minid);
let aTarget = document.querySelector('a[href="#' + minid + '"]');//找到href為id的誰人a
// console.log(document.querySelector('a[href = "#siteSkills"]'))
let li = aTarget.parentNode;
// console.log(li);
let liBrotherAndMe = li.parentNode.children;//挑選兄弟和本身的結點
for (let i = 0; i liBrotherAndMe[i].classList.remove('active');
}
li.classList.add('active');

知識點1

let specialArr = document.querySelectorAll('[data-x]');//挑選悉數屬性為data-x的標籤

document.querySelector('a[href="#' + minid + '"]');//找到href為id的誰人a

挑選器的運用,運用屬性挑選

知識點2

[data-x].active{
outline: 10px solid red;
}

[data-x].active示意屬性為data-x且具有acticve的class的標籤的圍困線為10px solid red

處理一個BUG

由於高亮菜單和挪動到菜單上又移出來用的同一個類名active所以會有爭執,相當於做高亮行動的時刻,顯現的是鼠標做挪動出時的行動.所以零丁給高亮子菜單一個行動highLightActive

具體做法是,將js中增加active的class改成highLightActive
並將CSS代碼轉變,在挑選器上面增加一行

.topNavBar nav>ul>li.active>a::after,
.topNavBar nav>ul>li.highLightActive>a::after/*這裡是增加的*/{
opacity: 1;
animation: meauBottomSlide 0.5s ;
}

增加垂直偏挪動畫

增加向上偏移緩動動畫,當進入頁面時usercard偏移一次,然後移到響應的位置偏移一次
道理,最先都加上offsetclass,當挪動到位置的時刻,去掉offset屬性即可.

[data-x]{
transform: translateY(0);
transition: all 1s ease;
}
[data-x].offset{
transform: translateY(300px);
}

須要注重的點,offset必需直接加載html里,用js加的話,transition過渡動畫翻開后也會實行一次,翻開頁面就會往退卻.意義就是剛最先是不偏移的,加了js后最先偏移了.這也要過渡.

然後在最小的minindex那邊

// 增加每次湧現都往上偏挪動畫
specialArr[minIndex].classList.remove('offset');

須要注重的是,假如要完成最最先usercard翻開頁面就向上廉價的話,須要把內里的寫成函數,然後再翻開頁面就實行一遍,然後再在window.onscroll里實行

hightLightAndOffetToUp();//先實行一次,以便usercard能夠砸翻開頁面的時刻就舉行向上偏移

window.Onscroll= function () {
if(window.scrollY > 0){
topNavBar.classList.add('sticky');
}else {
topNavBar.classList.remove('sticky')
}
hightLightAndOffetToUp();
}
function hightLightAndOffetToUp() {//自動高亮個導航和向上偏移函數代碼...}


progress進度條動畫

頭腦:照樣運用CSS過渡transition動畫

section.skill .progressBar{
overflow: hidden;
}
section.skill .progress{
transform: translateX(0);
transition: all 1.8s ease;
}
section.skill.offset .progress{
transform: translateX(-100%);
}

當section.skill.offset .progress的寄義是
當section且class為skill且為fooset時,.progress就向左偏移100%,section.skill .progress的寄義為,當去掉offset時,偏移為0,且這個變化要實行transition過渡動畫

父元素,progressBar要設置overflow: hidden;以便來隱蔽進度條的偏移.

操縱DOM經常使用API總結

操縱DOM經常使用API總結

一些問題

[多選]怎樣獵取一個元素的爸爸節點：
var divParent = div._?_

假如不知道，請搜刮 MDN parent

A. parentNode
B. parentElement

怎樣檢測一個元素是筆墨照樣標籤？

var isElement = div.__?__ === 1
假如不知道，請搜刮 MDN node type
nodeType

怎樣獵取一個元素的一切子代標籤（標籤不包含文本）

let children = div.____?____
此處填什麼？

假如不會就搜刮 MDN children

A. children

怎樣獵取一個元素的一切子代節點（節點包含標籤和筆墨）

let children = div.____?____
此處填什麼？

假如不會就搜刮 MDN children
childNodes

怎樣獵取一個div標籤的下一個標籤？
B. div.nextSibling 獵取的有多是筆墨，須要不斷接見 nextSibling 直到獵取到一個 nodeType 為 1 的節點才行

怎樣獵取一個div標籤的一切同級（兄弟）標籤？
C. 聲明空數組 siblings，遍歷 div.parentNode.children，將 div 之外的元素 push 到數組裡