前端创意探索：速览「50projects50days」项目精华 - 第五部分（21-25 天）

猫头_2023-08-30 14:07

前言

主打：快速获取完善开发思想。

您是否在众多文章中看到过「50projects50days」项目的详细描述？垂涎三尺了？没有时间？如果您时间有限，或者只想快速领略其中的亮点，那么您来对地方了。

50projects50days项目地址：🌟🌟🌟🌟🌟

GitHub - bradtraversy/50projects50days: 50+ mini web projects using HTML, CSS & JS

简介： 想要快速领略「50projects50days」的精华，却又没有足够的时间？本文为您呈现这个项目系列的精华概览，每个项目都展示了不同的技术和创意，我们将深入剖析每个项目的关键代码和实现步骤，了解其背后的设计思想和技术原理。无论您是初学者还是有一定经验的开发者，本文都将为您提供灵感和知识，帮助您更好地理解和应用 HTML、CSS 和 JavaScript。无需大量时间投入，让我们一起探索这些项目，汲取前端技术的精华。前方的创意和知识等待着您的发现！

目录

由于篇幅问题，本文将分成数个部分来介绍项目系列。以下✅是已发布部分的导航

上期解析 16day-20day，项目展示。

本期解析 21day-25day，项目展示。

  • ✅ [Drag N Drop（拖放）](#Drag N Drop（拖放） "#heading-3")
  • ✅ [Drawing App（绘图应用程序）](#Drawing App（绘图应用程序） "#heading-6")
  • ✅ kineticLoader（运动的加载效果）
  • ✅ [Content Placeholder（骨架屏-内容占位符）](#Content Placeholder（骨架屏-内容占位符） "#heading-12")
  • ✅ [Sticky Navigation（粘滞导航栏）](#Sticky Navigation（粘滞导航栏） "#heading-15")

下期解析 26day-30day，项目展示。

传送门🚀

21、Drag N Drop（拖放）

主要关注点：实现基于拖放的元素交互。

实现效果：

本示例实现了一个基于拖放的元素交互界面。用户可以拖动一个具有背景图片的元素到页面中的空白区域，并在放置时触发一系列交互。

实现关键代码

HTML 结构：页面包含了一组空白区域和一个可拖动的元素。

html 复制代码 
<div class="empty">
  <div class="fill" draggable="true"></div>
</div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>
<div class="empty"></div>

JavaScript 逻辑：实现了拖放相关的事件处理逻辑。

js 复制代码 
const fill = document.querySelector('.fill')
const empties = document.querySelectorAll('.empty')

fill.addEventListener('dragstart', dragStart)
fill.addEventListener('dragend', dragEnd)

for(const empty of empties) {
    empty.addEventListener('dragover', dragOver)
    empty.addEventListener('dragenter', dragEnter)
    empty.addEventListener('dragleave', dragLeave)
    empty.addEventListener('drop', dragDrop)
}

function dragStart() {
    this.className += ' hold' 
    setTimeout(() => this.className = 'invisible', 0)
}

function dragEnd() {
    this.className = 'fill'
}

function dragOver(e) {
    e.preventDefault()
}

function dragEnter(e) {
    e.preventDefault()
    this.className += ' hovered'
}

function dragLeave() {
    this.className = 'empty'
}

function dragDrop() {
    this.className = 'empty'
    this.append(fill)
}

实现步骤：

  1. 页面包含一个可拖动的元素和一组空白区域
  2. JavaScript 中定义了拖放相关的事件处理函数，如 dragStart、dragEnd、dragOver 等。
  3. fill对应着：dragStart、dragEnd，容器对应着：dragOver、dragEnter、dragDrop，而这些对应着的同时，也会与css的属性一一对应上，监听修改calssName的值，产生一系列的效果。

CSS样式

🐯：定义了拖放交互的样式效果

css 复制代码 
.empty {
  height: 150px;
  width: 150px;
  margin: 10px;
  border: solid 3px black;
  background: white;
}

.fill {
  background-image: url('https://source.unsplash.com/random/150x150');
  height: 145px;
  width: 145px;
  cursor: pointer;
}

.hold {
  border: solid 5px #ccc;
}

.hovered {
  background-color: #333;
  border-color: white;
  border-style: dashed;
}

总结：

这篇示例展示了如何利用 HTML、JavaScript 和 CSS 实现基于拖放的元素交互。用户可以拖动一个带有背景图片的元素到空白区域，通过事件处理函数实现了拖放的各个阶段，同时通过 CSS 样式营造了良好的交互体验。

对 fill 的图片进行拖动开始与结束，对empty容器判断移入移出。

drag事件-文档

22、Drawing App（绘图应用程序）

主要关注点：实现一个基本的绘画应用，允许用户在画布上绘制图形。

实现效果：

本示例实现了一个简单的绘画应用，用户可以在画布上使用不同颜色和大小的笔绘制图形

实现关键代码

HTML 结构：页面包含一个画布和工具栏。

html 复制代码 
<canvas id="canvas" width="800" height="700"></canvas>
<div class="toolbox">
  <button id="decrease">-</button>
  <span id="size">10</span>
  <button id="increase">+</button>
  <input type="color" id="color">
  <button id="clear">X</button>
</div>

JavaScript 逻辑：实现了绘画应用的交互逻辑。

canvas 处理

js 复制代码 
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

// 监听鼠标按下
canvas.addEventListener('mousedown', (e) => {
    isPressed = true

    x = e.offsetX
    y = e.offsetY
})

//鼠标抬起防止误触
document.addEventListener('mouseup', (e) => {
  isPressed = false

  x = undefined
  y = undefined
})

// 监听鼠标移动
canvas.addEventListener('mousemove', (e) => {
    if(isPressed) {
        const x2 = e.offsetX
        const y2 = e.offsetY

        drawCircle(x2, y2)
        drawLine(x, y, x2, y2)

        x = x2
        y = y2
    }
})

// 画圆
function drawCircle(x, y) {
    ctx.beginPath();
    ctx.arc(x, y, size, 0, Math.PI * 2)
    ctx.fillStyle = color
    ctx.fill()
}

// 画线段
function drawLine(x1, y1, x2, y2) {
    ctx.beginPath()
    ctx.moveTo(x1, y1)
    ctx.lineTo(x2, y2)
    ctx.strokeStyle = color
    ctx.lineWidth = size * 2
    ctx.stroke()
}

// 清理画布
clearEl.addEventListener('click', () => ctx.clearRect(0, 0, canvas.width, canvas.height))

调出颜色看板,附值颜色

js 复制代码 
const colorEl = document.getElementById('color');

colorEl.value = 'black'

let color = colorEl.value

colorEl.addEventListener('change', (e) => color = e.target.value)

实现步骤：

  1. canvas 监听鼠标按下与移动事件，drawCircle 与 drawLine的方法，是点击画出一个圆，移动时候类似线相连接。线太方正，然而采用画圆在线前面，就会柔和很多。

    没有drawLine的方法画出的效果

  2. 为了消除误判，松开时 isPressed = false 禁止，在移动鼠标时候再次画东西

  3. 由于input - color 点击监听，改变赋予颜色。

  4. 剩下的就是监听字体大小调整。

CSS样式

🐯：定义了绘画应用的外观效果

css 复制代码 
canvas {
  border: 2px solid steelblue;
}

.toolbox {
  background-color: steelblue;
  border: 1px solid slateblue;
  display: flex;
  width: 804px;
  padding: 1rem;
}

.toolbox > * {
  background-color: #fff;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  height: 50px;
  width: 50px;
  margin: 0.25rem;
  padding: 0.25rem;
  cursor: pointer;
}

.toolbox > *:last-child {
  margin-left: auto;
}

总结：

这篇示例展示了如何使用 HTML、JavaScript 和 CSS 实现一个简单的绘画应用。用户可以在画布上使用不同颜色和大小的笔进行绘制，工具栏提供了调整笔刷大小、选择颜色以及清除画布等功能。

23、kineticLoader（动感加载效果）

主要关注点：展示一个动感的加载动画，以吸引用户的注意。

实现效果：

XXXXXXXX。

实现关键代码

HTML 结构：页面包含一个带有加载动画的容器。

html 复制代码 
<div class="kinetic"></div>

JavaScript 逻辑：无。

CSS样式

🐯 设计图案：定义了加载动画的图案。

css 复制代码 
.kinetic {
  position: relative;
  height: 80px;
  width: 80px;
}

.kinetic::after,
.kinetic::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #fff;
  animation: rotateA 2s linear infinite 0.5s;
}

.kinetic::before {
  transform: rotate(90deg);
  animation: rotateB 2s linear infinite;
}

🐯 设计效果：定义了加载动画的样式效果

css 复制代码 
@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);
  }
}

