Matt Gerrard (Talk | contribs) |
Matt Gerrard (Talk | contribs) |
||
Line 31: | Line 31: | ||
-webkit-perspective: 1000px; | -webkit-perspective: 1000px; | ||
perspective: 1000px; | perspective: 1000px; | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
Line 153: | Line 37: | ||
top: 0; left: 0; | top: 0; left: 0; | ||
width: 100%; height: 100%; | width: 100%; height: 100%; | ||
− | background: | + | background: transparent; |
overflow: auto; | overflow: auto; | ||
box-shadow: 0 0 20px rgba(0, 0, 0, 1); | box-shadow: 0 0 20px rgba(0, 0, 0, 1); | ||
− | transition: 0.3s cubic-bezier(0.2, 1, 0.2, 1) | + | transition: all 0.3s cubic-bezier(0.2, 1, 0.2, 1); |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
} | } | ||
Line 202: | Line 78: | ||
} | } | ||
− | + | .bg-layer { | |
− | . | + | position: absolute; |
+ | |||
+ | left: 0; top: 0; | ||
+ | height: 100%; | ||
+ | width: 100%; | ||
+ | |||
+ | background: rgb(253, 253, 253); | ||
+ | |||
+ | transition: left 0.3s cubic-bezier(0.2, 1, 0.2, 1); | ||
+ | } | ||
+ | |||
+ | .main.nav { | ||
+ | z-index: 1; | ||
+ | position: fixed; | ||
+ | padding: 3em; | ||
+ | width: 100%; | ||
+ | |||
color: white; | color: white; | ||
− | + | ||
+ | display: -webkit-flex; | ||
+ | display: flex; | ||
+ | |||
+ | -webkit-box-align: center; | ||
+ | -ms-flex-align: center; | ||
+ | align-items: center; | ||
+ | |||
+ | font-weight: bold; | ||
+ | white-space: nowrap; | ||
+ | |||
+ | text-transform: uppercase; | ||
+ | |||
+ | transition: padding 0.3s; | ||
} | } | ||
− | .main. | + | .main.nav .logo-name { |
− | + | cursor: pointer; | |
− | + | ||
+ | vertical-align: middle; | ||
+ | |||
+ | font-size: 1.5em; | ||
} | } | ||
− | .main. | + | .main.nav .link-set { |
− | + | vertical-align: middle; | |
+ | margin-left: 3em; | ||
+ | |||
+ | white-space: nowrap; | ||
+ | |||
+ | -webkit-box-flex: 1; | ||
+ | -ms-flex: 1; | ||
+ | flex: 1; | ||
+ | |||
+ | transition: margin 0.3s; | ||
} | } | ||
− | + | .main.nav .link-set .link-item { | |
− | + | margin-right: 0.5em; | |
− | - | + | padding: 0.7em 1em; |
− | + | cursor: pointer; | |
+ | |||
+ | border: 2px solid transparent; | ||
+ | background: transparent; | ||
+ | color: white; | ||
+ | |||
+ | white-space: nowrap; | ||
+ | |||
+ | transition: border-color 0.3s, background 0.3s 0.2s, color 0.3s 0.2s, padding 0.3s; | ||
+ | } | ||
− | border- | + | .main.nav .link-set .link-item:hover, |
+ | .main.nav .link-set .link-item.selected { | ||
+ | border-color: white; | ||
+ | background: white; | ||
+ | color: black !important; | ||
} | } | ||
− | + | ||
− | </style> | + | .main.nav.reversed { |
+ | padding: 2em; | ||
+ | background: white; | ||
+ | color: rgb(70, 70, 70); | ||
+ | |||
+ | box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); | ||
+ | } | ||
+ | |||
+ | .main.nav.reversed .logo-name { | ||
+ | |||
+ | } | ||
+ | |||
+ | .main.nav.reversed .link-set { | ||
+ | margin-left: 2em; | ||
+ | } | ||
+ | |||
+ | .main.nav.reversed .link-set .link-item { | ||
+ | } | ||
+ | |||
+ | .main.nav.reversed .link-set .link-item:hover, | ||
+ | .main.nav.reversed .link-set .link-item.selected { | ||
+ | border-color: rgb(70, 70, 70); | ||
+ | background: rgb(70, 70, 70); | ||
+ | color: white !important; | ||
+ | }</style> | ||
<style>.fullscr { | <style>.fullscr { | ||
height: 100vh; | height: 100vh; | ||
Line 235: | Line 189: | ||
background-size: cover; | background-size: cover; | ||
background-position: 50% 50%; | background-position: 50% 50%; | ||
+ | } | ||
+ | |||
+ | .img.framed { | ||
+ | width: 100%; | ||
+ | |||
+ | background: rgb(250, 250, 250); | ||
+ | |||
+ | border-radius: 5px; | ||
+ | border: 1px solid rgba(0, 0, 0, 0.08); | ||
+ | overflow: hidden; | ||
+ | box-shadow: 0 0 15px rgba(0, 0, 0, 0.04); | ||
+ | |||
+ | outline: none; | ||
+ | |||
+ | margin: 1rem 0; | ||
} | } | ||
Line 244: | Line 213: | ||
padding: 3rem 0; | padding: 3rem 0; | ||
text-align: center; | text-align: center; | ||
+ | } | ||
+ | |||
+ | .article { | ||
+ | display: inline-block; | ||
+ | max-width: 50rem; | ||
+ | text-align: left; | ||
} | } | ||
</style> | </style> | ||
Line 282: | Line 257: | ||
<link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css"> | <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.css"> | ||
<script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script> | <script src="https://cdn.bootcss.com/semantic-ui/2.2.10/semantic.min.js"></script> | ||
+ | |||
+ | <script src="https://cdn.bootcss.com/three.js/r83/three.min.js"></script> | ||
+ | |||
+ | |||
</head> | </head> | ||
Line 306: | Line 285: | ||
// if (Modernizr.csstransforms3d) { | // if (Modernizr.csstransforms3d) { | ||
// } | // } | ||
+ | |||
+ | $(".main.cont-wrap").scroll(function () { | ||
+ | if ($(".main.cont-wrap").scrollTop() > 5) { | ||
+ | $(".main.nav").addClass("reversed"); | ||
+ | } else { | ||
+ | if (!$(".main.nav").hasClass("always")) | ||
+ | $(".main.nav").removeClass("reversed"); | ||
+ | } | ||
+ | }); | ||
+ | |||
+ | window.menu = {}; | ||
+ | |||
+ | window.menu.setItem = function (name) { | ||
+ | $(".main.nav").addClass("always reversed"); | ||
+ | $(".main.nav .link-item.selected").removeClass("selected"); | ||
+ | $(".main.nav .link-item." + name).addClass("selected"); | ||
+ | }; | ||
var glob = window; | var glob = window; | ||
Line 389: | Line 385: | ||
}; | }; | ||
})(); | })(); | ||
+ | |||
+ | var bgeff = new BGEffect(".bg-layer"); | ||
+ | |||
+ | bgeff.start(); | ||
}); | }); | ||
</script> | </script> | ||
Line 409: | Line 409: | ||
<div class="main view"> | <div class="main view"> | ||
− | <div class="main | + | <div class="main nav"> |
− | < | + | <a class="logo-name">Aquamade</a> |
− | + | <span class="link-set"> | |
− | + | <a class="nav link-item selected">Home</a> | |
− | + | <a class="nav link-item">Project</a> | |
− | + | <a class="nav link-item">Parts</a> | |
− | + | <a class="nav link-item">Modelling</a> | |
− | + | <a class="nav link-item team">Team</a> | |
− | + | <a class="nav link-item">Human Practices</a> | |
− | + | </span> | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | < | + | |
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
− | + | ||
</div> | </div> | ||
+ | <div class="bg-layer"></div> | ||
+ | |||
<div class="main cont-wrap"> | <div class="main cont-wrap"> | ||
Revision as of 01:34, 24 October 2017
Template loop detected: Template:HFLS H2Z Hangzhou<!DOCTYPE html>