Valdis的魔法商店

这几天在用HTML搞一些简单的视频特效，于是难免要记住一些<video>标签的属性。这里索性搞了个简单的速查。width 视频宽度 height 视频高度 paused 是否暂停 ended 是否播放完毕 playbackRate 播放速率 1.0为正常速度，2.0为二倍速，以此类推 currentTime 当前已播放的秒数 ...

下午花了几个小时边学边做，做出来了一个中国地图的倒角模型。其中中国地图的数据是geojson的格式，由于相关法律这里无法提供地图数据。如果想要学习交流使用可以前往github上翻一翻。使用的工具很单纯：THREE.js (ver 11.5，主要用了挤压模型和缓冲模型，材质使用的基础半透明材质和线材质) d3.v5.js (只用到了d3-geo的Mercator变换和其他的坐标变换小工具)...

最近发现makeMePulse网站上的一个叫做“Nomadic Tribe”的交互网页（????网页链接），它是2019年被FWA收录的交互网页之一。出于好奇，看到了这个网页使用了一个叫TweenLite.min.js的文件，顺藤摸瓜找到了GSAP这个平台。GSAP(GreenSock Animation Platform，GreenSock动画平台)是一个诞生多年的2D动画引擎，早年运行在...

在d3.js的语境下，scale是用来生成坐标轴用的：let axis = d3.axisXXX(scale); // 如此就得到了一个坐标轴生成器这里的XXX有四个选项，分别是Left、Right、Top、Bottom，用来表示生成坐标轴的摆放位置，这里暂且不多说。而scale的一般用法是：let scale = d3.scaleXXX().domain(param)....

在Angular或Vue中，视图（view）和模型（model）之间是能够实现双向数据绑定的，这也是Angular和Vue的一大特点。就是说，当用户修改视图时，和视图相关的那个变量值也会发生改变；当那个变量值自己发生变化时，视图也会相应作出改变。JavaScript中的对象（Object）是由一个个键值对（key-value）组成的，类似于Ruby中的哈希表或者Python中的字典。这些键值对...

使用change()并不能实现此效果，因为必须鼠标松开时才会触发，而当鼠标移动时并不会触发：// 这样是不行的$("#slider").change(() => { console.log("changed!");});应该这样写：$("#slider").on('input propertychange', () => { console.log(...

WebGL是OpenGL ES 2.0的Web标准，它结合JavaScript在HTML5的<canvas></canvas>上渲染图形。WebGL现在已经是HTML5 Canvas的绘制上下文之一。因此在使用上的流程和OpenGL ES存在了诸多相似之处，函数名和参数也几乎是相同的。...<canvas id="main-canvas"></...

Github：https://github.com/russellgoldenberg/scrollama缺点：无法识别svg内的元素初始化滚动控制器：let scroller = scrollama();启用功能scroller.setup({ // 设置启动参数 step: "#id", // 选择器或DOM元素集合，用于指定触发交互的元...

文档：http://scrollmagic.io/docs/index.html

Webpack版本：4.25.1特性 有code-spliting（代码分割）的功能，可以根据需要进行加载，而不是一次加载全部 通过loader处理各种文件（js、图片、css、json、less、coffeescipt等），任何静态的资源会被视为模块 插件 模块热更新 适合大型项目 安装npm i webpack --save-dev...

Vue的父组件和子组件之间是可以相互传递数据的。父组件→子组件：设置props属性；子组件→父组件：$emit()函数。下面举例说明。先写一个简单的组件Child，可以通过单击+或-按钮来改变num_child的值并显示。<template> <p>Child value: {{num_child}}</p> &l...