实现步骤：

  1. 使用伪元素 ::before 和 ::after 分别绘制两个旋转的几何图形。
  2. rotateA与 rotateB有着不同的旋转角度规则。
  3. kinetic::after, kinetic::before颜色一样形状一样，不过animation不一样，在kinetic::before覆盖了kinetic::after,kinetic::before的运动动画。
  4. 总4份，一份走留 0.5s，A的 0-25% 表示停止了下来了，B的 0.5s 刚刚到 90deg 就有了被撞击动起来的假象。

总结：

这篇示例展示了如何使用 HTML 和 CSS 创建一个动感的加载动画。加载动画通过旋转的几何图形产生视觉上的吸引力，适用于在加载页面内容时展示。

24、Content Placeholder（骨架屏-内容占位符）

主要关注点：展示一个内容占位符，使用户在数据加载之前有一个占位的界面。

实现效果：

本示例展示了一个内容占位符，用于在数据加载之前为用户提供一个占位的界面。界面中包含了图像、标题、文本等占位元素。

实现关键代码

HTML 结构：XXXXXXXX。

html 复制代码 
<div class="card">
      <div class="card-header animated-bg" id="header">&nbsp;</div>

      <div class="card-content">
        <h3 class="card-title animated-bg animated-bg-text" id="title">
          &nbsp;
        </h3>
        <p class="card-excerpt" id="excerpt">
          &nbsp;
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
          <span class="animated-bg animated-bg-text">&nbsp;</span>
        </p>
        <div class="author">
          <div class="profile-img animated-bg" id="profile_img">&nbsp;</div>
          <div class="author-info">
            <strong class="animated-bg animated-bg-text" id="name"
              >&nbsp;</strong
            >
            <small class="animated-bg animated-bg-text" id="date">&nbsp;</small>
          </div>
        </div>
      </div>
    </div>

