前端仿原神登录首页HTML(你也想试试吗?)

简介: 前端仿原神登录首页HTML(你也想试试吗?)

在之前我们已经做过一期原神的官网,这次可以把首页也来仿一仿,所需的知识也是基本是前端三剑客,这次不过是引入了一个第三方的轻量级框架jQuery来快速的处理DOM操作,好了,废话不多说,先看一下最终效果长什么样子:
前端制作原神首页,你也可以做哦

    好了,我们接下来先看看在做之前需要准备些什么东西,首先先是创建出整体的文件目录,就不多说了

image.png

     基本结构搭建完成就是得去写我们的骨架以及样式了,其实这个小项目也没什么样式,因为都是一屏一屏的去滚动,都是一些图片元素,所以样式其实很少。

    然后说一下这个小项目的关键在哪?如果想要做原神首页的话,首先得去他原本的官网得分析清楚他的最终效果,我觉得的话,最核心的就是一页一页的轮播实现,如果这个我们都无法实现的话,那我们根本就做不了这个首页的项目,第一次做这种效果的时候很多人可能会比较疑惑,因为这种全屏轮播在我们学的js中好像不怎么好实现,这时候我们就可以去引用别人写好的第三方插件来完成

    我这里推荐的是jquery.fullPage.js,这样一款插件,他是支持jQuery的,再加上我们的项目是基于的jquery,所以我这边用的是这个插件,安装的话去网上下载就可以了。

    然后说一下这个插件的基本使用,可以去他的官网去看jquery.fullPage

image.png

    具体的操作大家感兴趣可以去官网看,都是很详细的

然后的话,第一个轮播问题我们就解决了,第二个核心点就是最后轮3D播图的做法

image.png

这个模块的做法也是我认为比较难的,所以也去引用是第三方的插件库来使用,能够快速来开发

image.png

这个网址我不记得了,如果大家需要的话可以来找我。

    那么 ,最后来总结一下,首先是我们做完这个页面之后能学到什么,这个其实很好说,我们既然能花一定的功法把他模仿出来和原版一样的效果就说明我们的前端基础能力是很强的,为后面框架学起来也会更容易。然后说一下我为什么要引用原神来当例子呢?除了我很热爱这款游戏以外,其次就是我看他的网页制作上有很多值得我们去学习的地方,如果仿出来之后你就会对前端有更深刻的认识,尤其是对于轮播图这一块我们会很熟悉的运用。

好啦,如果大家需要源码可以来私信,也可以在我的基础上做更深层次的更改哦!!!!

目录
相关文章
|
2天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
8 3
|
27天前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
2月前
|
Web App开发 存储 移动开发
前端基础(十七)_HTML5新特性
本文概述了HTML5的关键新特性,包括canvas图形绘制、多媒体的`video`和`audio`元素、本地存储功能、语义化标签(如`header`、`footer`、`nav`等)及其新增表单控件和属性(如`url`、`email`、`date`类型输入框等)。这些改进增强了网页的功能性和用户体验。
38 1
前端基础(十七)_HTML5新特性
|
1月前
|
前端开发 JavaScript 数据安全/隐私保护
【前端基础篇】HTML零基础速通2
【前端基础篇】HTML零基础速通
18 2
|
1月前
|
Web App开发 移动开发 前端开发
【前端基础篇】HTML零基础速通1
【前端基础篇】HTML零基础速通
27 1
|
2月前
|
前端开发
前端基础(二)_HTML常用标签(块级标签、行级标签、行块级标签)
本文详细介绍了HTML中的常用标签,包括块级标签(如`h1`至`h6`、`p`、`div`等)、行级标签(如`span`、`b`、`strong`、`i`、`em`、`sub`、`sup`、`del`、`a`等),以及行块级标签(如`img`)。文章解释了这些标签的用途、特点和基本用法,并通过示例代码展示了如何在HTML文档中使用它们。
105 1
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`<ul>`嵌套`<li>`)、有序列表(`<ol>`嵌套`<li>`)和定义列表(`<dl>`嵌套`<dt>`和`<dd>`)。
59 19
|
2月前
|
存储 JSON 前端开发
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
本文介绍了在Node.js中使用token实现前端验证码和登录功能的详细流程,包括生成验证码、账号密码验证以及token验证和过期处理。
44 0
node使用token来实现前端验证码和登录功能详细流程[供参考]=‘很值得‘
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`<img>`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`<a>`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
49 13
|
3月前
|
前端开发 JavaScript 应用服务中间件
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
本文介绍如何在uniapp项目中实现谷歌授权登录,无需后端参与。文章分为三部分:1)谷歌授权登录流程,详细说明从用户点击登录到获取用户信息的整个过程;2)谷歌开发者控制台配置,包括创建项目、配置同意屏幕及OAuth客户端ID等步骤;3)uniapp前端实操,提供具体代码示例,展示如何获取授权码并用其交换访问令牌,最终获取用户信息
133 2
【uniapp】谷歌授权登录,前端uniapp直调(含源码)
下一篇
无影云桌面