lulu酱

这种整页翻转的效果主要是做rotateY的动画，并结合一些CSS的3d属性实现。 主要是通过计算页面翻折过来的位置。 这两种原理上都不是很复杂，需要各个细节配合好，形成一个连贯的翻书动画。 我们先重点说一下第一种翻页效果的实现。 1. 基本布局 一个li.paper就表示一张纸…

我是个很懒的人，开发过程中经常有意无意地刻意避开数学相关的知识，你也知道解数学题非常枯燥无趣。平时写动画也尽量使用 css3 来实现，timer-function 随意选用，最多也就调一下 cubic-bezier，找到看着舒服的就行。但是怎样让动画更顺滑，写出更贴近自然的动画…

之所以写这个总结，还要从上周的一次移动端项目的 debug 说起。那天，测试小姐姐拿着自己的 iphone6s 过来找我，说页面打不开。我想：这怎么可能，我手机里挺好的呀，Chrome调试工具也没报错呀！就把她手机拿过来看了看，发现一进去还真就是一片空白。WTF（手动黑人问号）…

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。 作为网页设计的热点趋势，越来越多的网站应用了这项技术。 通常而言，滚动视差在前端需要辅助 Javascript 才能实现。当然，其实 CSS 在实现滚动…

有时候我们经常会碰到这些场景：玩掘金、知乎的时候复制一段文字，总是会在内容后面加上一些版权信息，以及像小说网站等都有禁止选中，禁止复制这种功能，还有点击自动复制账号的功能。 我也经常遇到这些场景，有时候会去想这后面到底是怎么做，周末趁着有空去研究了一下，然后发现这些都跟操作剪贴…

采用20 / 80原则学习和使用 Grid 布局。 本文不会覆盖Grid 布局的所有细节，而是面向那些想快速用起来并看到效果的你们。我将会向你介绍 Grid 技术的20%，学会了这些你就掌握了Grid 功力的80%了，开心不🤒。 For a programmer, lazin…

在前端开发的过程中，我们经常会需要绑定一些持续触发的事件，如 resize、scroll、mousemove 等等，但有些时候我们并不希望在事件持续触发的过程中那么频繁地去执行函数。 通常这种情况下我们怎么去解决的呢？一般来讲，防抖和节流是比较好的解决方案。 让我们先来看看在事…