gulp note

By hiluluke on

前几天公司一个同事说了gulp用着太爽了,比grunt语法好很多。然后就猴急的尝试了下,并在公司之前的一个项目上做了实验。觉得有下面几点优点:

  • 更像是就是js语法,写起来很顺
  • 代码执行顺序更清晰
  • 代码量更少,主要是因为grunt各种大小括号换行导致其看起来很臃肿。
  • gulp.watch 太好用了。。

当然有几点grunt也是有优点,比如本省就支持在代码上面添加banner,但是gulp需要使用插件。

最后,推荐小伙伴也尝试着去使用gulp。下面是我自己的一些笔记。

gulp常用插件

安装插件和grunt一样就用npm了,不啰嗦。

javascript对象

By hiluluke on

主要是因为再重新读了一遍《javascript高级程序设计》(后文称其为js高)后对js的对象有了进一步认识,所以想写点东西总结下。

js对象基础

理解对象

创建对象的方式有很多种,通常有以下三种:

  • 通过创建一个Object实例然后再添加属性和方法
  • 通过对象字面量的方式的方式:
1
2
3
4
5
6
7
8
var person = {
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
  • 通过函数的方式
1
2
3
4
5
6
7
8
9
10
11
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
}

demo和原文在这

今天分享一个有趣的小动画。主要的想法是在切换导航(navigating)图片时模拟蹦床的弹性效果。其中的图片拖拽效果我们使用的是Elastic STack。而svg的动画,我们使用了snap.svg。当然我们在整个过程中会使用css 的transitions属性。

demo中的图片使用得是Leonard Nimoy,是为了向他致敬,其上周逝去了。(外国程序员好有情怀)

今天我们将看看如何实现像Serge Thoroval’s Atelier中的全屏背景滑动特效。
demo和原来译文

标签

为了达到这个滚动效果,我们需要一个能让我们构造4个不同“瓷砖”效果的特别标签结构,它们将使用同一张图片的不同部分。因为我们这是一个全屏滚动效果,所以我们需要确保让所有元素都延伸至全屏。为了使得我们能制定那个图片被可见,我们需要定义一个简单的初始结构并构建我们“瓷砖”的重复结构。初始结构就像这样:

1
2
3
4
5
6
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel"><img src="img/1.jpg" alt="Image 1"/></div>
<div class="panel"><img src="img/2.jpg" alt="Image 2"/></div>
<div class="panel"><img src="img/3.jpg" alt="Image 3"/></div>
<div class="panel"><img src="img/4.jpg" alt="Image 4"/></div>
</div>

为了去将一张图片分成4个小瓷砖,我们为每个面板构建如下的重复结构:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<div id="boxgallery" class="boxgallery" data-effect="effect-1">
<div class="panel current">
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/1.jpg" /></div>
</div>
</div>
<div class="panel">
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
<div class="bg-tile">
<div class="bg-img"><img src="img/2.jpg" /></div>
</div>
</div>
<div class="panel">
<!-- ... -->
</div>
<div class="panel">
<!-- ... -->
</div>
<nav>
<span class="prev"><i></i></span>
<span class="next"><i></i></span>
</nav>
</div>

今天我们将尝试去将在html中单独的一张图片利用css变换出堆叠的效果。关键的地方就是伪元素。

同时我们将看到,在我们实现的过程中,我们将会很快遇到一些混乱的代码,然后我们将使用一些方法使得代码变得整洁。