- 动效 文章 模型
-
-
three.js使用lookAt跟随路径移动相机代码示例
THREE.js move camera along path with lookAt target
-
three.js lightmap代码实例
lightmap often paired with ao map, for simulating real light shadow effect
-
使用AbortSignal (AbortController) 来取消fetch异步请求代码示例
how to abort a fetch async request
-
three.js测试3D模型动画闪烁问题
test animation glitching problem in three.js，闪烁问题通常是因为帧短时间跳跃幅度过大引起。
-
CSS3人行走动作图解和动画实现
对于人类而言，行走是一种很自然的想要前进并防止跌倒的一组动作重复。大部分人1岁就学会了走路，但至此以后的几十年间，或许我们从来没留意过自己行走姿势。当我们需要用计算机来模拟人类这个最简单的动作时，通过观察和分析，我们可以把步行简化为下面这样的一个过程：（1）中分：（也称作：contact 接触点）这是我们人为...
-
函数式JavaScript编程基础概念：Curry和Partial Application
本文介绍JS函数式编程中的两个概念：柯里（Curry）和部分应用程序（Partial Application）。什么是应用程序（Application）将函数应用于其参数以产生返回值的过程。什么是部分应用程序将函数应用于某些参数的过程，该部分应用的函数被返回供后续使用。换句话说，就是一个函数，接收一个多参数函数作为其参数，并返回一个使...
-
JavaScript语言多编程范式简介
和C++等语言类似，JS支持多范式（paradigms）编程。我们常常混合这些范式来完成一些大型Web项目。JS支持3种编程范式：命令式、面向对象和函数式。命令式（Imperative JavaScript）命令式就是简单的从上而下完成任务，流水账过程式编码风格：function>task(nums)>{ var>i,>sum=0,>squares>=>[]; for>(i=0;>i&nums.leng...
-
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么？
event是用户操作网页时发生的交互动作，比如click/move, event除了用户触发的动作外，还可以是文档加载，窗口滚动和大小调整。Event模型是什么？
Event模型指的是浏览器如何处理发生的事件。不同的浏览器其... -
常见面试题JS语言中四种函数调用方式实例讲解
JS的语言世界中函数（function）是一等公民，函数的调用有多种方法。普通调用这个是最常见和直接的方式：function>f(x)>{>>>>>>>> >>>>console.log(x*x); } f(5);>//>25方法调用函数被定义为对象的方法，以对象方法的形式调用，如下：
var>c>=>{>>>> >>>>v>:>0,>>>> >>>>f>:>function(x)>{>>>>>>>>>>>>>>>> >>>>>... -
常见面试题JavaScript闭包（ES5语法）
JavaScript闭包（Closure）是常见的JS面试题，是否理解闭包是一个简单的区分JS初级和高级程序员的判例。几乎每个JS程序员都在使用闭包，有意或无意间。比如编写一个jQuery鼠标点击处理函数：$(function()>{ >>var>option; >>$(".scssbox").click(function()>{>//>闭包，该闭包同时也是一个匿名函数 >>>>option...
-
使用CSS3 box-decoration-break特性实现多行文本样式
当文章中的长文本被自动断行为多行文本时，其样式可能会出乎我们的设计。本文介绍如何使用CSS3中的box-decoration-break特性来处理多行元素样式。
按照规范定义，box-decoration-break被用来处理分页（page-break）或断行（line-break）时元素的... -
NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是，严格而言NodeJS和Java、PHP并非对等概念，NodeJS是基于JS的一个应用程序，而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实现一个网页应用，在这样的相等用例下，各自的性能表现。自从2013年Paypal应用迁移到Node后，NodeJS被越来越多的巨头所使用。这里面当然不只是技术层面的考虑，还...
-
前端开发框架技术选型：Angular2 VS React VS jQuery
Angular和React是主流的2个前端开发框架，但是严格来说两者并非对等的概念。Angular是一个基于MVC（或者MVVM）的框架，包含model（模型）/view（视图）/controller（控制器），React只有view（视图）层。而Angular2使用TypeScript重建了整个框架，好处是可以利用TypeScript的增强语法。相对而言Angular是一个重量级的开发框...
-
Web界面编程状态变化和JS开发框架（React/Angular/Ember）
UI编程中的一个关键课题就是界面组件化（可复用）以及组件状态管理。稍早一些的windows程序员可能接触过MFC，其界面编程中有一个DDX（DoDataExchange）的机制，用来绑定界面组件和数据成员。通过这样的绑定，由框架来负责当数据发生变化时完成相应UI的更新，而无需开发者编写代码，这无疑简化了编程。而在早期的Web开发中，...
-
CSS3弹性布局内容对齐（justify-content）属性使用详解
内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐。该操作发生在弹性长度以及自动边距被确定后。 它用来在存在剩余空间时如何加以分配，也会在发生内容溢出时影响项目的对齐。注意：弹性布局中有两个基本术语main axis和cross axis，一般情况下，我们可以把它们各自看作是...
-
CSS3弹性布局弹性流（flex-flow）属性详解和实例
弹性布局是CSS3引入的强大的布局方式，用来替代以前Web开发人员使用的一些复杂而易错hacks方法（如使用float进行类似流式布局）。其中flex-flow是flex-direction和flex-wrap属性的简写方式，语法如下：flex-flow: &flex-direction< || &flex-wrap{>> >>>>display:>flex;>> }>> .flex-container.first>{>> >>>>flex-flow...
-
如何使用CSS3合成模式（blend-mode）和滤镜（filter）实现彩色蜡笔（时光机）照片特效
在之前的文章中我们已经详细讲解过CSS3滤镜（filter，也可称之为过滤器）的工作方式，本文将实现一个当下流行的时光机相片特效实例来说明其实际用途。
我们首先实现一个勾勒轮廓的效果，这可以通过两张相同背景图细微错位然后求差值来获得：.colored-pencil-effect:before>{ >>>>>>>>background-image:>url(/uploads/1... -
深入理解CSS3滤镜（filter）功能和实例详解
CSS3滤镜功能源自SVG滤镜规范，SVG滤镜最早用来给矢量图添加类似PS中像素图的一些特效。
把这个滤镜功能引入到普通HTML元素中可以带来很有趣的效果（模糊、变形、色度等），这赋予开发者更多创意表达的空间。为止SVG和CSS工作组联合起来制定一个协调统一的滤镜规范： -
深入理解JS和CSS3动画性能问题和技术选择
本文对比了JS及其框架和CSS3的动画性能，并深入剖析了其内在原因。技术结论大致如下：1. jQuery出于设计原因，在动画性能上表现最差2. CSS3由于把动画逻辑推给了浏览器，优化了内存消耗、DOM操作和默认利用了RAF，所以要比jQuery动画性能更好3. CSS3可能会引起浏览器主线程和复合器线程之间过度数据交互，从而导致性能下降4...
-
© 2023 TechBrood Co. All rights reserved 沪ICP备14011478号