Официальный сайт LOL Year of the Dog расчесывает волну

внешний интерфейс сервер JavaScript модульный тест

Во время китайского Нового года в этом году я вместе с друзьями увидел официальный сайт LOL, посвященный Году Собаки. Я должен вздохнуть, люди, которые занимаются IT, отличаются от других, другие смотрят события, а я смотрю дизайн и спецэффекты. . . .

Заняв 7 или 8 дней свободного времени, почти готово, еще можно отображать под гуглом, а совместимость с другими браузерами не проверял.

После его написания я многое приобрел.Дальнейшее изучение и применение CSS-атрибутов и CSS3-анимации, практика и применение нативных js, усиление применения семантических HTML-тегов и избежание волшебной зависимости от div в прошлом. . . Существует также новое понимание html-макета, макет, который я написал, всегда кажется менее хорошим, чем исходная версия (это потому, что я не разработал его???), и, наконец, я должен вздохнуть, что есть хороший визуальный дизайнер (насколько это важно для программистов

Адрес github был неуместен раньше. . . Исправленный. Если вам это нравится, вы можете поставить ему звезду O (∩_∩) O

исходный адрес git

Скопировать адрес

Адрес официального сайта

Примечание:

  • В настоящее время протестирован только Google Chrome, а интерфейс мобильного телефона отсутствует, поэтому для просмотра рекомендуется использовать хром на стороне ПК.
  • Ввиду того, что скорость моего сервера действительно уступает скорости отца Тенсента, я уменьшил много ресурсов (аудио, три видео модуля звезды, играющей с тобой), и ждать ресурсов приходится долго в первый раз грузится из-за скорости сервера.немного
  • чисто личный интерес

Резюме некоторых точек знаний

1. Используйте объект навигатора браузера, чтобы определить, находится ли он в данный момент на мобильном телефоне и в WeChat.

function is_pc(){
	var os = new Array("Android","iPhone","Windows Phone","iPod","BlackBerry","MeeGo","SymbianOS");  
	var info = navigator.userAgent;
	var len = os.length;
	for (var i = 0; i < len; i++) {
	    if (info.indexOf(os[i]) > 0){
	        return false;
	    }
	}
	return true;
}
function isWeixin(){
	var ua = navigator.userAgent.toLowerCase();
	if(ua.match(/MicroMessenger/i) == 'micromessenger'){
		return true; 
	}else{
	   return false;
	}
}

2. Сократите использование if for в программировании

	1.三元运算符
	2.if分支多的话改用switch
	3.使用短路判断 &&、||
	if(XXX){
		 test()
	}
	// 改动后
	XXX && test() 表示如果XXX为真，返回test，否则返回XXX
	
	if(!XXX){
		test()
	}
	// 改动后
	XXX ||  test()表示如果XXX为假，返回test，否则返回XXX

3. Используйте фон в качестве градиентного шрифта

    1.首先使用color设置hack，对于这些新的API，除了敬业的chrom，其他浏览器的支持性还不是很好。
    2.使用background-image颜色渐变linear-gradient来设置渐变属性
    3.使用text-fill-color:transparent;来设置文字的填充颜色为透明，当这个属性声明时，color将失效
    4.最后使用background-clip:text；声明只显示文字区域，就出现渐变色颜色的文字啦
    color: #ef8247;
	 font-size:14px;
	 background-image: linear-gradient(to right,#fee3b5,#f8bb87);
     background-clip: text;
	 -webkit-background-clip: text;
	 -webkit-text-fill-color: transparent;
	 te
	 
	 xt-fill-color:transparent;

4. Всегда держите элемент по центру или по вертикали (если вы знаете размер элемента)

    1.首先使用position:absolute绝对定位。
    2.使用margin-left: -50%的宽度,margin-top:-50%的高度
    3.再使用left:50%的宽度,top:50%的高度即可实现界面缩小放大时元素始终垂直居中
    .bg1 .video{
	  position: absolute;
	  width: 1920px;
	  height:900px;
	  margin-left:-960px;
	  left:50%;
	}

5. Реализован эффект вспышки кнопки

    1.首先画好按钮。
    2.使用before伪元素绘制透明菱形的滑动方块，闪的效果就是来自菱形的移动
    3.使用动画让菱形伪元素移动起来即可
    .first-page .bottom-btn span{
	  display: block;
	  height:40px;
	  line-height:40px;
	  overflow: hidden;
	  margin:0 9px 0 7px;
	  position: relative;
	}
	
	.first-page .bottom-btn  span:before{
	  content: ' ';
	  position: absolute;
	  width:80px;
	  height:350px;
	  top:0;
	  left:-150px;
	  transform: skew(-25deg);
	  background: linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 100%);
	}
	@keyframes leftToRight {
	  0%{left:-150px;}
	  100%{left:250px}
	}

效果展示

6. преобразование свойства

    transform:rotate3d(x,y,z,d)
    这个比较好理解，3d旋转，4个参数，分别对应x,y,z轴，类型是number，最后一个参数是旋转的角度，最后旋转的角度为x*d,y*d,z*d,所以前面三个参数为1时就正常旋转角度，0时不旋转
    
    transform:perspective
    
    1. perspective属性设置镜头到元素平面的距离。所有元素都是放置在z=0的平面上。比如perspective(300px)表示，镜头距离元素表面的位置是300像素。
    2. perspective-origin属性规定了镜头在平面上的位置。默认是放在元素的中心。

7. Красивый эффект наведения

效果展示

	
	1.正常些元素属性
	2.在元素hover的时候，使用before伪元素，给before伪元素添加动画，使用opacity和scale进行实现
	
	@keyframes coruscate {
	  0%{
	    opacity:.3;
	    transform: scale(1);
	  }
	  100%{
	    opacity:0;
	    transform: scale(1.2);
	    display: none;
	  }
	}
	
	.as-you-play .card-list  .card-3{
	  position: absolute;
	  background: url("../assets/spr_redpackage.png")no-repeat -340px -478px;
	  width:392px;
	  height:333px;
	  top:-38px;
	  left:800px;
	}

	 .as-you-play .card-list  .card-3:hover:before{
      content: '';
      position: absolute;
      background: url("./assets/spr_redpackage.png")no-repeat -340px -478px;
      width:392px;
      height:333px;
      top:0px;
      left:0px;
      animation:coruscate .4s ease-in-out;
    }

8. Идея и оптимизация эффекта движения вверх и вниз

Функция onscroll, используемая непосредственно в начале, отслеживает событие прокрутки.

监听代码

Каждый метод в теле метода соответствует управлению появлением и исчезновением каждого модуля на странице.

方法体示例

Позже я узнал, что у этого метода есть большая проблема: с одной стороны, все методы вызываются каждый раз, с другой стороны, пока он находится вне высоты, он будет удалять Active каждый раз, когда его прокручивают. в интерфейсе нет изменений, появится сумма расчета. , из-за чего интерфейс немного застрял

Немного подумав, при прокрутке на высоту определенной области вызывается соответствующий метод

改动后的onscroll方法体

Я чувствую, что должно быть много места для оптимизации, и я продолжу оптимизировать этот кусок позже.

9. Оптимизация эффекта прокрутки первой страницы вверх и вниз

На официальном сайте, когда запускается прокрутка между первой страницей и второй страницей, она автоматически прокручивается вниз или вверх.Я думал, что эта часть будет относительно простой, но я не ожидал, что это будет самым трудоемким место, потому что JQ не использовался, поэтому многие методы должны быть реализованы сами по себе

  • Анимация автоматической прокрутки вверх и вниз стилизована под тело и навигацию.
* 首先将要滚动的高度除以每次滚动的高度，得出次数
* 使用setInterval定时器每次滚动对应高度，知道循环到指定次数，清除这个定时器
* 在滚动时吧body的padding-top设置为142px,nav的定位方式改为fixed

```javascript
  function scrollTo945(){
	  disabledMouseWheel();
	  setTimeout(mouseWheel,500);
	  document.getElementsByClassName('activity-nav')[0].style.position = 'fixed'
	
	  setTimeout(function(){
	    document.body.style.paddingTop = '142px';
	  },50)
	    var scrollTemp =  getScrollTop();
	    var scrollHeight = scrollDownHeigh - scrollTemp;
	    var len = Math.floor(scrollHeight/step),i=0;
	    var first_length = scrollHeight % step
	    clearInterval(timer)
	    timer = setInterval(function(){
	      if(i>len) return;
	      i==0 ?  window.scrollTo(0,first_length) : window.scrollTo(0,i*step+first_length);
	      i === len && clearTimerDown()
	      i++;
	    },10)
	
	}
```
  • будь осторожен
*  一开始选用的onscroll方法进行监听，后来发现这个方法和全局控制各个模块的方法相冲突，会引发比较多的BUG，所有后来换用了onmousewheel方法对滚动进行监听
*  每次触发滚动事件时，需要把onmousewheel事件解绑，否则用户再次触发该事件时，会发生BUG
*  对于body的padding-top的动画时间设置和页面滚动的动画时间设置需要反复的尝试，找到一个比较平衡的点，这样滚动的时候不会有太大的感觉
Категории