SUXD队服H5实现方法介绍

原创 kayleee SUXD

咱们商汤UED终于有自己的队服啦～

这么多可爱的卡通形象➕自定义的队服烫印设计很难不爱啊！！

为了让更多小伙伴了解我们的新队服，因此我开发了一个H5来进行宣传，有兴趣的话来看看这个H5是怎么实现的吧～

前方高能！！！本期涉及代码，秃头预警！！

基本介绍

SUXD H5项目旨在推送宣传UED部门的队服设计，是针对于移动端开发的H5页面，由HTML + CSS + JavaScript，再使用Swiper及Animate.css效果库实现。

该H5的开发过程中重点包括如何置入素材，如何在不同尺寸的设备下保持自适应，以及如何实现交互效果。

效果库介绍

1. Swiper

Swiper是一个自由移动触摸滑块，适用于移动网站，移动网页应用，以及移动原生/混合应用，它专注于现代应用或平台，能带来最好的体验和最高的简单性。

💡 不需要JavaScript库，容量小加载快

💡 丰富的API，可以实现多种自定义效果

💡 支持JavaScript、React、Vue、Angular

🌐 官方地址：https://swiperjs.com/

2. Animate.css

Animate.css是一个可随时使用的、跨浏览器的动画库，非常适合强调、主页、滑块和注意力引导提示。

💡 包含多个常见动画

💡 易安装易用，新手友好

💡 支持class、@keyframe、CSS、JavaScript

🌐 官方地址：https://animate.style/

框架及构成

3.1

基本框架

SUXD H5 项目以一张长图为基础，是由多个动效和交互素材以及背景底图的叠加而成。为了在开发过程中方便调整，可以通过使用把它分为了10 个相同宽度的部分（下图中section1 至 section9 以及一个square_section）并把它们拼接在一起实现完整连贯的页面。

10个section分区示意图

如何把多个素材及背景底图置入？

其中静态的背景素材或者GIF背景作为每个<div>的背景，并在CSS中把它们设置为background-image。运用该实现方法是基于考虑到该H5是由很多层素材叠加而成，若把静态的背景素材或者GIF背景以<img>方式插入，再用<img>插入其背景上叠加的素材，那么新插入的素材则会默认显示于背景的上方/下方，使后续素材位置设置的程序复杂。若把背景在CSS 中以background-image 方法设置再用<img>插入素材，那么素材则会显示于背景上，方便素材位置的调整。

3.2

响应式实现方法

// 响应式布局

Responsive Design

响应式，是指一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。响应式布局可以为不同终端的用户提供更加舒适的界面和更好的用户体验。

响应式实现方法包含了素材大小和素材位置的设置。它保证了浏览页面的时候页面大小能够随着屏幕大小改变，与此同时H5 中的素材大小和位置也应有相应变化。

素材大小：素材的宽度可以通过vw（视窗宽度）设置，并在此基础上把它们的高度设为auto。

#flower {  width: 45vw;  height: auto;}

素材位置：素材位置的设置以背景底图长宽为参考，先使用CSS 置入背景图片，再使用jQuery计算并得到不同section背景图的长宽，并通过比例计算设置每个素材应有的位置。

section1中的笑脸的响应式实现步骤

1. 在CSS中在当前section的中置入背景图，把它宽度设为100%

#section1 {    background-image: url(./图片路径);    background-repeat: no-repeat;    background-size: 100% auto, 100% auto;    margin: auto;}

2. CSS中设置素材大小

#smile_face {  width: 30vw;  height: auto;}

3. 在JavaScript中提取当前body背景图的宽度，其宽度应约等于设备显示宽度

//提取屏幕宽度并计算section1高度screenWidth = $("body").width();

4. 在JavaScript中根据背景图的长宽比例计算出section1应有高度，并设置高度

section1背景图长宽比示意图

//section1中的高度section1Height = (screenWidth * 900 / 640); //section1图片长宽比为900:640$("#section1").css("height", (section1Height+"px"));

5. 确定素材基于背景图片的比例位置

6. 用jQuery给该素材添加CSS中的margin或者padding，使素材呈现在应有的位置

//笑脸位置$("#smile_face").css({"margin-left": 0.12*screenWidth+"px", "margin-top": 0.15*section1Height+"px"});

7. 创建函数，把之前步骤的JS代码放入函数中

8. 使用jQuery检测屏幕大小是否改变，如果改变的话则重新计算素材大小和位置（调用步骤7的函数）

