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

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

xiyangw 2022-12-05 10:19 72 浏览 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);

}

}

相关推荐

“三次握手,四次挥手”你真的懂吗?

记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有下文了,面试官貌似也没有深入下去的意...

面试官问:三次握手与四次挥手是怎么完成的?

作者|饶全成来源|码农桃花源记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有...

三次握手和四次挥手的高阶面试题,建议收藏

昨天村长的讲解,真是一语点醒,这样的解释胜过死记硬背。但对于学习者,如果不能有直观感受,可能还是觉得不接地气,今天介绍两个工具,一个是网络抓包工具Wireshark,一个是linux命令tcpdum...

三次握手和四次挥手到底是个什么鬼东西

之前总有是有面试官喜欢问,你知道什么是三次握手么?什么是四次挥手么?为什么握手需要三次,挥手需要四次呢?今天我们就来详细的聊一下这个。1.什么是TCPTCP协议,简单称呼一下的话,那就是传输控制协议,...

加深理解TCP的三次握手与四次挥手

在了解三次握手和四次挥手之前,先要知道TCP报文内部包含了那些东西。熟悉了解TCP报文对日后学习网络和排除方面有很大的帮助,所以,今天为了加深对三次握手的理解,从新去认识TCP报文格式。TCP报文格式...

三次握手 与 四次挥手_三次握手四次挥手大白话

三次握手:①首先Client端发送连接请求报文②Server段接受连接后回复ACK报文,并为这次连接分配资源。③Client端接收到ACK报文后也向Server段发生ACK报文...

动画讲解TCP的3次握手,4次挥手,让你一次看明白

专注于Java领域优质技术,欢迎关注作者:老钱占小狼博客TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答。本篇尝试...

linux下实现免密传输文件或登录到其他服务器

使用scp传输文件到其他服务器的时候,提示需要输密码,如下:[root@18csetup]#scpLINUX.X64_180000_db_home.zip192.168.133.120:/u0...

Linux如何通过salt免密SCP传输上百台机的脚本?看chatGPT的回答

如何通过salt免密SCP传输上百台机的shell脚本”,下面是chatGPT给出的结果。scp批量免密脚本给出的详细shell脚本如下:#!/bin/bash#源文件路径和目标路径SRC_...

Linux/Mac scp命令上传文件_将hdfs上的文件下载到本地的命令是

语法scp[可选参数]file_sourcefile_target参数说明:-1:强制scp命令使用协议ssh1-2:强制scp命令使用协议ssh2-4:强制scp命令只使用IPv4寻...

Linux常用功能——文件远程传输_linux 远程传输文件

scp是securecopy的简写,是linux系统下基于ssh登陆进行安全的远程文件拷贝命令,用于在Linux下进行远程拷贝文件的命令。和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器...

使用 scp 命令定时拉取服务器备份文件

我们的服务器,每周五必须要做下备份,但总是忘记执行备份这件事情,或者是服务器备份做了,但没有做异地备份。所以通过定时任务自动备份,备份成功之后,在其它服务器上面通过定时任务scp命令自动拉取备份文...

windows下最轻便的FTP/SCP文件管理器

这次推荐的工具叫做winscp,这个工具如果是IT从业人员,又是做服务端相关工作的话,可能无人不知,如果是刚入门,推荐立马上手试试。如果看了觉得有用,欢迎收藏、点赞、关注。官方网站:https://w...

我不是网管 - Linux中使用SCP命令安全复制文件

SCP是linux发行版中的命令行工具,用于通过网络安全地跨系统复制文件和目录。SCP代表安全复制,因为它使用ssh协议复制文件。拷贝时,scp命令建立ssh连接到远程系统。换句话说...

WinSCP软件双系统(Win-Linux)文件传输教程

WinSCP软件是windows下的一款使用ssh协议的开源图形化SFTP客户端,也就是一个文件传输的软件,它有什么优点吗,咱们嵌入式开发中经常会将windows中的文件复制到linux系统当中,比较...

取消回复欢迎 发表评论: