前端仙人的博客

Greensock 动画库的 ScrollTrigger 和 Draggable 插件可以帮助我们创建一些非常酷的响应用户交互的效果。在本教程中，我们将了解如何将它们一起使用，以创建一个可滚动和可拖动的交互式时间轴。我们将建立一个时间轴，显示周董的发行的专辑。我们时间轴的主题并不重要——主要是在多个日期发生的一系列事件——所以随意选择你自己的主题，让它对你来说更个性化！我们的网页顶部有一个时间轴，显示我们的日期，以及一些全角部分，我们每个日期的内容都将在其中存在。...

为什么要使用框架，你听过最好的答案是什么？大家好！2021的Web前端也是一如往常的五花八门！当然，我们也是学的落花流水的。不知道大家的学习路径是如何，也许有大前门辈是一路从原生JavaScript 、到jQuery 、再到三分框架的时代，而当中框架也经历不少更新（2016 - 2021）但很多的前端培训班的学习过程，可能刚学完JavaScript就直接学React、Vue 3 …等，我敢说有人（可能还不少）不知道JavaScript 的作者是谁，甚至也没听过网景，所以更别说框架了，为什么要学Jav

在浏览器打开网页之前会发生什么？本文的目的是帮助你了解当你在浏览器的地址栏中输入一个URL并按下回车键时会发生什么。我们就以本站为例解密URL当用户输入一个URL并按下回车键时，浏览器首先开始对输入的URL进行解码。分解URL，以找出 “协议”、"域名 "和 "路径名 "的内容。https://juejin.cn/在上述URL中，https是协议，juejin.cn是域名，/是路径名。如果没有协议描述或不是有效的域，浏览器将把输入的文本传递给浏览器的默认搜索引擎。检查HSTS列表HST

目标人物和目的我知道如何实现异步处理，但有时我不知道最佳做法，因为我不知道它的工作原理由于对执行顺序的保证不甚了解，有些变化不能放心地进行部署我想更多地了解它的工作原理，以便我能够更系统地实施它文章目录目标人物和目的JavaScript执行模型原子性工作队列web浏览器任务队列Node.js任务队列setTimeoutNode.js摘要JavaScript执行模型JavaScript执行模型嵌套在 Agent Cluster → Agent → Realm 中，如下图所示。HTML规范还规定

什么是故障效果？它的原意是 “短暂的干扰”，在视觉艺术中常被用来指 “图像干扰”。 这是恐怖片和网络片中最常见的效果之一。什么是RGB置换？色差、RGB偏移、RGB分裂（RGB split）等。有各种方法来描述它，但从本质上讲，它意味着光的三原色，即红、绿、蓝，在没有任何错位的情况下应该重叠显示的状态。这是与突变效果一起使用的，在某些情况下，突变一词被用来包括颜色的转变，所以在这种情况下也实施它，会产生更多的突变效果。实际操作HTML：<div class="glitch" style

走向 “Meta GSAP”。对 "完美 "无限滚动的追求有一件事常常被GSAP所忽视，那就是你几乎可以用它来制作任何东西的动画。这通常是因为当想到动画时，视觉上的东西会浮现在脑海中。我们的第一个想法并不是把这个过程带到一个Meta的层面，从后退一步开始做动画。但是，在更大的范围内思考动画工作，然后把它分解成若干层。例如，你播放一部动画片。这部动画片是一个构图的集合。每个构图都是一个场景。然后你有能力用遥控器擦过这些构图的集合，无论是在电脑上，还是用你的电视遥控器，或其他什么。正在发生的事情几乎有三个层

顶级的 Bootstrap 日期选择器和时间选择器插件Bootstrap的Datepicker元素是一种用户友好和直观的方式，可以轻松选择日期。它可用于移动端和PC端，还可以选择以 "从右到左 "的格式显示。日期选择器小部件通常用于在网络应用程序或表格中选择日期。日期选择器可以用来选择一个确切的日子，定义一个天、月或年的间隔。日期选择器根据国家提供了一些预定义的格式，如DD/MM/YYYY或MM/DD/YYYY，根据浏览器的语言设置在网页上相应显示。我相信，在一些潜在的使用案例中，默认的bootstr