$(window).resize(function() {    //重新调用计算素材大小和位置的函数});

💻 响应式demo：https://github.com/kayleeegao/responsive-demo

为什么不使用最常见的“media query”？

最一开始尝试使用media query来实现响应式布局，但发现因为市面上有很多不同尺寸大小的移动端设备，使用media query来兼顾所有的显示比例的话会产出比较繁琐的代码。除此之外，因为对每个素材的位置摆放需求要比较精准，media query很难涵盖到所有情况，用不同手机查看H5页面时就很容易出现素材位置的偏移。

交互动效

4.1

前三屏上下滑动吸附加交互动效

当用户在H5的前三屏（section1-section3）进行上滑/下滑操作时会自动吸附到上一屏/下一屏。

具体判断逻辑如下：

上下滑动吸附判断逻辑

//滑动吸附+移动端滑动手势判断var swipe = document.querySelector("滑动对象id"); function boxTouchStart(e){  var touch = e.touches[0]; //获取触摸对象  startX = touch.pageX;  startY = touch.pageY;}function boxTouchMove(e){  var touch = e.touches[0];  moveX = touch.pageX - startX;  moveY = touch.pageY - startY;  //判断移动端滑动手势  if ( Math.abs(moveX) > Math.abs(moveY) && moveX > 0 ) {    //鼠标从左到右（右滑）  }  else if ( Math.abs(moveX) > Math.abs(moveY) && moveX < 0 ) {    //鼠标从右到左（左滑）  }  else if ( Math.abs(moveY) > Math.abs(moveX) && moveY > 0) {    //鼠标从上到下（上滑）  }  else if ( Math.abs(moveY) > Math.abs(moveX) && moveY < 0 ) {    //鼠标从下到上（下滑）  }}
function boxTouchEnd(e) {    //根据滑动手势调用滑动到目标屏函数}
swipe.addEventListener("touchstart", boxTouchStart, false);swipe.addEventListener("touchmove", boxTouchMove, false);swipe.addEventListener("touchend", boxTouchEnd, false);

判断移动端滑动手势

第二屏以及第三屏滑动时动效进入的判断逻辑如下（动效使用效果库Animate.css实现）：

动效进入判断逻辑

动效退出的判断逻辑和进入相似，只需要先将素材进行visibility: visible，然后当执行完滑动操作的时候添加visibility: hidden使其隐藏。

💻 上下滑动吸附加动效demo：https://github.com/kayleeegao/swipe-demo

4.2

第一屏左右滑动吸附加笑脸跳动

H5的第一屏（section1）中的四张模特图片可以实现左右滑动后自动将图片吸附于中心，并且滑动过程中的笑脸会跳动一下。

这里使用Swiper来实现左右滑动加吸附功能，滑动时笑脸跳动的判断逻辑如下：

左右滑动加素材跳动判断逻辑

4.3

滑动到特定位置显示素材

部分素材会在滑动到一定位置时触发动效，使其的交互和动效效果更加丰满。

具体实现方法为：首先给素材添加visibility: hidden来隐藏，接着捕捉当前窗口的高度位置，当滑动到适当的位置给素材添加带有动效的class，并且添加visibility: visible !important使其显示出来。

//动效随滚动出现function animation(el) {    var windowHeight = jQuery( window ).height();    $(el).each(function(){        var thisPos = $(this).offset().top;        var topOfWindow = $(window).scrollTop();            if (topOfWindow + windowHeight - 200 > thisPos ) {                if (el == "#素材id") {                    //给el添加显示该素材的class                }            }    });}

动效随滚动出现示例代码

页面加载

对于图片较多的页面一般会产生加载缓慢的问题，优化此类问题除了压缩图片外还可以通过懒加载来解决。

// 懒加载

Load On Demand

懒加载，是一种独特而又强大的数据获取方法，它能够在用户滚动页面的时候自动获取更多的数据，而新得到的数据不会影响原有数据的显示，同时最大程度上减少服务器端的资源耗用。

懒加载具体思路以及代码示例如下：

//Lazy loading JS codedocument.addEventListener("DOMContentLoaded", function () {    var lazyloadImages;    var lazyloadThrottleTimeout;    lazyloadImages = document.querySelectorAll(".lazy");    function lazyload() {        if (lazyloadThrottleTimeout) {            clearTimeout(lazyloadThrottleTimeout);        }        lazyloadThrottleTimeout = setTimeout(function () {            var scrollTop = window.pageYOffset;            lazyloadImages.forEach(function (img) {                if (img.offsetTop < (window.innerHeight + scrollTop + 500)) { //可以更改500参数来调整加载的触发位置                    img.src = img.dataset.src;                    img.classList.remove('lazy');                }            });            if (lazyloadImages.length == 0) {                document.removeEventListener("scroll", lazyload);                window.removeEventListener("resize", lazyload);                window.removeEventListener("orientationChange", lazyload);            }        }, 20);    }    document.addEventListener("scroll", lazyload);    window.addEventListener("resize", lazyload);    window.addEventListener("orientationChange", lazyload);})

懒加载示例代码

END

参考资料：

https://blog.csdn.net/zxsydyq/article/details/6987317

https://stackoverflow.com/questions/27747970/how-to-makeimages-fade-visible-when-im-scrolling/27748638

https://www.cnblogs.com/wenb/p/7514673.html

https://github.com/iamdustan/smoothscroll

https://css-tricks.com/the-complete-guide-to-lazy-loading-images/

SUXD公众号

微信号 : suxd_design

球分享

球点赞

球在看

继续滑动看下一个