原神官网切换效果

这两天来研究一下原神游戏官网的效果,只是我个人理解。

地址:《原神》官方网站-全新4.3版本「蔷薇与铳枪」上线! (mihoyo.com)

继续用我之前的模板项目:

原神官网切换效果_第1张图片

等我把这一页写满,会上传原码。 

效果很多,我们先看第一个:

1.滚轮切换

先看效果图:

这看起来像什么呢? 

是不是很像轮播图呀,就是把轮播图变成垂直,然后触发滚动方式变成滚轮触发。

好,我现来偷个懒,使用element的走马灯的组件。

  
  

   

   

效果为:

 然后再幻灯片里面加东西就行,自己看着写。

然后像原神主页的哪些很好看的样式,我发现大部分都是video,可以自己看看:act-webstatic.mihoyo.com/puzzle/hk4e/pz_xcId9WFtTw/resource/puzzle/2023/12/15/c12417602915acf4628ed25943dd1da5_5379542803425482.mp4

其余的一些样式,看起来很好看,其实实现很简单,nb的是ui,前端只是放上去了 

2.元素加载动画效果

在点击进入首页后,有一个这样子的效果,这个效果我看他官网写法是使用canvas+js进行绘制,有点难。

咱换一个方法。

原神官网切换效果_第2张图片

 使用css的滤镜调整颜色,滤镜在线转换地址:CSS3 filter滤镜表示色值的变化在线工具 » 张鑫旭-鑫空间-鑫生活 (zhangxinxu.com)

使用两个图片进行交叠在一起,切换改变其中一个div的大小,做到加载动画效果。 


效果图:

原神官网切换效果_第3张图片 

你可能感兴趣的:(javascript,前端,vue.js)