javascript Ali Craig.js
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript Ali Craig.js相关的知识，希望对你有一定的参考价值。
//squarestudio custom code
body {
margin-top: 42px
}
#header {
background: #f6f6f6;
position: fixed;
top: 0px;
height: 42px;
width: 100% !important;
padding: 0px;
margin: 0px;
//this needs fixing
.logo-wrapper {
display: ;
display: block;
position: absolute;
width: auto;
height: auto;
left: 50vw;
transform:translate(-50%);
top: 5vh;
}
div[data-nc-container="center"] {
float: left !important;
left: 0px;
position: relative;
display: block !important;
width: 100%;
height: 100%;
#mainNavWrapper {
margin: 0px;
height: 100%;
display: block;
.site-navigation {
display: block;
height: 100%;
.nav-item {
float: left !important;
}
.nav-item:nth-last-child(1), .nav-item:nth-last-child(2), .nav-item:nth-last-child(3) {
float: right !important;
}
}
}
//styling the buttons
.nav-item {
border-right: 1px solid #D0CEC9;
height: 100% !important;
position: relative;
margin-left: 0px;
.nav-item-index, .nav-item-project, a {
height: 100%;
display: block;
color: #212721 !important;
font-family: "adobe-devanagari",Times,serif;
font-size: 11px;
letter-spacing: 1px;
padding: 0px 16px;
text-transform: uppercase;
span {
top: 50%;
display: block;
position: relative;
margin-top: -5px !important;
}
}
}
.active {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
border-bottom: 1px solid white;
opacity: 1;
}
//hover effect
.nav-item:hover {
box-shadow: inset 0 1px 3px rgba(0,0,0,0.35);
}
//remove for last items
.nav-item:nth-last-child(1):hover, .nav-item:nth-last-child(2):hover, .nav-item:nth-last-child(3):hover {
box-shadow: none;
}
//logo - hidden
.nav-item:first-of-type {
display: block;
span {
display: ;
font-size: 0px;
}
background: url(//static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae05a5a562fa79909c9460e/1524509326123/?format=1500w) no-repeat;
background-size: contain
}
}
//search bar
.nav-item:nth-last-child(1){
a {
display: none !important
}
.sqs-block-search {
padding: 6px 15px;
.spinner-wrapper {
display: none;
}
input {
padding: 0px;
height: 30px;
background: #fff;
background: #fff;
width: 160px;
transition: all 500ms linear;
height: 1.875rem;
border: 0px none;
color: #787878;
font-size: 0.875rem;
box-shadow: none;
padding: 0 35px 0 0.5rem;
letter-spacing: 1px;
border: 1px solid #D0CEC9;
}
input:focus {
width: 190px
}
::-webkit-input-placeholder { /* Chrome */
padding-left: 0px;
text-transform: uppercase;
}
}
}
//subscribe
//mail icon
.nav-item:nth-last-child(2) {
a span:after {
content: '';
background: url(https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ace2380aa4a999da4861a86/1523458944708/mail.png) no-repeat;
background-size: contain;
display: inline-block;
height: 40px;
top: -15px;
right: -0px;
width: 40px;
position: absolute;
}
}
@media (max-width: 1000px) {
//hide subscribe text for smaller screens
.nav-item:nth-last-child(2) {
width: 70px !important;
span {
font-size: 0px
}
}
//make search smaller
.nav-item:nth-last-child(1) {
.sqs-block-search input {
width: 110px !important
}
}
}
.nav-item:nth-last-child(2) {
width: 160px;
span {
margin-left: -40px;
}
.sqs-block-newsletter {
position: absolute;
display: none;
width: 50vw;
left: -50vw;
margin-left: 160px;
background: #f6f6f6;
border: 1px solid #D0CEC9;
padding: 0px;
top: 42px;
.newsletter-form-header {
width: 100%;
}
.newsletter-form-fields-wrapper {
text-align: left ;
margin: 0px;
margin-left: 2%;
float: left;
width: 72% !important;
.newsletter-form-field-wrapper {
width: 100% !important;
padding: 0px !important;
}
input {
padding: 8px;
border: ;
}
}
.newsletter-form-button-wrapper {
width: 20%;
display: inline-block;
margin: 0px 0px;
padding: 0px;
.newsletter-form-button:hover {
background: #586a2b
}
.newsletter-form-button {
background: #677C32;
padding: 0px 0px;
min-height: 38px;
display: block;
padding: 8px !important;
border: 0px !important;
color: #fff;
margin: 0px;
border-radius: 0px;
width: 100%;
box-shadow: none !important;
* {
border: 0px !important;
}
}
}
}
}
.nav-item:nth-last-child(2):hover {
.sqs-block-newsletter {
display: block;
}
}
}
//mobile top nav
@media (max-width: 768px) {
.mobile-bar-wrapper {
//center logo
.mobile-branding-wrapper {
width: 100vw;
margin: auto;
transform:translate(-50%);
left: 50%;
position: relative;
a {
margin: auto;
}
}
.mobile-nav-toggle-label {
position: absolute;
}
}
//open state
body {
transition: all 300ms !important;
position: relative;
left: 0vw !important;
#site {
opacity: 1 !important;
height: 100% !important;
}
.overflow-wrapper {
overflow:visible !important;
.overlay-nav-container {
left: -300px !important;
.overlay-nav-wrapper, * {
opacity: 1 !important;
visibility: visible !important;
overflow-y: scroll;
width: 100% !important;
left: 0 !important;
}
}
}
}
//make always visible
.overlay-nav-container {
display: block !important;
z-index: 11111;
position: relative;
padding-top: 50px !important;
background: #f6f6f6;
top: -45px !important;
//erode shadow
margin-left: 0px;
box-shadow: rgba(0, 0, 0, 0.3) 3px 0px 4px;
max-width: 300px !important;
}
.mobile-menu-open {
//arbitrary
left: 300px !important;
}
//hide subscribe
.mobile-primary-nav-links .external:nth-last-child(1) {
display: none
}
//search and cart icons
.mobile-bar-wrapper {
height: 50px;
.mobile-branding-wrapper {
padding: 0px;
top: -25px;
height: 30px;
}
.external a {
display: block;
font-size: 0px;
position: relative;
font-size: ;
top: 10px;
right: 20px;
display: inline-block;
height: 30px;
top: 10px;
right: 20px;
width: 40px;
}
//cart
.external:nth-last-of-type(1) a {
background: url(https://d30y9cdsu7xlg0.cloudfront.net/png/2370-200.png) no-repeat;
background-size: contain;
}
//search
.external:nth-last-of-type(2) a {
background: url(http://icons.iconarchive.com/icons/icons8/ios7/256/Very-Basic-Search-icon.png) no-repeat;
background-size: contain;
}
}
//search bar click effect
.mobile-bar-wrapper .external {
.sqs-block-search {
display: none;
position: absolute;
right: 0px;
top: 50px;
width: 100%;
box-sizing: border-box;
padding: 10px 4%;
background: #eee;
.spinner-wrapper {
display: none
}
input {
background: #fff;
padding-left: 10px;
}
::placeholder {
}
}
}
.show {
display: block !important
}
}
//scroll top nav
.scrolled {
.nav-item:nth-last-child(2), .nav-item:nth-last-child(3) {
display: none
}
.nav-item:nth-last-child(1) {
.sqs-block-search input {
width: 130px !important
}
}
}
//secondary nav
#sideTrayWrapper {
//display:none;
opacity:0;
left:-100%;
max-width:1024px;
background-color:white;
z-index:0;
height:100%;
position:fixed;
top:0;
overflow-y: hidden;
overflow-x: hidden;
padding: 0;
border-right: solid 1px #f0f0f0;
transition:400ms;
&.active {
left:0;
opacity:1;
z-index:9991;
}
@media(max-width:768px) {
overflow-y:auto;
}
#secondaryNavWrapper {
position:relative;
top:50%;
transform:translatey(-50%);
@media(max-width:768px) {
top:initial;
transform:translatey(0);
}
}
.sidetray-nav-wrapper {
display: inline-block;
position: relative;
width: 55%;
padding-left: 100px;
padding-right: 100px;
border-right: solid 1px #f0f0f0;
box-sizing: border-box;
z-index: 1110;
padding-top:95px;
padding-bottom:95px;
height:100%;
overflow:auto;
@media(max-width:768px) {
display: block;
width: 100%;
height:auto;
padding-left:25px;
padding-right:25px;
}
nav {
font-size: 28px;
line-height: 1.25em;
.nav-item {
display:block;
margin-left:0;
text-align:center;
padding:0.5em 0;
}
}
}
.sidetray-block-wrapper {
display: inline-block;
width: 44%;
padding-left: 100px;
padding-right: 100px;
box-sizing: border-box;
position: relative;
overflow: auto;
z-index: 1110;
padding-top:95px;
padding-bottom:95px;
height:100%;
@media(max-width:768px) {
display: block;
width: 100%;
height:auto;
padding-left:25px;
padding-right:25px;
}
.side-tray-block-container {
position:relative;
top:50%;
transform:translatey(-50%);
@media(max-width:768px) {
top:initial;
transform:translatey(0);
}
div {
text-align:center;
}
.side-tray-image {
padding:0 17px 17px 17px;
img {
width:120px;
height:120px;
border-radius:100%
}
}
.side-tray-social {
transition:0ms!important;
a {
display:inline-block;
}
img {
width:24px;
}
&:hover {
img {
opacity:0.5;
&:hover {
opacity:1;
}
}
}
}
h2 {
font-size:26px;
letter-spacing:0.1em;
line-height:28px;
text-transform:none;
}
p {
color:black;
font-size:16px
}
}
}
}
.secondary-nav-toggle-wrapper {
width:24px;
height:24px;
display:inline-block;
position:fixed;
padding:10px;
cursor:pointer;
z-index:99999;
@media(max-width:768px) {
display:none;
}
img {
position:absolute;
width:24px;
}
.secondary-menu-close {
display:none;
}
}
.secondary-nav-toggle-wrapper.active {
.secondary-menu-close {
display:block;
margin-left:30px;
}
.secondary-nav-hamburger {
display:none;
}
}
.secondary-nav-mobile-bar {
border-top: solid 1px #f0f0f0;
background: white;
position: fixed;
width: 100%;
height: 62px;
bottom: 0;
z-index: 99999;
display: flex;
justify-content: space-between;
div {
display:inline-block;
width:24px;
height:24px;
padding:20px;
}
img {
position:absolute;
width:24px;
}
.secondary-nav-toggle-wrapper {
position:relative;
}
@media(min-width:769px){
display:none;
}
}
.secondary-nav-mobile-bar {
.secondary-nav-toggle-wrapper.active {
.secondary-menu-close {
margin-left:0;
}
}
}
.full-screen-social {
opacity:0;
display:none;
position:fixed;
width:100vw;
height:100vh;
top:0;
z-index:99994;
background:white;
transition:100ms;
.full-screen-social-icons {
position:relative;
width:105px;
margin:0 auto;
top:50%;
transform:translateY(-50%);
img {width:50px;}
a {
display:inline-block;
}
}
&.active {
display:block;
opacity:1;
}
}
.social-icons-elipses {
.social-close {
display:none;
}
&.active {
.social-close {
display:block;
}
.social-icons {
display:none;
}
}
}
.full-screen-search {
opacity:0;
display:none;
position:fixed;
width:100vw;
height:100vh;
top:0;
z-index:99994;
background:white;
transition:100ms;
.search-close {
display:none;
}
&.active {
display:block;
opacity:1;
}
.header-search-form {
width:100%;
height:100%;
.header-search-form-input {
position:absolute;
top:50%;
left:50%; transform:translate(-50%,-50%);
border:0;
text-align:center;
font-size:4em;
font-family: "ltc-bodoni-175";
font-weight:400;
letter-spacing:0px;
@media(max-width:768px){
width:90%;
}
}
}
}
.secondary-nav-search {
.search-close{
display:none;
}
&.active {
.search {
display:none;
}
.search-close {
display:block;
}
}
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(function() {
$( "figure:eq(0)" ).wrapInner( "<div class='movementimg'></div>" );
$("figure:eq(0)").mousemove(function(event) {
var mx = event.pageX - $('figure:eq(0)').width();
var my = event.pageY - $('figure:eq(0)').height();
var mmovex = (mx)/800;
var mmovey = (my)/800;
$(".movementimg").css("transform", "translate(" + mmovex + "vw," + mmovey + "vh)");
});
});
</script>
<style>
.movementimg {
width: 100vw !important;
height: 100vh !important;
top: 0 !important;
left: 0 !important;
transform: translate(0.05vw, 0.05vh);
-ms-transform: translate(0.05vw, 0.05vh);
-webkit-transform: translate(0.05vw, 0.05vh);
-moz-transform: translate(0.05vw, 0.05vh);
}
.movementimg img {
box-sizing: content-box;
position: absolute !important;
object-fit: cover;
width: 100vw;
height: 100vh;
top: 50% !important;
left: 50% !important;
-webkit-transform: translate(-50%, -50%) scale(1.1);
-ms-transform: translate(-50%, -50%) scale(1.1);
-moz-transform: translate(-50%, -50%) scale(1.1);
transform: translate(-50%, -50%) scale(1.1);
}
</style>
<script>
$(function(){
$('footer .sqs-block-search:eq(0)').appendTo('#mainNavWrapper .nav-item:nth-last-child(1)');
$('footer .sqs-block-newsletter').appendTo('#mainNavWrapper .nav-item:nth-last-child(2)');
/*scroll top nav*/
$(window).scroll(function() {
if ($(window).scrollTop() >= 50) {
$("#header").addClass('scrolled')
}
else {
$("#header").removeClass('scrolled')
}
});
//search and cart icons for mobile
$(".mobile-primary-nav-links .external:nth-last-child(1)").appendTo('.mobile-bar-wrapper');
$(".mobile-primary-nav-links .external:nth-last-child(2)").appendTo('.mobile-bar-wrapper');
//search
$('footer .sqs-block-search:eq(0)').appendTo('.mobile-bar-wrapper .external:nth-last-child(2)');
$('.mobile-bar-wrapper .external:nth-last-child(2) a').click(function(){
$(this).parent().find('.sqs-block-search').toggleClass('show')
})
//get secondary nav out
$("#secondaryNavWrapper").prependTo("#site");
})
</script>
<!--Secondary Nav-->
<div class="secondary-nav-toggle-wrapper">
<img class="secondary-nav-hamburger" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf433603ce643ebcb1b3ca/1524581174858/hamburger-menu.png">
<img class="secondary-menu-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png">
</div>
<div id="sideTrayWrapper" style="">
<div class="sidetray-nav-wrapper">
</div>
<div class="sidetray-block-wrapper">
<div class="side-tray-block-container">
<div class="side-tray-image">
<img src="http://via.placeholder.com/120x120">
</div>
<div class="side-tray-text">
<h2>Hi.</h2>
<p>Welcome to my blog. I document my adventures in travel, style, and food. Hope you have a nice stay!</p>
</div>
<div class="side-tray-social">
<span><a href="https://www.twitter.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d942f950b7bc94188695/1524816194951/instagram_64.png"></a></span>
<span><a href="https://www.instagram.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d93a6d2a73772f722949/1524816186937/twitter_64.png"></a></span>
</div>
</div>
</div>
</div>
<div class="secondary-nav-mobile-bar">
<div class="secondary-nav-toggle-wrapper">
<img class="secondary-nav-hamburger" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf433603ce643ebcb1b3ca/1524581174858/hamburger-menu.png">
<img class="secondary-menu-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png">
</div>
<div class="social-icons-elipses">
<img class="social-icons" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf43272b6a2868833f0f47/1524581159779/horizontal-ellipsis.png">
<img class="social-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png">
</div>
<div class="secondary-nav-search">
<img class="search" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf4321562fa7d69f8584cb/1524581153648/search.png">
<img class="search-close" src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5adf432f6d2a73c9dc947b73/1524581167558/close-menu.png">
</div>
</div>
<div class="full-screen-social">
<div class="full-screen-social-icons">
<span><a href="https://www.twitter.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d942f950b7bc94188695/1524816194951/instagram_64.png"></a></span>
<span><a href="https://www.instagram.com"><img src="https://static1.squarespace.com/static/5a82d622edaed8f0ec094f50/t/5ae2d93a6d2a73772f722949/1524816186937/twitter_64.png"></a></span>
</div>
</div>
<div class="full-screen-search">
<form class="header-search-form" id="headerSearch" action="/search" method="get" _lpchecked="1">
<input class="header-search-form-input" name="q" placeholder="Search" type="text" spellcheck="false" value="" autocomplete="off">
</form>
</div>
<script>
$(document).ready(function(){
$('#secondaryNavWrapper').appendTo('.sidetray-nav-wrapper');
$('.secondary-nav-toggle-wrapper').click(function(){
$(this).toggleClass('active');
$('#sideTrayWrapper').toggleClass('active');
$('.social-icons-elipses, .secondary-nav-search, .full-screen-social, .full-screen-search').removeClass('active');
});
$('.social-icons-elipses').click(function(){
$(this).toggleClass('active');
$('.full-screen-social').toggleClass('active');
$('.secondary-nav-search, .secondary-nav-toggle-wrapper, .full-screen-search, #sideTrayWrapper').removeClass('active');
});
$('.secondary-nav-search').click(function(){
$(this).toggleClass('active');
$('.full-screen-search').toggleClass('active');
$('.social-icons-elipses, .secondary-nav-toggle-wrapper, .full-screen-social, #sideTrayWrapper').removeClass('active');
});
});//document.ready
</script>以上是关于javascript Ali Craig.js的主要内容，如果未能解决你的问题，请参考以下文章