traceflight / anniversary-h5

基于fullpage.js实现的H5动画，恋爱一周年，送给爱人的祝福。

anniversary-h5

使用fullpage.js实现整屏显示，通过CSS3实现动画。

实现效果

手机端打开下面网页或扫描二维码查看实现效果。

https://blog.datarepo.cn/anniversary/index.html

功能实现说明

整屏显示

使用fullpage.js实现，需要引入的样式文件和脚本文件包括：jquery.fullpage.css ，jquery.min.js，jquery.easings.min.js和jquery.fullpage.js。然后在body元素内定义如下内容：

<div id="fullpage">
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
	<div class="section">Some section</div>
</div>

然后需要使用JavaScript脚本初始化页面（fullpage()函数可通过设置参数实现复杂的初始化功能）：

$(document).ready(function() {
	$('#fullpage').fullpage();
});

动画

使用CSS3的animation实现动画。

背景音乐

音符图标

参考项目wechat-h5-boilerplate中的方法添加音符图标，在css文件中导入自定义字体my-custom-icon-font并在相应位置填入音符对应的编码。

自动播放

移动设备中为了节省流量，即使在audio标签中设置了autoplay也不会自动播放，需要通过事件触发。项目中通过监听touchstart事件实现，即在第一次触摸屏幕后播放音乐：

	document.addEventListener('touchstart', function () {
		function audioAutoPlay() {
			var bgMusic = $('audio').get(0);
			var $btnMusic = $('.btn-music');
			if(!$btnMusic.hasClass('paused') && bgMusic.paused) {  
				bgMusic.play();
			}
		}
		audioAutoPlay();
	});

使用

最简单的使用方法是，替换index.html中的文字和img文件夹内的图片，也可以在此基础上，自定义样式和动画。

使用docker快速运行：

$ git clone https://github.com/traceflight/anniversary-h5.git
$ docker run --name h5page -d \
  -p 8080:80 \
  -v `pwd`/anniversary-h5:/usr/share/nginx/html:ro \
  nginx

然后访问 http://localhost:8080/index.html 或 http://host-ip:8080/index.html即可。