note1

购物车宣传（宣传页，活动页，h5宣传页）

全屏切换效果

通过鼠标的滚轮 切换全屏页面

• 使用fullpage来完成

• 使用动画 （js实现动画，css3实现动画）

  • 一个是帧动画 一个是补间动画
  • 什么是帧动画：使用定时器 每隔一段时间 更改当前元素的状态
  • 什么是补间动画：过渡(加过渡只要状态发生改变产出动画) 动画（多个节点来控制动画） 性能会更好
  • 在支持H5C3的的浏览器尽可能使用css3动画 （移动端开发）
  • transition animation
  • transition 组合写法（transition:all 1s linear 1s）
    的拆分写法 transition-property transition-duration transition-timing-function transition-delay

​ window.onmousewheel = function(){ console.log(‘ok’) };这个函数可以用来监听鼠标的滚轮事件

<div class="container">

            <div class="section active">

                 <h3>第一屏</h3>

            </div>

            <div class="section">

                 <h3>第二屏</h3>

            </div>

</div>
css可以通过
<style>
       .session: first-child{
           
       }
       .session: last-child{
           
       }

</style>
可以通过选择子元素进行改变样式

js实现动画  和css3显示的动画区别
  *一个是帧动画  一个是补间动画
  *什么是帧动画：使用定时器  每隔一段时间 来更改当前元素的状态
  什么是补间动画： 过度动画（加过渡只要状态发生变化改变产出动画）动画（多个   节点来控制动画）性能会更好
在支持H5C3的浏览器尽可能使用css3动画（移动端开发）
transition animation
transition 组合写法 transition： all 1s linear 1s
参数
1、ease：（逐渐变慢）默认值，ease函数等同于贝塞尔曲线(0.25, 0.1, 0.25, 1.0).

2、linear：（匀速），linear 函数等同于贝塞尔曲线(0.0, 0.0, 1.0, 1.0).

3、ease-in：(加速)，ease-in 函数等同于贝塞尔曲线(0.42, 0, 1.0, 1.0).

4、ease-out：（减速），ease-out 函数等同于贝塞尔曲线(0, 0, 0.58, 1.0).

5、ease-in-out：（加速然后减速），ease-in-out 函数等同于贝塞尔曲线(0.42, 0, 0.58, 1.0)

6、cubic-bezier：（该值允许你去自定义一个时间曲线）， 特定的cubic-bezier曲线。 (x1, y1, x2, y2)四个值特定于曲线上点P1和点P2。所有值需在[0, 1]区域内，否则无效。

著作权归作者所有。
商业转载请联系作者获得授权,非商业转载请注明出处。
原文: https://www.w3cplus.com/content/css3-transition © w3cplus.com
https://www.w3cplus.com/content/css3-animation
这两个网址有相关资料

行内元素做动画  要先转换成块级元素
注意写函数的时候
function ()
不能写成这样function()这样是不可以
注意格式

.screen04.now .sofa{
    opacity: 1;
    transform: translateX(1000px);
    transition: transform 3s;
}
当.sofa的由opacity=0变为1的时候 ，发生变化的时候，可能会出现延迟
这时就需要使用上面的过度，进行动画
/*3.能不能监听到动画或者过度的结束*/
/*4.css3当中 过渡 transitionend  动画 animationend*/
transitionend可以监听某个元素的事件是否结束了



/*jquery插件初始的时候封装这个方法*/
/*1.回想jquery插件的封装 $.fn.fullpage = function(){} */
/*2.jquery本身没有的方法通过$.fn的方式追加方法  认为是插件方法*/
/*3.例如：$.fn.src = function(){ return this.attr('src') } this 你选择谁this（jquery对象）执行谁 */
/*点击更多切换下一页*/
$('.more').on('click',function () {
$.fn.fullpage.moveSectionDown();
});

animate.css是一个动画的库 可以去参考一波 没有思路的时候