个人网站相关
一个简单到没什么内容可写的个人网站
网址：gaoxianghp.esy.es
可移动端浏览，移动4G网络无法浏览。
不会的时候想实现什么效果都难，会了之后两三行代码的事。
你能遇到的问题，大多别人都遇到过，百度/谷歌能解决大部分问题。
前端知识的来源：w3school、幕客网-前端工程师、前端书籍、别人网站的代码、百度
这版个人网站主要是以学习为目的而制作的，一开始为了学习前端知识而照搬了别人的代码边注释边摸索他们是怎么实现某些效果的，之后在慢慢深入的学习中开始理解并使用html、css、js，才有了要做一个完整的个人网站的想法。
写网站的期间遇到了很多稀奇古怪的问题，有些问题当场解决，有些问题困扰了很久，因为当时没有记录（之所以没有记录是因为当时想着做一步是一步），所以有些问题已经忘了，如果还能记起来会在后面提到。
现在看来这个网站极其简单，熟练的程序员可能一两个小时就能搞定，甚至更短。但最早想要做的网站还是很花哨的，页面也不止这一点点，但碍于水平有限，动效一个个被剔除，为了缩短制作时间，页面也放弃了很多。
网站的要求很简单，供别人初步了解我在设计方面的一切，可以查阅我的作品，可以下载我的简历，当然了网站本身也是一个作品，虽然很初级但也表示了我有初步的前端代码量。
这里插句题外话，在制作网站时需要用到js，结果因为之前接触framer所以对js理解起来方便了很多，同时学习js之后framer制作动效也有了更深入的理解。
现在开始具体讲讲网站了：
信息结构
响应式
网站最早设计时并没有考虑到移动端观看，在制作中为了方便手机预览才开始学习响应式并最终应用到个站的。
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
这段代码写在html head内，作用是适配移动端让网页的宽度同设备的宽度相同，缩放比例1倍，禁止用户缩放。
不写这段代码的话，在移动端网页的显示会像pc端一样，整个页面完整的显示在小小的手机屏幕上，用户想要看具体的内容时需要双指放大才能看清。
最好的例子就是ui中国，ui中国有单独的移动端网页，但如果点开灵感库就会发现该页面同pc端的页面一摸一样，并没有做移动端适配。
另外不写这段代码的话，下面这种媒体查询在移动端是不起作用的。所以为了让网页更好的适配移动端就一定要加上。
@media only screen and (min-width: 680px){
header {
position: fixed;
height: 120px;
}
}
屏幕大于680px时header定位类型变为固定定位，换句话说就是悬浮在其他文档上方，高度120px。
这样就能在浏览器显示区域变化时随之改变网页内容样式了。
loding
纯css3动画，用到了animation和keyframers，网站制作的差不多的时候，因为用到的js和图片比较多，再加上是国外的服务器，所以网页加载的时候会比较慢且js未加载完时网页布局是乱的，为了避免用户看到这时候的网页及长时间的等待，所以就想加一个loding页面，但在实际实现中发现加载时间过长一直不触发onload事件，loding动画无限播放反而会让用户以为网站卡死而失去耐心，还不如取消掉loding动画让用户看到不完整的页面，不过在后来的优化中，进一步压缩了加载的时间，所以又把动画加了回来。
（principle制作的动画）
简单了点，主要学习animation和keyframers的用法。
header
logo的设计参考的火漆印，灵感是网页像一封信，查阅我的网站就像打开信封一样。
早期的设计中首页内容比较多，平铺展示三类设计作品共24格，所以导航栏被设计成悬浮式的，这样无论在首页哪个位置都能跳转到其他页面，不过在后期的制作中首页缩短了，但悬浮式的导航保留了下来。隐藏的效果使用了headroom.js插件
导航栏在浏览器显示区域小于680时会变成汉堡菜单，菜单展开时加了点小动效，但收回时需要干净利落
作品二级菜单会跳转到首页的作品位置，不同的二级菜单对应不同的作品标签。
轮播
轮播插件是swiper，一开始学习别人把轮播写在单独的页面再用iframe引入到首页，需要更改内容的时候只要修改轮播页面就行，不需对首页做出修改。
但后来出了一些比较麻烦的问题，所以干脆把轮播的代码写在首页内了。
引导icon
考虑到网站是临摹（抄）自别人的，需要有点差异性的东西，所以在引导用户探索的icon上动了点心思，因为当时也在学习AE动效，所以尝试做了一个有趣的gif，具体的制作方法以后有机会再分享。
最近才知道通过插件把ae制作的动画导出成json，然后在网页中用lottie.js实现动画，无论是体积还是质量都比gif要好，而且是可控的。
My Works
使用的插件也是swiper，为了使页面更简洁，我选择把三类作品用选项卡的方式安排在首页。
选项卡除了可以点击标签切换以外同轮播一样也可以滑动切换。
联系方式
使用了翻板的效果，鼠标移动到icon上会翻转显示文字，有趣且实用的交互动效。
.footer-container .links-logo{
transform: rotateY(-180deg);
}
.footer-container:hover .links-logo{
transform: rotateY(0deg);
}
以上是最终实现动画的代码，但需要设置容器的perspective和transform-style：preserve-3d。
另外因为文字层预设的是背面，所以需要设置backface-visibility：hidden 隐藏元素的背面。
返回到顶部
一开始的首页比较长，所以需要快速返回顶部的功能，现在网页内容压缩之后显得多余，制作目标是需要有顺滑的动画过程，不能是锚点那种生硬的跳转，点击btn之后用户可以自由停止返回过程。
$("#btn").click(function(){
$('body,html').stop().animate({scrollTop:0},800,'easeInOutExpo');
return false;
});
stop()为的是用户重复点击button时停止上一个动画，在这个效果上作用不大，但在汉堡菜单那里起到了很大的作用。
加了.stop(true,true)
没加.stop(true,true)的后果就是浏览器会累积每一次点击之后的动画效果，直到全部播放结束。
.stop()和.stop(true,true)的区别就是，前一个是直接停止上一个动画，后一个是上一个动画直接播放到最后一步
$(window).mousewheel (function(event, delta) {
$('body,html').stop();
});
返回过程中滚动鼠标滚轮可以取消返回顶部
使用了mousewheel.js插件，这个插件深入使用可以做很多事情，我这边是简单应用。
其他
作品是二级菜单
简历是文件下载
关于页面只是布局和排版
以上就是我的个人网站。
