余晖落尽暮晚霞，黄昏迟暮远山寻
本站
当前位置：网站首页 > 编程知识 > 正文

企业级jQuery响应式全屏背景图片导航菜单特效源码

xiyangw 2022-12-05 10:19 19 浏览 0 评论

效果图

各位看官好！知了的看门道、不知道的评论个热闹

今天给大家带来的是：企业级jQuery响应式全屏背景图片导航菜单特效源码

正如效果图所示！炫酷到没朋友啊！

代码过长需要文档版源码来我的前端群581549454，已上传到群文件

废话不多说，上源码！

CSS源码1：

/* http://meyerweb.com/eric/tools/css/reset/

v2.0 | 20110126

License: none (public domain)

*/

html, body, div, span, applet, object, iframe,

h1, h2, h3, h4, h5, h6, p, blockquote, pre,

a, abbr, acronym, address, big, cite, code,

del, dfn, em, img, ins, kbd, q, s, samp,

small, strike, strong, sub, sup, tt, var,

b, u, i, center,

dl, dt, dd, ol, ul, li,

fieldset, form, label, legend,

table, caption, tbody, tfoot, thead, tr, th, td,

article, aside, canvas, details, embed,

figure, figcaption, footer, header, hgroup,

menu, nav, output, ruby, section, summary,

time, mark, audio, video {

margin: 0;

padding: 0;

border: 0;

font-size: 100%;

font: inherit;

vertical-align: baseline;

}

/* HTML5 display-role reset for older browsers */

article, aside, details, figcaption, figure,

footer, header, hgroup, menu, nav, section, main {

display: block;

}

body {

line-height: 1;

}

ol, ul {

list-style: none;

}

blockquote, q {

quotes: none;

}

blockquote:before, blockquote:after,

q:before, q:after {

content: '';

content: none;

}

table {

border-collapse: collapse;

border-spacing: 0;

}

CSS源码2：

/* --------------------------------

Primary style

-------------------------------- */

*, *::after, *::before {

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

}

html {

font-size: 62.5%;

}

body {

font-size: 1.6rem;

font-family: "PT Sans", sans-serif;

color: #ffffff;

background-color: #101524;

overflow-x:hidden

}

a {

color: #9e1c51;

text-decoration: none;

}

/* --------------------------------

Main Components

-------------------------------- */

.projects-container {

height: 100vh;

width: 100vw;

position: relative;

}

.projects-container::before {

/* never visible - this is used in jQuery to check the current MQ */

content: 'mobile';

display: none;

}

.projects-container li {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 25%;

overflow: hidden;

cursor: pointer;

-webkit-transition: -webkit-transform 0.4s;

-moz-transition: -moz-transform 0.4s;

transition: transform 0.4s;

/* on mobile - move items outside the viewport */

-webkit-transform: translateX(-100%);

-moz-transform: translateX(-100%);

-ms-transform: translateX(-100%);

-o-transform: translateX(-100%);

transform: translateX(-100%);

}

.projects-container li::after {

/* background image */

content: '';

position: absolute;

top: 0;

left: 0;

height: 25vh;

width: 100%;

background-image: url("../img/img-1-small.jpg");

background-repeat: no-repeat;

background-position: center center;

background-size: cover;

-webkit-transition: opacity 0.5s, height 0.4s;

-moz-transition: opacity 0.5s, height 0.4s;

transition: opacity 0.5s, height 0.4s;

}

.projects-container li::before {

/* never visible - this is used in jQuery to detect if the background image has been loaded */

content: 'img/img-1-small.jpg';

display: none;

}

.projects-container li:nth-of-type(2) {

top: 25vh;

}

.projects-container li:nth-of-type(2)::after {

background-image: url("../img/img-2-small.jpg");

}

.projects-container li:nth-of-type(2)::before {

content: 'img/img-2-small.jpg';

}

.projects-container li:nth-of-type(3) {

top: 50vh;

}

.projects-container li:nth-of-type(3)::after {

background-image: url("../img/img-3-small.jpg");

}

.projects-container li:nth-of-type(3)::before {

content: 'img/img-3-small.jpg';

}

.projects-container li:nth-of-type(4) {

top: 75vh;

}

.projects-container li:nth-of-type(4)::after {

background-image: url("../img/img-4-small.jpg");

}

.projects-container li:nth-of-type(4)::before {

content: 'img/img-4-small.jpg';

}

.projects-container li.is-loaded {

/* move items in the viewport when background images have been loaded */

-webkit-transform: translateX(0);

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-o-transform: translateX(0);

transform: translateX(0);

}

.projects-container li.is-full-width {

/* selected item */

top: 0;

height: auto;

z-index: 1;

cursor: auto;

-webkit-transition: z-index 0s 0s, top 0.4s 0s;

-moz-transition: z-index 0s 0s, top 0.4s 0s;

transition: z-index 0s 0s, top 0.4s 0s;

}

