05.用fullpage+less实现360浏览器之第一屏（2）

发表于 | 分类于

实现logo居中

有两种方法

  1. 利用子元素默认继承父级的宽度，设置text-align: center;
  2. margin: 0 auto

第一种方法见

子元素与父元素的width继承

那样设置后，图片在div中水平居中，由于100%继承父级宽度，呈现的效果就是在整个网页居中

第二种方法，会计算装logo的div有多宽，然后左右margin平均了，所以效果也是水平居中

html

1
2
3
4
5
6
7
<div id="fullpage">
    <div class="section section-one">
        <div class="logo" >
            <img src="./images/logo.png" alt="">
        </div>
    </div>
</div>

less

1
2
3
4
5
6
7
8
9
/*第一屏*/
.section-one{
  .logo{
    text-align: center;
    padding-top: 10%;
    box-sizing: border-box;
  }
 
}

效果

V6zADf.md.jpg

至于text，info水平居中和logo做法一样

实现动画

动态实现动画的前提是我拿到了section，怎么拿？

1
2
3
4
5
afterLoad: function (origin, destination, direction) {
 
    console.log(origin, destination, direction);

}

结果如下图

VcSAzR.md.jpg

可以看到，第一次载入的时候，afterLoad也会执行，只不过origin为null，direction也为null，只有destination有信息，并且鼠标放上item，会选中了section-one，这样子通过destination我们可以拿到section了

想实现的效果：滚进屏幕的时候，文字图片从有margin到为0，图片是逐渐由无到有的

需要用到transtion和afterLoad

首先我们在afterLoad回调函数这样设置

1
2
3
4
5
6
7
8
9
afterLoad: function (origin, destination, direction) {
 
    if(origin !== null){
        origin.item.className = origin.item.className.replace("current", "");
    }

    destination.item.className = destination.item.className + " current";
  
}

origin !== null 因为第一次加载时afterLoad也会触发，且origin为空，用replace方法将字符串current替换掉，设置为空，因为从第一屏滚出去的时候null不为空，且之前已经设置了current类，我们要在滚出去的时候把它清除掉

destination.item.className 这样设置，让current类作用在section-one

less

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
/*第一屏*/
.section-one{
  .logo{
    text-align: center;
    padding-top: 10%;
    box-sizing: border-box;

  }
  .text{
    text-align: center;
    margin: 5% 0;
    img{
      margin: 0 3%;
      opacity: 0;
      transition: all 1s linear 0s;
    }
  }
  .info{
    text-align: center;
  }
  &.current{
    .text{
      img{
        opacity: 1;
        margin: 0;
      }
    }
  }
}

效果：主要看第一屏

主要看第一屏