1.Expanding Cards
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: In elastic box layout
flex
attribute : Let all the child elements of the elastic box model object have the same length , And ignore their internal content . - JavaScript: utilize
[].filter.call()
Method can quickly realize simple tab switching . Such as the above example source code :
const panelItems = document.querySelectorAll(".container > .panel");
panelItems.forEach(item => {
item.addEventListener('click',() => {
[].filter.call(item.parentElement.children,el => el !== item).forEach(el => el.classList.remove('active'));
item.classList.add('active')
});
});
2.Progress Steps
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The use of variables and the use of pseudo elements in the vertical and horizontal center of the elastic box . - JavaScript: Calculate the width of the progress bar , Operation of class name . As shown in the above example, part of the source code is as follows :
function handleClass(el){
let methods = {
addClass,
removeClass
};
function addClass(c){
el.classList.add(c);
return methods;
};
function removeClass(c){
el.classList.remove(c);
return methods;
}
return methods
}
3.Rotating Navigation Animation
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:CSS Elastic box layout plus
rotate
Animation . - JavaScript: Add and remove class names . As shown in the above example, part of the source code is as follows :
const addClass = (el,className) => el.classList.add(className);
const removeClass = (el,className) => el.classList.remove(className);
4.hidden-search-widget
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:CSS Transition animations + Change of width +
input
Ofplaceholder
style . - JavaScript: Add and remove class names . As shown in the above example, part of the source code is as follows :
.search.active > .input {
width: 240px;
}
.search.active > .search-btn {
transform: translateX(238px);
}
.search > .search-btn,.search > .input {
border: none;
width: 45px;
height: 45px;
outline: none;
transition: all .3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
border-radius: 8px;
}
searchBtn.addEventListener('click',() => {
searchContainer.classList.toggle('active');
searchInput.focus();
})
5.Blurry Loading
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS filter
Property usage ;. - JavaScript: Timer plus dynamic setting style . As shown in the above example, part of the source code is as follows :
let load = 0;
let timer = null;
let blurryLoadingHandler = function(){
load++;
if(load > 99){
clearTimeout(timer)
}else{
timer = setTimeout(blurryLoadingHandler,20);
}
text.textContent = ` Page loading ${ load }%`;
text.style.opacity = scale(load,0,100,1,0);
bg.style.filter = `blur(${scale(load,0,100,20,0)}px)`;
}
blurryLoadingHandler();
Here is a very important tool function ( Several subsequent examples use this tool function ), As shown below :
const scale = (n,inMin,inMax,outerMin,outerMax) => (n - inMin) * (outerMax - outerMin) / (inMax - inMin) + outerMin;
The purpose of this tool function is to map one range of numbers to another range of numbers . For example , take 1 ~ 100
The range of numbers mapped to 0 ~ 1
Between .
details .
6.Scroll Animation
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
Displacement animation . - JavaScript: Creating elements dynamically + Element scrolling event listener + Judgment of the visible area of the view + Anti shake function . As shown in the above example, part of the source code is as follows :
function debounce(fn,time = 100){
let timer = null;
return function(){
if(timer)clearTimeout(timer);
timer = setTimeout(fn,time);
}
}
let triggerBottom = window.innerHeight / 5 * 4;
boxElements.forEach((box,index) => {
const top = box.getBoundingClientRect().top;
if(top <= triggerBottom){
box.classList.add('show');
}else{
box.classList.remove('show');
}
})
7. Split Landing Page
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
Transition effects + The elastic box is vertically and horizontally centered +CSS
location + Change of width . - JavaScript: Mouse hover Events + Operation of class name . As shown in the above example, part of the source code is as follows :
HTMLElement.prototype.addClass = function(className) {
this.classList.add(className);
};
HTMLElement.prototype.removeClass = function(className){
this.classList.remove(className);
}
const on = (el,type,handler,useCapture = false) => {
if(el && type && handler) {
el.addEventListener(type,handler,useCapture);
}
}
on(leftSplit,'mouseenter',() => container.addClass('hover-left'));
on(leftSplit,'mouseleave',() => container.removeClass('hover-left'));
on(rightSplit,'mouseenter',() => container.addClass('hover-right'));
on(rightSplit,'mouseleave',() => container.removeClass('hover-right'));
From this example , I know, too mouseenter、mouseleave
and mouseover、mouseout
The difference between , Summarized below :
- enter Trigger only 1 Time , It will not continue to trigger until the mouse leaves the target element , Empathy leave That's how I understand . and over And out Is constantly triggering .
- enter Enter child element , adopt e.target It's also indistinguishable from moving in / Remove the child element or the parent element , and over And out You can distinguish .
8.Form Wave
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The gradient + The elastic box is vertically and horizontally centered +CSS
Transition animations +CSS
Displacement transformation + Focus on the use of pseudo class selectors and sibling element selectors . - JavaScript: Replace string with label + Creating elements dynamically . As shown in the above example, part of the source code is as follows :
const createLetter = v => v.split("").map((letter,idx) => `<span style="transition-delay:${ idx * 50 }ms">${ letter }</span>`).join("");
9.Sound Board
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The gradient + The elastic box is vertically and horizontally centered + Basic styles . - JavaScript: Creating elements dynamically + Play the audio (
audio
label ). As shown in the above example, part of the source code is as follows :
sounds.forEach(sound => {
const btn = create('button');
btn.textContent = sound;
btn.type = "button";
const audio = create('audio');
audio.src = "./audio/" + sound + '.mp3';
audio.id = sound;
btn.addEventListener('click',() => {
stopSounds();
$('#' + sound).play();
});
buttonContainer.appendChild(btn);
buttonContainer.insertAdjacentElement('beforebegin',audio);
});
10. Dad Jokes
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The gradient + The elastic box is vertically and horizontally centered + Basic styles . - JavaScript: Event monitoring +
fetch API
Request interface . As shown in the above example, part of the source code is as follows :
const api = 'https://icanhazdadjoke.com';
const on = (el,type,handler,useCapture = false) => {
if(el && type && handler){
el.addEventListener(type,handler,useCapture);
}
}
on(getJokeBtn,'click',request);
request();
async function request(){
const res = await fetch(api,headerConfig);
const data = await res.json();
content.innerHTML = data.joke;
}
11. Event Keycodes
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The gradient + The elastic box is vertically and horizontally centered + Basic styles . - JavaScript: Keyboard event monitoring + Properties of the event object . As shown in the above example, part of the source code is as follows :
const container = document.querySelector('#container');
window.addEventListener("keydown",event => {
createKeyCodeTemplate(event);
});
function createKeyCodeTemplate(e){
const { key,keyCode,code } = e;
let template = "";
[
{
title:"event.key",
content:key === " " ? "Space" : key
},
{
title:"event.keyCode",
content:keyCode
},
{
title:"event.code",
content:code
}
].forEach(value => {
template += `<div class="key"><small>${ value.title }</small>${ value.content }</div>`;
});
container.innerHTML = template;
}
12. Faq Collapse
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
font-awesome
Use of font library + Pseudo element selector + location +CSS
The gradient + Basic styles . - JavaScript: Creating elements dynamically + Class name switching + Event agent . As shown in the above example, part of the source code is as follows :
const faqs = document.querySelectorAll('.faq-container > .faq');
container.addEventListener('click',e => {
if(e.target.className.indexOf('faq-icon') > -1){
faqs[[].indexOf.call(faqs,e.target.parentElement)].classList.toggle('active');
}
});
13. Random Choice Picker
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles .
- JavaScript: Creating elements dynamically + Class name switching + Usage of delay timer + random number + Keyboard event monitoring . As shown in the above example, part of the source code is as follows :
function createTags(value,splitSymbol){
if(!value || !value.length)return;
const words = value.split(splitSymbol).map(v => v.trim()).filter(v => v);
tags.innerHTML = '';
words.forEach(word => {
const tag = document.createElement('span');
tag.classList.add('tag');
tag.innerText = word;
tags.appendChild(tag);
})
}
function randomTag(){
const time = 50;
let timer = null;
let randomHighLight = () => {
const randomTagElement = pickerRandomTag();
highLightTag(randomTagElement);
timer = setTimeout(randomHighLight,100);
setTimeout(() => {
unHighLightTag(randomTagElement);
},100);
}
randomHighLight();
setTimeout(() => {
clearTimeout(timer);
setTimeout(() => {
const randomTagElement = pickerRandomTag();
highLightTag(randomTagElement);
},100);
},time * 100);
}
function pickerRandomTag(){
const tagElements = document.querySelectorAll('#tags .tag');
return tagElements[Math.floor(Math.random() * tagElements.length)];
}
14. Animated Navigation
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles + location + Displacement transformation and angular rotation .
- JavaScript: Class name switching . As shown in the above example, part of the source code is as follows :
toggle.addEventListener('click',() => nav.classList.toggle('active'));
15. Incrementing Counter
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +font-awesome
Use of font library . - JavaScript: Creating elements dynamically + The timer implements incremental addition . As shown in the above example, part of the source code is as follows :
function updateCounterHandler() {
const counters_elements = document.querySelectorAll('.counter');
counters_elements.forEach(element => {
element.textContent = '0';
const updateCounter = () => {
const value = +element.getAttribute('data-count');
const textContent = +element.textContent;
const increment = value / 100;
if (textContent < value) {
element.textContent = `${Math.ceil(increment + textContent)}`;
setTimeout(updateCounter, 10);
} else {
element.textContent = value;
}
}
updateCounter();
});
}
16. Drink Water
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +CSS
Transition effects . - JavaScript: Regular expressions + loop + Style and content settings . As shown in the above example, part of the source code is as follows :
if (actives.length === l) {
setHeightVisible('0', 'hidden', '350px', 'visible');
setTextContent("100%", "0L");
} else if (actives.length === 0) {
setHeightVisible('350px', 'visible', '0', 'hidden');
setTextContent("12.5%", "2L");
} else {
const h1 = unitHei * (l - actives.length) + 'px';
const h2 = unitHei * actives.length + 'px';
setHeightVisible(h1, 'visible', h2, 'visible');
const t1 = (unitHei * actives.length / 350) * 100 + "%";
const t2 = (cups[i].textContent.replace(/ml/, "").replace(/\s+/, "") - 0) * (l - actives.length) / 1000 + 'L';
setTextContent(t1, t2);
}
17. movie-app
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +CSS
Transition effects + Remove the floating . - JavaScript: Interface request + Keyboard event monitoring . As shown in the above example, part of the source code is as follows :
search.addEventListener('keydown',e => {
if(e.keyCode === 13){
let value = e.target.value.replace(/\s+/,"");
if(value){
getMovies(SEARCH_API + value);
setTimeout(() => {
e.target.value = "";
},1000);
}else{
window.location.reload(true);
}
}
})
PS: This example effect is due to limited interface access , Need to climb over the wall to access .
18. background-slider
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient + shadows + location + Pseudo element selector . - JavaScript: Background setting and class name operation . As shown in the above example, part of the source code is as follows :
let currentActive = 0;
function setBackgroundImage(){
const url = slideItems[currentActive].style.backgroundImage;
background.style.backgroundImage = url;
}
function setSlideItem(){
const currentSlide = slideItems[currentActive];
const siblings = [].filter.call(slideItems,slide => slide !== currentSlide);
currentSlide.classList.add('active');
siblings.forEach(slide => slide.classList.remove('active'));
}
19. theme-clock
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
Variable + shadows + location . - JavaScript: Switch between Chinese and English and theme mode , And the processing of date objects . As shown in the above example, part of the source code is as follows :
function setCurrentDate(){
const date = new Date();
const month = date.getMonth();
const day = date.getDay();
const time = date.getDate();
const hour = date.getHours();
const hourForClock = hour % 12;
const minute = date.getMinutes();
const second = date.getSeconds();
const amPm = hour >= 12 ? langText[currentLang]['time-after-text'] : langText[currentLang]['time-before-text'];
const w = currentLang === 'zh' ? dayZHs : days;
const m = currentLang === 'zh' ? monthZHs : months;
const values = [
`translate(-50%,-100%) rotate(${ scale(hourForClock,0,11,0,360) }deg)`,
`translate(-50%,-100%) rotate(${ scale(minute,0,59,0,360) }deg)`,
`translate(-50%,-100%) rotate(${ scale(second,0,59,0,360) }deg)`
];
[hourEl,minuteEl,secondEl].forEach((item,index) => setTransForm(item,values[index]));
timeEl.innerHTML = `${ hour }:${ minute >= 10 ? minute : '0' + minute } ${ amPm }`;
dateEl.innerHTML = `${w[day]},${ m[month]}<span class="circle">${ time }</span>${ langText[currentLang]['date-day-text'] }`;
timer = setTimeout(setCurrentDate,1000);
}
PS: This example also uses the same example 5 The same tool function
scale
function
20. button-ripple-effect
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +CSS
Animation . - JavaScript: Coordinate calculation + The offset + Timer . As shown in the above example, part of the source code is as follows :
const x = e.clientX;
const y = e.clientY;
const left = this.offsetLeft;
const top = this.offsetTop;
const circleX = x - left;
const circleY = y - top;
const span = document.createElement('span');
span.classList.add('circle');
span.style.left = circleX + 'px';
span.style.top = circleY + 'px';
this.appendChild(span);
setTimeout(() => span.remove(),1000);
21. drawing-app
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles .
- JavaScript:
canvas API
+mouse
Events and calculationsx
Andy
coordinate +ewColorPicker
Usage of . As shown in the above example, part of the source code is as follows :
function mouseDownHandler(e){
isPressed = true;
x = e.offsetX;
y = e.offsetY;
}
function throttle(fn,wait = 100){
let done = false;
return (...args) => {
if(!done){
fn.call(this,args);
done = true;
}
setTimeout(() => {
done = false;
},wait);
}
}
22. drag-n-drop
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +CSS
Elastic box layout . - JavaScript:
drag event API
+ Randomly generated image . As shown in the above example, part of the source code is as follows :
function onDragStart(){
this.classList.add('drag-move');
setTimeout(() => this.className = "invisible",200);
}
function onDragEnd(){
this.classList.add("drag-fill");
}
function onDragOver(e){
e.preventDefault();
}
function onDragEnter(e){
e.preventDefault();
this.classList.add('drag-active');
}
function onDragLeave(){
this.className = "drag-item";
}
function onDrop(){
this.className = "drag-item";
this.appendChild(dragFill);
}
23. content-placholder
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient +CSS
Card style . - JavaScript: Skeleton screen loading effect . As shown in the above example, part of the source code is as follows :
animated_bgs.forEach(bg => bg.classList.remove("animated-bg"));
animated_bgs_texts.forEach(text => text.classList.remove("animated-bg-text"));
24. sticky-navbar
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient + Fixed positioning navigation . - JavaScript: Scroll Events . As shown in the above example, part of the source code is as follows :
window.addEventListener("scroll",e => {
if(window.scrollY > nav.offsetHeight + 100) {
nav.classList.add("active");
}else{
nav.classList.remove("active");
}
})
PS: The layout of the mobile terminal is also made here .
25. double-slider
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient + Displacement transformation . - JavaScript: The implementation idea of the rotation chart , It's mainly the use of
transformY
Mobile usetransformX
. As shown in the above example, part of the source code is as follows :
function setTransform(){
let translate = isHorizontal() ? "translateX" : "translateY";
leftSlide.style.transform = `${ translate }(${position * currentIndex}px)`;
rightSlide.style.transform = `${ translate }(${-(position * currentIndex)}px)`;
}
26. toast-notification
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles + Basic style of message prompt box .
- JavaScript: Encapsulate a randomly created message prompt box . As shown in the above example, part of the source code is as follows :
function createNotification({message = null,type = null,auto = false,autoTime = 1000,left = 0,top = 0}){
const toastItem = createEle("div");
let closeItem = null;
if(!auto){
closeItem = createEle("span");
closeItem.innerHTML = "×";
closeItem.className = "toast-close-btn";
}
toastItem.className = `toast toast-${type}`;
toastItem.textContent = message;
if(closeItem)toastItem.appendChild(closeItem);
container.appendChild(toastItem);
const leftValue = (left - toastItem.clientWidth) <= 0 ? 0 : left - toastItem.clientWidth - 30;
const topValue = (top - toastItem.clientHeight) <= 0 ? 0 : top - toastItem.clientHeight - 30;
toastItem.style.left = leftValue + 'px';
toastItem.style.top = topValue + 'px';
if(auto){
setTimeout(() => {
toastItem.remove();
},autoTime);
}else{
closeItem.addEventListener("click",() => {
toastItem.remove();
});
}
}
The implementation idea of message prompt box can refer to This article .
27. github-profiles
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles .
- JavaScript:
try-catch
Exception handling syntax +axios API
requestgithub API
+async-await
grammar . As shown in the above example, part of the source code is as follows :
async function getRepoList(username){
try {
const { data } = await axios(githubAPI + username + '/repos?sort=created');
addRepoList(data);
} catch (error) {
if(error.response.status == 404){
createErrorCard(" Error finding warehouse !");
}
}
}
28. double-click-heart
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
Draw love . - JavaScript: Calculation of the number of events . As shown in the above example, part of the source code is as follows :
function clickHandler(e){
if(clickTime === 0){
clickTime = Date.now();
}else{
if(Date.now() - clickTime < 400){
createHeart(e);
clickTime = 0;
}else{
clickTime = Date.now();
}
}
}
29. auto-text-effect
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles .
- JavaScript: Timer + The calculation of timer time . As shown in the above example, part of the source code is as follows :
let time = 300 / speed.value;
writeText();
function writeText(){
text.innerHTML = string.slice(0,idx);
idx++;
if(idx > string.length){
idx = 1;
}
setTimeout(writeText,time);
}
speed.addEventListener("input",e => time = 300 / e.target.value);
30. password generator
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout .
- JavaScript: Switch between Chinese and English + Select the box to listen for events + random number +
copy API
. As shown in the above example, part of the source code is as follows :
function getRandomLower(){
// a ~ z Of code by 97 ~ 122
// According to the charCodeAt() Method to get
return String.fromCharCode(Math.floor(Math.random() * 26) + 97);
}
function getRandomUpper(){
// A ~ Z Of code by 65 ~ 90
// According to the charCodeAt() Method to get
return String.fromCharCode(Math.floor(Math.random() * 26) + 65);
}
function getRandomNumber(){
// 0 ~ 9 Of code by 48 ~ 57
// According to the charCodeAt() Method to get
return String.fromCharCode(Math.floor(Math.random() * 10) + 48);
}
31. good-cheap-fast
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
Implement switch widget style + Basic layout style . - JavaScript:
input
Ofchange
Event monitoring . As shown in the above example, part of the source code is as follows :
const checkBoxElements = document.querySelectorAll(".switch-container input[type='checkbox']");
checkBoxElements.forEach(item => item.addEventListener("change",e => {
const index = Array.from(checkBoxElements).indexOf(e.target);
if(Array.from(checkBoxElements).every(v => v.checked)){
if(index === 0){
checkBoxElements[2].checked = false;
}else if(index === 1){
checkBoxElements[0].checked = false;
}else{
checkBoxElements[1].checked = false;
}
}
}));
32. notes-app
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles + Card layout .
- JavaScript:
marked.js
Use +localStorage API
Store the data + Calculation of mouse cursor position . As shown in the above example, part of the source code is as follows :
on($(".edit", note), "click", e => {
const isFocus = textarea.getAttribute("data-focus");
if (isFocus === "false") {
textarea.setAttribute("data-focus","true");
if(textarea.classList.contains("hidden")){
textarea.classList.remove("hidden");
}
if(!focusStatus){
textarea.value = notes[index].text;
}
const text = textarea.value.trim();
// console.log(text);
if (textarea.setSelectionRange) {
textarea.focus();
textarea.setSelectionRange(text.length, text.length);
}else if (textarea.createTextRange) {
const range = textarea.createTextRange();
range.collapse(true);
range.moveEnd('character', text.length);
range.moveStart('character', text.length);
range.select();
}
} else {
textarea.setAttribute("data-focus","false");
notes[index].text = textarea.value;
main.innerHTML = marked(notes[index].text);
setData("notes", notes);
}
});
33. animated-countdown
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles + Displacement 、 rotate 、 Zoom animation .
- JavaScript: Animation Events + Animation creation and reset . As shown in the above example, part of the source code is as follows :
function runAnimation(){
const numArr = $$("span",numGroup);
const nextToLast = numArr.length - 1;
numArr[0].classList.add("in");
numArr.forEach((num,index) => {
num.addEventListener("animationend",e => {
const {animationName} = e;
if(animationName === "goIn" && index !== nextToLast){
num.classList.remove("in");
num.classList.add("out");
}else if(animationName === "goOut" && num.nextElementSibling){
num.nextElementSibling.classList.add("in");
}else{
counter.classList.add("hide");
final.classList.add("show");
}
})
})
}
function resetAnimation(){
counter.classList.remove("hide");
final.classList.remove("show");
const numArr = $$("span",numGroup);
if(numArr){
numArr.forEach(num => num.classList.value = '');
numArr[0].classList.add("in");
}
}
34. image-carousel
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout .
- JavaScript: The timer realizes the rotation . As shown in the above example, part of the source code is as follows :
function changeCarouselItem(){
if(currentIndex > carouselItems.length - 1){
currentIndex = 0;
}else if(currentIndex < 0){
currentIndex = carouselItems.length - 1;
}
carousel.style.transform = `translateX(-${ currentIndex * carouselContainer.offsetWidth }px)`;
}
PS: There's an extra hole in the timer , in other words , For example, we use setTimeout Simulation Implementation setInterval There will be problems with the method here , I am here js Comments are added to the code to explain .
// let interval = mySetInterval(run,1000);
// Why use this method can't achieve the desired effect?
// Use this method as follow to replace window.setInterval,clicked the prev button more to get the stranger effect.
// Maybe this method does not conform to the specification,So make sure to use window.setInterval.
// function mySetInterval(handler,time = 1000){
// let timer = null;
// const interval = () => {
// handler();
// timer = setTimeout(interval,time);
// }
// interval();
// return {
// clearMyInterval(){
// clearTimeout(timer);
// }
// }
// }
This is because we use setTimeout
The implemented timer does not conform to the specification ,setInterval
By default there will be 10ms
Delayed execution of .
Reference specifications .
35. hover board
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic styles +
CSS
The gradient . - JavaScript: Creating elements dynamically + Suspension Events . As shown in the above example, part of the source code is as follows :
function setColor(element){
element.style.background = `linear-gradient(135deg, ${ randomColor() } 10%, ${ randomColor() } 100%)`;
element.style.boxShadow = `0 0 2px ${ randomColor() },0 0 10px ${ randomColor() }`;
}
function removeColor(element){
element.style.background = `linear-gradient(135deg, #1d064e 10%, #10031a 100%)`;
element.style.boxShadow = `0 0 2px #736a85`;
}
36. pokedex
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout +
CSS
The gradient . - JavaScript:
fetch API
Interface request + Create cards . As shown in the above example, part of the source code is as follows :
function createPokemon(pokemon){
const pokemonItem = document.createElement("div");
pokemonItem.classList.add("pokedex");
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1).toLowerCase();
const id = pokemon.id.toString().padStart(3,"0");
const poke_types = pokemon.types.map(type => type.type.name);
const type = main_types.find(type => poke_types.indexOf(type) > -1);
const color = colors[type];
pokemonItem.style.background = `linear-gradient(135deg, ${ color } 10%, ${ randomColor() } 100%)`;
pokemonItem.innerHTML = `
<div class="pokedex-avatar">
<img src="https://pokeres.bastionbot.org/images/pokemon/${pokemon.id}.png" alt="the pokemon">
</div>
<div class="info">
<span class="number">#${ id }</span>
<h3 class="name">${ name }</h3>
<small class="type">Type:<span>${ type }</span></small>
</div>`;
container.appendChild(pokemonItem);
}
In particular : The interface seems unstable , Maybe it's my Internet reason , The picture is not loaded .
37. mobile-tab-navigation
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout +
CSS
Gradient to achieve mobile phone layout . - JavaScript: The feeling is that the mobile terminal realizes a rotation map switching , utilize
opacity
Set up , There's nothing to say . As shown in the above example, part of the source code is as follows :
function hideAllElement(nodeList){
nodeList.forEach(item => item.classList.remove("active"));
}
navItems.forEach((item,index) => {
item.addEventListener("click",() => {
hideAllElement(navItems);
hideAllElement(carouselItems);
item.classList.add("active");
carouselItems[index].classList.add("active");
})
})
38. password-strength-background
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: In fact, it mainly uses
tailwind.css
This atomizationCSS
frame . - JavaScript: Listen for input box events , Then change the background blur . As shown in the above example, part of the source code is as follows :
password.addEventListener("input",e => {
const { value } = e.target;
const blur = 20 - value.length * 2;
background.style.filter = `blur(${ blur }px)`;
});
39. 3D-background-boxes
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
vw、vh
Layout +skew
Tilt shift . - JavaScript: loop + Setting of background image positioning . As shown in the above example, part of the source code is as follows :
function createBox(){
for(let i = 0;i < 4;i++){
for(let j = 0;j < 4;j++){
const box = document.createElement("div");
box.classList.add("box");
box.style.backgroundPosition = `${ -j * 15 }vw ${ -i * 15 }vh`;
boxContainer.appendChild(box);
}
}
}
40. Verify Your Account
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout +
input
Some special style settings . - JavaScript:
JavaScript focus
event . As shown in the above example, part of the source code is as follows :
.code-container .code:focus {
border-color: #2397ef;
}
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.code:valid {
border-color: #034775;
box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}
function onFocusHandler(nodeList){
onFocus(nodeList[0]);
nodeList.forEach((node,index) => {
node.addEventListener("keydown",e => {
// console.log(e.key);
if(e.key >= 0 && e.key <= 9){
nodeList[index].value = "";
setTimeout(() => onFocus(nodeList[index + 1]),0);
}else{
setTimeout(() => onFocus(nodeList[index - 1]),0);
}
})
});
}
function onFocus(node){
if(!node)return;
const { nodeName } = node;
return nodeName && nodeName.toLowerCase() === "input" && node.focus();
}
41. live-user-filter
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout + Scroll bar style .
- JavaScript:
fetch API
Interface request +input
Event filtering data . As shown in the above example, part of the source code is as follows :
async function requestData(){
const res = await fetch('https://randomuser.me/api?results=50');
const { results } = await res.json();
result.innerHTML = "";
results.forEach(user => {
const listItem = document.createElement("li");
filterData.push(listItem);
const { picture:{ large },name:{ first,last },location:{ city,country } } = user;
listItem.innerHTML = `
<img src="${ large }" alt="${ first + ' ' + last }" />
<div class="user-info">
<h4>${ first } ${ last }</h4>
<p>${ city },${ country }</p>
</div>
`;
result.appendChild(listItem);
})
}
42. feedback-ui-design
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
Draw love + Basic style layout . - JavaScript: Implementation of tab switching function . As shown in the above example, part of the source code is as follows :
ratingItem.forEach(item => {
item.addEventListener("click",e => {
siblings(item).forEach(sib => sib.classList.remove("active"));
item.classList.add("active");
selectRating = item.innerText;
})
});
send.addEventListener("click",() => {
selectRatingItem.innerText = selectRating;
sendPage.classList.add("hide");
receivePage.classList.remove("hide");
});
back.addEventListener("click",() => {
selectRating = $(".rating.active").innerText;
selectRatingItem.innerText = $(".rating.active").innerText;
sendPage.classList.remove("hide");
receivePage.classList.add("hide");
});
43. custom-range-slider
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
input
Element style settings ( Compatible writing ) + Basic style layout . - JavaScript:
input range
Elementalinput
Event monitoring . As shown in the above example, part of the source code is as follows :
input[type="range"]::-webkit-slider-runnable-track {
background-image: linear-gradient(135deg, #E2B0FF 10%, #9F44D3 100%);
width: 100%;
height: 12px;
cursor: pointer;
border-radius: 4px;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
width: 25px;
height: 25px;
border-radius: 50%;
background-image: linear-gradient(135deg, #d9e2e6 10%, #e4e1e4 100%);
border: 1px solid #b233e4;
cursor: pointer;
margin-top: -6px;
}
range.addEventListener("input",e => {
// string to the number
const value = +e.target.value;
const label = e.target.nextElementSibling;
const range_width = getStyle(e.target,"width");//XXpx
const label_width = getStyle(label,"width");//XXpx
// Due to contain px,slice the width
const num_width = +range_width.slice(0,range_width.length - 2);
const num_label_width = +label_width.slice(0,label_width.length - 2);
const min = +e.target.min;
const max = +e.target.max;
const left = value * (num_width / max) - num_label_width / 2 + scale(value,min,max,10,-10);
label.style.left = `${left}px`;
label.innerHTML = value;
});
44. netflix-mobile-navigation
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Change of navigation width +
CSS
The gradient + Basic style layout . - JavaScript: Click the button to switch the display and hiding of the navigation bar . As shown in the above example, part of the source code is as follows :
function changeNav(type){
navList.forEach(nav => nav.classList[type === "open" ? "add" : "remove"]("visible"));
}
45. quiz-app
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Card layout + Basic styles .
- JavaScript: Form submission + Calculation of multiple-choice questions . As shown in the above example, part of the source code is as follows :
submit.addEventListener("click",() => {
const answer = getSelected();
if(answer){
if(answer === quizData[currentQuestion].correct){
score++;
}
currentQuestion++;
if(currentQuestion > quizData.length - 1){
quizContainer.innerHTML = `
<h2>You answered ${ score } / ${ quizData.length } questions correctly!</h2>
<button type="button" class="btn" onclick="location.reload()">reload</button>
`
}else{
loadQuiz();
}
}
})
46. testimonial-box-switcher
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
Animation + Change of width to achieve progress bar +font-awesome
Use of font library + Basic style layout . - JavaScript: The use of timers , Note that the execution time of the timer is the same as the execution animation time of the progress bar . As shown in the above example, part of the source code is as follows :
.progress-bar {
width: 100%;
height: 4px;
background-color: #fff;
animation: grow 10s linear infinite;
transform-origin: left;
}
@keyframes grow {
0% {
transform: scaleX(0);
}
}
function updateTestimonial(){
const { text,name,position,photo } = testimonials[currentIndex];
const renderElements = [testimonial,username,role];
userImage.setAttribute("src",photo);
order.innerHTML = currentIndex + 1;
[text,name,position].forEach((item,index) => renderElements[index].innerHTML = item);
currentIndex++;
if(currentIndex > testimonials.length - 1){
currentIndex = 0;
}
}
In particular :CSS It can also realize the progress bar .
47. random-image-feed
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Picture layout + Basic style layout +
CSS
Implementation of prompt box ( location + Pseudo elements ) +CSS
Get back to the top . - JavaScript: random number + ( Monitoring of rolling events ) Controls the display and hiding of the back to top button . As shown in the above example, part of the source code is as follows :
function onLoad(rows = 5) {
container.innerHTML = "";
for (let i = 0; i < rows * 3; i++) {
const imageItem = document.createElement("img");
imageItem.src = `${refreshURL}${getRandomSize()}`;
imageItem.alt = "random image-" + i;
imageItem.loading = "lazy";
container.appendChild(imageItem);
}
}
function getRandomSize() {
return `${getRandomValue()}x${getRandomValue()}`;
}
function getRandomValue() {
return Math.floor(Math.random() * 10) + 300;
}
window.onload = () => {
changeBtn.addEventListener("click", () => onLoad());
window.addEventListener("scroll", () => {
const { scrollTop, scrollHeight } = document.documentElement || document.body;
const { clientHeight } = flexCenter;
back.style.display = scrollTop + clientHeight > scrollHeight ? 'block' : 'none';
})
onLoad();
}
48. todo-list
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout +
CSS
The gradient . - JavaScript:
keydown
Andcontextmenu
Event monitoring +localStorage API
Store the data . As shown in the above example, part of the source code is as follows :
function addTodo(todo){
let inputValue = input.value;
if(todo){
inputValue = todo.text;
}
if(inputValue){
const liItem = document.createElement("li");
liItem.innerText = inputValue;
if(todo && todo.complete){
liItem.classList.add("complete");
}
liItem.addEventListener("click",() => {
liItem.classList.toggle("complete");
updateList();
});
liItem.addEventListener("contextmenu",(e) => {
e.preventDefault();
liItem.remove();
updateList();
});
todoList.appendChild(liItem);
input.value = "";
updateList();
}
}
function updateList(){
const listItem = $$("li",todoList);
const saveTodoData = [];
listItem.forEach(item => {
saveTodoData.push({
text:item.innerText,
complete:item.classList.contains("complete")
})
});
localStorage.setItem("todoData",JSON.stringify(saveTodoData));
}
49. insect-catch-game
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS: Basic style layout .
- JavaScript: Switch between Chinese and English + Replace the text in the element ( Does not contain label elements ) + The use of timers . As shown in the above example, part of the source code is as follows :
function replaceText(el,text,wrapSymbol = ""){
let newText = [];
if(wrapSymbol){
// why not use split method?,because it can filter the wrap symbol.
const getIndex = (txt) => txt.search(new RegExp("\\" + wrapSymbol));
let searchIndex = getIndex(text),i = 0,len = text.length;
while(searchIndex !== -1){
newText.push(text.slice(i,searchIndex) + wrapSymbol);
i = searchIndex;
if(getIndex(text.slice(searchIndex + 1)) === -1){
newText.push(text.slice(searchIndex + 1,len));
}
searchIndex = getIndex(text.slice(searchIndex + 1));
}
}
const walk = (el,handler) => {
const children = Array.from(el.childNodes);
let wrapIndex = children.findIndex(node => node.nodeName.toLowerCase() === "br");
children.forEach((node,index) => {
if(node.nodeType === 3 && node.textContent.replace(/\s+/,"")){
wrapSymbol ? handler(node,newText[index - wrapIndex < 0 ? 0 : index - wrapIndex]) : handler(node,text);;
}
});
}
walk(el,(node,txt) => {
const parent = node.parentNode;
parent.insertBefore(document.createTextNode(txt),node);
parent.removeChild(node);
});
}
Reference for the implementation of the above tool functions Here to achieve .
In particular : This example is a comprehensive example .
50. kinetic-loader
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:CSS Rotate animation + Basic style layout .
As shown in the above example, part of the source code is as follows :
@keyframes rotateA {
0%,25% {
transform: rotate(0deg);
}
50%,75% {
transform: rotate(180deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes rotateB {
0%,25% {
transform: rotate(90deg);
}
50%,75% {
transform: rotate(270deg);
}
100% {
transform: rotate(450deg);
}
}
The last day , An additional implementation 404
effect , It's a special ending , Isn't it fancy (^_^
). This is a CSS
Comprehensive use of animation , As shown below :
51. 404 page
The effect is shown in the figure :
- Source code
- Online example
- [ ] Summary of knowledge points :
- CSS:
CSS
The use of animation + Basic style layout +svg
Style settings of icon elements .
As shown in the above example, part of the source code is as follows :
@keyframes background {
from {
background: linear-gradient(135deg,#e0e0e0 10%,#ffffff 90%);
}
to {
background: linear-gradient(135deg,#ffffff 10%,#e0e0e0 90%);
}
}
@keyframes stampSlide {
0% {
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(130px);
}
100% {
transform: rotateX(90deg) rotateZ(-90deg) translateZ(-200px) translateY(-4000px);
}
}
@keyframes slide {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200px);
}
}
@keyframes roll {
0% {
transform: rotateZ(0deg);
}
85% {
transform: rotateZ(90deg);
}
87% {
transform: rotateZ(88deg);
}
90% {
transform: rotateZ(90deg);
}
100% {
transform: rotateZ(90deg);
}
}
@keyframes zeroFour {
0% {
content:"4";
}
100% {
content:"0";
}
}
@keyframes draw {
0% {
stroke-dasharray: 30 150;
stroke-dashoffset: 42;
}
100% {
stroke:rgba(8, 69, 131, 0.9);
stroke-dasharray: 224;
stroke-dashoffset: 0;
}
}