.projects-container li.is-full-width::after {

height: 100vh;

}

@media only screen and (min-width: 1024px) {

.projects-container::before {

/* never visible - this is used in jQuery to check the current MQ */

content: 'desktop';

}

.projects-container li {

width: 25vw;

height: 100%;

opacity: 0;

-webkit-transform: translateX(0);

-moz-transform: translateX(0);

-ms-transform: translateX(0);

-o-transform: translateX(0);

transform: translateX(0);

-webkit-transition: width 0s;

-moz-transition: width 0s;

transition: width 0s;

}

.projects-container li:first-of-type::before {

content: 'img/img-1-large.jpg';

}

.projects-container li:first-of-type::after {

background-image: url("../img/img-1-large.jpg");

}

.projects-container li:nth-of-type(2) {

top: 0;

left: 25vw;

}

.projects-container li:nth-of-type(2)::before {

content: 'img/img-2-large.jpg';

}

.projects-container li:nth-of-type(2)::after {

background-image: url("../img/img-2-large.jpg");

}

.projects-container li:nth-of-type(3) {

top: 0;

left: 50vw;

}

.projects-container li:nth-of-type(3)::before {

content: 'img/img-3-large.jpg';

}

.projects-container li:nth-of-type(3)::after {

background-image: url("../img/img-3-large.jpg");

}

.projects-container li:nth-of-type(4) {

top: 0;

left: 75vw;

}

.projects-container li:nth-of-type(4)::before {

content: 'img/img-4-large.jpg';

}

.projects-container li:nth-of-type(4)::after {

background-image: url("../img/img-4-large.jpg");

}

.projects-container li::after {

height: 100vh;

width: 100%;

opacity: 0;

}

.projects-container li.is-loaded {

/* show items when background images have been loaded */

opacity: 1;

}

.projects-container li.is-loaded::after {

opacity: 1;

}

.projects-container li.is-full-width {

/* selected item */

left: 0vw;

width: 100vw;

-webkit-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;

-moz-transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;

transition: width 0.4s 0s, z-index 0s 0s, left 0.4s 0s;

}

}

@media only screen and (min-width: 1170px) {

.projects-container li::after {

background-attachment: fixed;

-webkit-transform: scale(1.1);

-moz-transform: scale(1.1);

-ms-transform: scale(1.1);

-o-transform: scale(1.1);

transform: scale(1.1);

-webkit-transition: -webkit-transform 0.8s, opacity 0.5s;

-moz-transition: -moz-transform 0.8s, opacity 0.5s;

transition: transform 0.8s, opacity 0.5s;

}

.projects-container li.is-loaded::after {

opacity: 0;

}

.no-touch .projects-container li:hover::after, .projects-container li.is-full-width.is-loaded::after {

opacity: 1;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

}

}

.cd-title {

position: absolute;

z-index: 1;

left: 0;

top: 12.5vh;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

width: 100%;

text-align: center;

}

.is-full-width .cd-title {

top: 50vh;

-webkit-transition: opacity 0s, top 0.4s;

-moz-transition: opacity 0s, top 0.4s;

transition: opacity 0s, top 0.4s;

}