JavaScript 逻辑：获取数据结束，开始移除动画。

js 复制代码 
animated_bgs.forEach((bg) => bg.classList.remove('animated-bg'))
animated_bg_texts.forEach((bg) => bg.classList.remove('animated-bg-text'))

实现步骤：

  1. 页面包含一个带有占位元素的容器，用于在数据加载前提供占位界面。
  2. JavaScript 在一段时间后加载数据并移除占位类animated-bg，以展示实际内容。
  3. CSS 样式定义了占位元素的外观效果，包括占位文本的背景渐变动画。

CSS样式

🐯：定义了内容占位符的样式。

css 复制代码 
/* 占位背景样式 */
.animated-bg {
  background-image: linear-gradient(
    to right,
    #f6f7f8 0%,
    #edeef1 10%,
    #f6f7f8 20%,
    #f6f7f8 100%
  );
  background-size: 200% 100%;
  animation: bgPos 1s linear infinite;
}

.animated-bg-text {
  border-radius: 50px;
  display: inline-block;
  margin: 0;
  height: 10px;
  width: 100%;
}

@keyframes bgPos {
  0% {
    background-position: 50% 0;
  }

  100% {
    background-position: -150% 0;
  }
}

🐯：图片的显示。

object-fit: cover

css 复制代码 
.card-header img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

