效果图
各位看官好！知了的看门道、不知道的评论个热闹
今天给大家带来的是：企业级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);
}
}