.cd-title > * {

text-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.cd-title h2 {

font-size: 2.5rem;

line-height: 1.5;

font-weight: 700;

}

.cd-title p {

font-size: 1.4rem;

font-family: "Merriweather", serif;

font-style: italic;

line-height: 1.2;

padding: .4em 2em;

display: none;

opacity: .6;

}

@media only screen and (min-width: 1024px) {

.cd-title {

top: 50vh;

width: 25vw;

opacity: 0;

-webkit-transform: translateY(-50%) translateX(-20px);

-moz-transform: translateY(-50%) translateX(-20px);

-ms-transform: translateY(-50%) translateX(-20px);

-o-transform: translateY(-50%) translateX(-20px);

transform: translateY(-50%) translateX(-20px);

}

.is-loaded .cd-title {

opacity: 1;

-webkit-transform: translateY(-50%);

-moz-transform: translateY(-50%);

-ms-transform: translateY(-50%);

-o-transform: translateY(-50%);

transform: translateY(-50%);

-webkit-transition: -webkit-transform 0.6s, opacity 0.6s, left 0.4s;

-moz-transition: -moz-transform 0.6s, opacity 0.6s, left 0.4s;

transition: transform 0.6s, opacity 0.6s, left 0.4s;

}

.is-loaded.is-full-width .cd-title {

left: 37.5vw;

-webkit-transition: -webkit-transform 0.6s, opacity 0s, left 0.4s;

-moz-transition: -moz-transform 0.6s, opacity 0s, left 0.4s;

transition: transform 0.6s, opacity 0s, left 0.4s;

}

.cd-title p {

display: block;

}

}

@media only screen and (min-width: 1170px) {

.cd-title h2 {

font-size: 3.6rem;

}

}

.cd-project-info {

clear: both;

visibility: hidden;

opacity: 0;

margin-top: 100vh;

padding: 4em 0;

cursor: auto;

background-color: #ffffff;

color: #3f538e;

-webkit-transition: opacity 0.4s 0s, visibility 0s 0.4s;

-moz-transition: opacity 0.4s 0s, visibility 0s 0.4s;

transition: opacity 0.4s 0s, visibility 0s 0.4s;

}

.is-full-width .cd-project-info {

visibility: visible;

opacity: 1;

}

.cd-project-info p {

width: 90%;

max-width: 800px;

margin: 0 auto;

line-height: 2;

}

@media only screen and (min-width: 1024px) {

.cd-project-info {

position: relative;

z-index: 1;

}

}

.projects-container .cd-close,

.projects-container .cd-scroll {

display: block;

z-index: 1;

width: 44px;

height: 44px;

/* image replacement */

overflow: hidden;

text-indent: 100%;

white-space: nowrap;

visibility: hidden;

-webkit-transition: -webkit-transform 1s 0s, visibility 0s 1s;

-moz-transition: -moz-transform 1s 0s, visibility 0s 1s;

transition: transform 1s 0s, visibility 0s 1s;

}

.projects-container .cd-close {

position: fixed;

top: 30px;

right: 5%;

background: url("../img/cd-icon-close-mobile.svg") no-repeat center center;

-webkit-transform: scale(0);

-moz-transform: scale(0);

-ms-transform: scale(0);

-o-transform: scale(0);

transform: scale(0);

}

@media only screen and (min-width: 1170px) {

.projects-container .cd-close {

background-image: url("../img/cd-icon-close-desktop.svg");

}

}

.projects-container .cd-scroll {

position: absolute;

bottom: 30px;

left: 50%;

-webkit-transform: translateX(-50%) scale(0);

-moz-transform: translateX(-50%) scale(0);

-ms-transform: translateX(-50%) scale(0);

-o-transform: translateX(-50%) scale(0);

transform: translateX(-50%) scale(0);

background: url("../img/cd-icon-arrow-mobile.svg") no-repeat center center;

}

@media only screen and (min-width: 1170px) {

.projects-container .cd-scroll {

background-image: url("../img/cd-icon-arrow-desktop.svg");

}

}

.project-is-open .cd-close,

.project-is-open .cd-scroll {

visibility: visible;

-webkit-transform: scale(1);

-moz-transform: scale(1);

-ms-transform: scale(1);

-o-transform: scale(1);

transform: scale(1);

-webkit-transition: -webkit-transform 0.4s 0s, visibility 0s 0s;

-moz-transition: -moz-transform 0.4s 0s, visibility 0s 0s;

transition: transform 0.4s 0s, visibility 0s 0s;

}

.project-is-open .cd-scroll {

-webkit-transform: translateX(-50%) scale(1);

-moz-transform: translateX(-50%) scale(1);

-ms-transform: translateX(-50%) scale(1);

-o-transform: translateX(-50%) scale(1);

transform: translateX(-50%) scale(1);

-webkit-animation: cd-translate 1.2s 0.4s;

-moz-animation: cd-translate 1.2s 0.4s;

animation: cd-translate 1.2s 0.4s;

-webkit-animation-iteration-count: 2;

-moz-animation-iteration-count: 2;

animation-iteration-count: 2;

}

.no-touch .project-is-open .cd-close:hover {

-webkit-transform: scale(1.2);

-moz-transform: scale(1.2);

-ms-transform: scale(1.2);

-o-transform: scale(1.2);

transform: scale(1.2);

}

.no-touch .project-is-open .cd-scroll:hover {

-webkit-transform: translateX(-50%) scale(1.2);

-moz-transform: translateX(-50%) scale(1.2);

-ms-transform: translateX(-50%) scale(1.2);

-o-transform: translateX(-50%) scale(1.2);

transform: translateX(-50%) scale(1.2);

}

@-webkit-keyframes cd-translate {

0% {

-webkit-transform: translateX(-50%) scale(1);

}

50% {

-webkit-transform: translateY(10px) translateX(-50%) scale(1);

}

100% {

-webkit-transform: translateX(-50%) scale(1);

}

}

@-moz-keyframes cd-translate {

0% {

-moz-transform: translateX(-50%) scale(1);

}

50% {

-moz-transform: translateY(10px) translateX(-50%) scale(1);

}

100% {

-moz-transform: translateX(-50%) scale(1);

}

}

@keyframes cd-translate {

0% {

-webkit-transform: translateX(-50%) scale(1);

-moz-transform: translateX(-50%) scale(1);

-ms-transform: translateX(-50%) scale(1);

-o-transform: translateX(-50%) scale(1);

transform: translateX(-50%) scale(1);

}

50% {

-webkit-transform: translateY(10px) translateX(-50%) scale(1);

-moz-transform: translateY(10px) translateX(-50%) scale(1);

-ms-transform: translateY(10px) translateX(-50%) scale(1);

-o-transform: translateY(10px) translateX(-50%) scale(1);

transform: translateY(10px) translateX(-50%) scale(1);

}

100% {

-webkit-transform: translateX(-50%) scale(1);

-moz-transform: translateX(-50%) scale(1);

-ms-transform: translateX(-50%) scale(1);

-o-transform: translateX(-50%) scale(1);

transform: translateX(-50%) scale(1);

}

}

相关推荐

前后端分离 Vue + NodeJS(Koa) + MongoDB实践

作者：前端藏经阁转发链接：https://www.yuque.com/xwifrr/gr8qaw/vr51p4写在前面闲来无事，试了一下Koa，第一次搞感觉还不错，这个项目比较基础但还是比较完整了，...

MongoDB 集群如何工作?

一、什么是“MongoDB”？“MongoDB”是一个开源文档数据库，也是领先的“NoSQL”数据库，分别用“C++”“编程语言”编写，使用带有“Schema”的各种类似JSON的文档，是也分别被认为...

三部搭建mongo,和mongo UI界面

三步搭建mongo,和mongoUI界面安装首先你需要先有一个docker的环境检查你的到docker版本docker--versionDockerversion18.03.1-ce,b...

Mongodb 高可用落地方案

此落地方案，用于实现高可用。复制集这里部署相关的复制集，用于实现MongoDB的高可用。介绍MongoDB复制集用于提供相关的数据副本，当发生硬件或者服务中断的时候，将会从副本中恢复数据，并进行自动...

一次线上事故，我顿悟了MongoDB的精髓

大家好，我是哪吒，最近项目在使用MongoDB作为图片和文档的存储数据库，为啥不直接存MySQL里，还要搭个MongoDB集群，麻不麻烦？让我们一起，一探究竟，继续学习MongoDB分片的理论与实践，...

IDEA中安装MongoDB插件-再也无要nosql manager for mongodb

大家都知道MongoDB数据库作为典型的非关系型数据库被广泛使用，但基于MongoDB的可视化管理工具-nosqlmanagerformongodb也被用的较多，但此软件收费，所以国内的破解一般...

数据库监控软件Lepus安装部署详解

Lepus安装部署一、软件介绍Lepus是一套开源的数据库监控平台，目前已经支持MySQL、Oracle、SQLServer、MongoDB、Redis等数据库的基本监控和告警（MySQL已经支持复...

YAPI:从0搭建API文档管理工具

背景最近在找一款API文档管理工具，之前有用过Swagger、APIManager、Confluence，现在用的还是Confluence。我个人一直不喜欢用Swagger，感觉“代码即文档”，让代...

Mac安装使用MongoDB

下载MongoDB包：https://www.mongodb.com/download-center解压mongodb包手动解压到/usr/local/mongodb文件夹配置Mac环境变量打开环境...

保证数据安全，不可不知道的MongoDB备份与恢复

大家在项目中如果使用MongoDB作为NOsql数据库进行存储，那一定涉及到数据的备份与恢复，下面给大家介绍下：MongoDB数据备份方法在MongoDB中我们使用mongodump命令来备...

MongoDB数据备份、还原脚本和定时任务脚本

备注：mongodump和mongorestore命令需要在MongoDB的安装目录bin下备份脚本备份格式/usr/local/mongodb/bin/mongodump -h ...

等保2.0测评:mongoDB数据库

一、MongoDB介绍MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之间的产...

MongoDB入门实操《一》

什么是MongoDBMongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。MongoDB是一个介于关系数据库和非关系数据库之...

Python安装PyMongo的方法详细介绍

欢迎点击右上角关注小编，除了分享技术文章之外还有很多福利，私信学习资料可以领取包括不限于Python实战演练、PDF电子文档、面试集锦、学习资料等。前言本文主要给大家介绍的是关于安装PyMongo的...

第四篇:linux系统中mongodb的配置

建议使用普通用户进行以下操作。1、切换到普通用户odysee。2、准备mongodb安装包，自行去官网下载。3、解压安装包并重命名为mongodb4.04、配置mongodbcdmongod...

取消回复欢迎 你 发表评论:

一周热门
标签列表
最新留言
本站文章转载自互联网及网友投稿，文章内容仅供学习参考，不构成建议，也不代表本站赞同其观点。
如有侵权请联系jellybean52032@gmail.com，提供原文链接地址以及资料原创证明，本站将会立即删除。