总结：

这篇示例展示了如何使用 HTML、JavaScript 和 CSS 创建一个内容占位符，用于在数据加载之前为用户提供一个友好的占位界面，提高用户体验。

骨架屏：实际是使用背景的渐变颜色与背景的重复性，

25、Sticky Navigation（粘滞导航栏）

主要关注点：实现页面导航栏的滚动样式效果。

实现效果：

实现了当页面滚动时，导航栏的样式会发生变化，从而提供视觉上的反馈。

实现关键代码

HTML 结构：在提供的 HTML 代码中，页面主要由导航栏、主要内容区域以及一些内容组成。

html 复制代码 
<!-- 导航栏 -->
<nav class="nav">
  <!-- ... 导航栏内容 ... -->
</nav>

<!-- 主要内容区域 -->
<div class="hero">
  <!-- ... 主要内容区域内容 ... -->
</div>

<section class="container content">
  <!-- ... 内容区域内容 ... -->
</section>

JavaScript 逻辑：通过 JavaScript 监听页面滚动事件，根据滚动位置来改变导航栏的样式。

js 复制代码 
// 获取导航栏元素
const nav = document.querySelector('.nav');

// 监听页面滚动事件，调用 fixNav 函数
window.addEventListener('scroll', fixNav);

// 在滚动时改变导航栏样式
function fixNav() {
  if (window.scrollY > nav.offsetHeight + 150) {
    nav.classList.add('active');
  } else {
    nav.classList.remove('active');
  }
}

实现步骤：

  1. HTML 结构中包含导航栏、主要内容区域等。
  2. 使用 JavaScript 监听页面滚动事件，并根据滚动位置来改变导航栏样式。
  3. 通过 CSS 设置导航栏样式、主要内容区域样式等。

CSS样式

🐯：通过 CSS 设置了页面的基本样式、容器样式、导航栏样式以及导航栏滚动样式等。

css 复制代码 
/* 导航栏样式 */
.nav {
  position: fixed;
  background-color: #222;
  top: 0;
  left: 0;
  right: 0;
  transition: all 0.3s ease-in-out;
}

.nav a {
  color: #fff;
  text-decoration: none;
  padding: 7px 15px;
  transition: all 0.3s ease-in-out;
}

/* 导航栏滚动样式 */
.nav.active {
  background-color: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

总结：

这篇文章主要实现了一个页面导航栏的滚动样式效果。通过 JavaScript 监听页面滚动事件，根据滚动位置改变导航栏的样式，使用户在页面滚动时能够获得视觉上的反馈。同时，通过 CSS 设置了导航栏、主要内容区域等的样式，从而构建了一个具有吸引力的页面布局。

😘预知后事如何，待下回分解

相关推荐
一斤代码2 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子2 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年2 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子3 小时前
React Router 面试指南：从基础到实战
前端·react.js·前端框架
3Katrina3 小时前
深入理解 useLayoutEffect：解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路4 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_4 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说4 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409194 小时前
uniapp的app项目，某个页面长时间无操作，返回首页
前端·vue.js·uni-app
我在北京coding4 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
热门推荐
01【无标题】02集群聊天服务器---MySQL数据库的建立03Coze扣子平台完整体验和实践（附国内和国际版对比）04深度神经网络训练过程与常见概念05KGG转MP3工具|非KGM文件|解密音频06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07使用Ruby接入实时行情API教程08Java学习第十五部分——MyBatis09DeepSeek各版本说明与优缺点分析10Java类变量（静态变量）