黑马程序员技术交流社区

标题: web前端培训公开课：炫酷页面特效教程笔记 [打印本页]

---

作者: 童瑞凯老师    时间: 2017-6-14 17:28
标题: web前端培训公开课：炫酷页面特效教程笔记

1、360浏览器产品详情页面案例【http://se.360.cn/】

常见案例演示：

http://www.dowebok.com/demo/2014/97/#page1 网易邮箱

     http://www.dowebok.com/demo/2014/78/#page6  百度百科

1、jQuery插件fullpage介绍

如今我们经常能见到全屏网站，尤其是国外网站。这些网站用几幅很大的图片或色块做背景，再添加一些简单的内容，显得格外的高端大气上档次。比如 iPhone 5C 的介绍页面（查看），QQ浏览器的官网站。如果你也希望你的网站能设计成全屏的，显得更上档次，你可以试试 fullPage.js。

fullPage.js是一个基于 jQuery 的插件，它能够很方便、很轻松的制作出全屏网站，主要功能有：

·        支持鼠标滚动

·        支持前进后退和键盘控制

·        多个回调函数

·        支持手机、平板触摸事件

·        支持 CSS3 动画

·        支持窗口缩放

·        窗口缩放时自动调整

·     可设置滚动宽度、背景颜色、滚动速度、循环选项、回调、文本对齐方式等等

基本使用：

<link rel="stylesheet" href="css/jquery.fullPage.css"><script src="js/jquery.min.js"></script><script src="js/jquery.fullPage.js"></script>
<div id="fullpage">
    <div class="first section" ></div>
    <div class="second section"></div>
    <div class="thrid section"></div>
    <div class="fourth section"></div>
    <div class="fivth section"></div>
</div>
<script>
        $(function(){
                $('#fullpage').fullpage();
        });
</script>

底层原理：竖着的轮播图,监听鼠标滚轮.

var i=0;  //监听鼠标滚轮事件.
document.onmousewheel=function(){
      console.log(i++);
}

3、CSS3动画新特性详解

动画的基本使用：

定义动画：

@keyframes  animateName0%{

}

100%{

}

使用动画：

    .currentElement{

animation:animateName  2s linear1s inifinite;

}

动画属性详细介绍：

需要执行的动画的名称
animation-name: move;
这个动画执行的时间.
animation-duration: 5s;
动画执行的次数.
animation-iteration-count: infinite;
动画延迟的时间.
animation-delay: 2s;
线性速度.
animation-timing-function: linear;
动画结束了的状态
animation-fill-mode:forwards;
交替动画.
animation-direction: alternate;

4、CSS3在网页动画特效中的技巧分享

   无缝滚动案例.

5、animate.css 库的介绍及使用

6、360案例的第四屏动画效果的实现.

sectionsColor : ['#0da5d6', '#2AB561', '#DE8910', '#16BA9D', '#0DA5D6']

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2