用Object Literals意义在JavaScript中写出更好的条件语句在JavaScript中编写复杂的条件语句，总是有可能产生一些相当混乱的代码。长长的if/else语句或switch case列表会很快变得臃肿。当有多个条件时，我发现Object Literals是最易读的代码结构方式。让我们来看看它们是如何工作的。作为一个例子，假设我们有一个函数，它接收一个押韵的俚语并返回其含义。使用if/else语句，它看起来会是这样。function getTranslation(rhyme).

3D游戏菜单组件关于如何建立一个响应性、适应性和无障碍的3D游戏菜单的基础性概述。在这篇文章中，我想带着大家写一个3D游戏菜单组件的案例。首先让我们看看成品是什么样子的概述相信大家都玩过赛博朋克吧，最近正好迷上了这个游戏，里面的菜单栏深深引起了我的注意，特别是在新的AR/VR游戏中，让菜单看起来漂浮在空间中也是很炫的事情。今天我们讲重现这种效果的精髓，但要加上自适应和色彩方案。我们会使用实验性的CSS @custom-media和@nest来防止重复的媒体查询，并将媒体查询集中在组件样式块中。

使用 Flex Box，我们可以轻松地让我们的网页充当响应式容器首先，我们将快速创建一个包含以下 HTML 的文件<div class="viewport flex-parent flex-col"> <div class="nav flex-parent space-around"> <div class="box-1"></div> <div class="box-2">&lt

今天一起来了解一下，怎么在不靠其它套件的状况下，单纯的制作SVG动画。资料来源： https://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/SVG animation with SMIL能让SVG不靠JavaScript与CSS就能动起来是因为使用了SMIL（Synchronized Multimedia Integration Language），是W3C的标准之一，旨在以XML格式提供多媒体的交互表现（

霓虹灯文字可以为任何网站增添美好的未来感。我一直都很喜欢霓虹灯的那种未来感。在本文中，我们将使用CSS和keyframes实现文本发光效果，以及各种霓虹灯动画的方法。最终效果：为文本添加发光效果首先，让文本发光。可以使用text-shadow属性在CSS中完成此操作。.neonText { color: #fff; text-shadow: 0 0 7px #fff, 0 0 10px #fff, 0 0 21px #fff, 0 0 ...

这部分时间比较忙，正是我所在行业中的旺季，也没有时间更新，这篇文章我会用SCSS+GSAP实现一个屏幕指纹的登录效果，让我们先来看看效果图开始创作第一步：将指纹绘制转为SVG,我用 Adob​​e Illustrator 用钢笔工具追踪指纹，得到这组路径：<svg width='180' height='320'> <path d="M46.1,214.3c0,0-4.7-15.6,4.1-33.3"/> <path d="M53.5,1

练习动画最好的方式（一）：锁链按钮你能相信这张图片是由纯CSS绘画的吗？这是国外一位大师的作品，作者并把整个制作的过程都录制了下来，虽然不知道总共花了多少时间，但这绝对是一个惊人的作品我知道很多人会觉得，『对呀很酷，但是怎么实现的呢？』。我也不懂为什么，但知道能利用CSS 做出这种极限真的很令人感到兴奋。光是观察他的代码就可以学到不少技巧，虽然试着理解高手如何做到是能吸收不少经验，但还是会想要自己动手做点什么，好在我又发现了另一个稍微平易近人的高手- Aaron Iker，他大多的作

这几天摸索了SASS＋SCSS 的写法，发现有许多的GitHub 专案，使用它进行开发。自己进行几个专案后，编写速度确实有提升，于是整理出这篇SASS＋SCSS 教学，从SASS+SCSS 介绍→ 安装＋执行→ 语法SASS教学，进行文章编写。不敢说可以从入门到进阶，但对SASS 主观念的掌握，应该是没问题的，本篇文章内容SASS+SCSS介绍安装＋执行嵌套引用父选择器&变量引入混合继承操作符结论1. SASS＋SCSS 介绍SASS是一个成熟且稳定的CSS预处理.

快速排序是一种更有效的搜索算法比选择排序，在大多数情况下，这让使用递归的。递归意味着我们从同一函数内调用一个函数。有时，这是一种非常有用的做法，这是其中一种情况。我“在大多数情况下”说，因为我们将看到，在最坏情况下，冒泡排序可以采取相同的选择时间排序：O(n^2)。但在最佳情况下，它将O(n log n)在O(n)和之间的中间运行O(n^2)。它是如何工作的？给定一个数组，我们选择一个称为数据透视表的项目。然后，我们得到所有小于枢轴的项目，以及大于枢轴的项目。然后，我们在组成越来越小的项目的2数.