前端创意探索：速览「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 设置了导航栏、主要内容区域等的样式，从而构建了一个具有吸引力的页面布局。

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

相关推荐
小磊哥er6 分钟前
【前端工程化】前端工作中的业务规范有哪些
前端
旷世奇才李先生11 分钟前
Next.js 安装使用教程
开发语言·javascript·ecmascript
ᥬ 小月亮16 分钟前
webpack基础
前端·webpack
YongGit35 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士1 小时前
＜script setup＞中的setup作用以及和不带的区别对比
前端
RainbowSea2 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴2 小时前
笨方法学python -练习14
java·前端·python
Mintopia2 小时前
四叉树：二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖2 小时前
RabbitMQ：消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia2 小时前
Three.js 深度冲突：当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
热门推荐
012024年 最新 iPhone手机 历代机型、屏幕尺寸、纵横比、分辨率 整理02Coze实战第13讲：飞书多维表格读取+豆包生图模型，轻松批量生成短剧封面03Coze扣子平台完整体验和实践（附国内和国际版对比）04Word粘贴时出现“运行时错误53,文件未找到：MathPage.WLL“的解决方案05手机电脑之间快速传输图片视频文件，不压缩画质、不限制大小的方法！06扣子（coze）实战|我用扣子搭建了一个自动分析小红薯笔记内容的AI应用|详细步骤拆解07MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法08华为昇腾 910B 部署 DeepSeek-R1 蒸馏系列模型详细指南09DeepSeek各版本说明与优缺点分析10django中用 InforSuite RDS 替代memcache