xevion/old.xevion.github.io
1
0
Fork 0
mirror of https://github.com/Xevion/old.xevion.github.io.git synced 2025-12-07 11:15:38 -06:00
Code Issues Packages Projects Releases Wiki Activity

just use one method

Browse Source
This commit is contained in:
Brittany Chiang
2016-12-27 19:08:14 -05:00
parent f14f2865d9
commit c156e3e427
4 changed files with 41 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
_scripts/main.js
View File

@@ -43,51 +43,33 @@ $(function() {
}); });
// hide dot nav if we are on the intro section
const dotNav = document.querySelector('#dot-nav'); const dotNav = document.querySelector('#dot-nav');
const about = document.querySelector('#about-section'); const about = document.querySelector('#about-section');
function handleDotNav() {
const isDesktop = window.innerWidth > 768;
const topOfAbout = about.offsetTop - (about.offsetTop / 4);
const isBelowIntro = window.scrollY > topOfAbout;
if (isDesktop && isBelowIntro) {
dotNav.classList.add('active');
} else {
dotNav.classList.remove('active');
}
}
window.addEventListener('scroll', handleDotNav);
// hide or show hamburger menu depending on window width
const hamburger = document.querySelector('#toggle'); const hamburger = document.querySelector('#toggle');
const overlay = document.querySelector('#overlay'); const overlay = document.querySelector('#overlay');
function switchNavs() { function handleNavs() {
const isDesktop = window.innerWidth > 768; const isDesktop = window.innerWidth > 768;
const topOfAbout = about.offsetTop - (about.offsetTop / 4);
const isBelowIntro = window.scrollY > topOfAbout;
const menuOpen = overlay.classList.contains('open'); const menuOpen = overlay.classList.contains('open');
if (isDesktop) { if (isDesktop && isBelowIntro) {
dotNav.classList.add('active'); dotNav.classList.add('active');
if (menuOpen) { } else if (isDesktop && menuOpen) {
hamburger.classList.remove('active'); toggleMenu();
overlay.classList.remove('open');
}
} else { } else {
dotNav.classList.remove('active'); dotNav.classList.remove('active');
} }
} }
window.addEventListener('resize', switchNavs); window.addEventListener('scroll', handleNavs);
window.addEventListener('resize', handleNavs);
// Toggle mobile menu open and closed // Toggle mobile menu open and closed
function toggleMenu() { function toggleMenu() {
this.classList.toggle('active'); hamburger.classList.toggle('active');
overlay.classList.toggle('open'); overlay.classList.toggle('open');
document.body.classList.toggle('noScroll'); document.body.classList.toggle('noScroll');
} }

57
_scss/partials/_mobileMenu.scss
View File

@@ -59,36 +59,39 @@
visibility: hidden; visibility: hidden;
overflow: hidden; overflow: hidden;
z-index: 10; z-index: 10;
transition: 0.3s; transition: all 0.3s ease;
&.open { @include MQ(M) {
height: 100%; &.open {
z-index: 10; height: 100%;
opacity: 1; z-index: 10;
visibility: visible; opacity: 1;
overflow: hidden; visibility: visible;
.menu-item { overflow: hidden;
animation: fadeInTop 0.5s ease forwards; .menu-item {
animation-delay: 0.35s; animation: fadeInTop 0.5s ease forwards;
&:nth-of-type(2) { animation-delay: 0.35s;
animation-delay: 0.4s; &:nth-of-type(2) {
} animation-delay: 0.4s;
&:nth-of-type(3) { }
animation-delay: 0.45s; &:nth-of-type(3) {
} animation-delay: 0.45s;
&:nth-of-type(4) { }
animation-delay: 0.5s; &:nth-of-type(4) {
} animation-delay: 0.5s;
&:nth-of-type(5) { }
animation-delay: 0.55s; &:nth-of-type(5) {
} animation-delay: 0.55s;
&:nth-of-type(6) { }
animation-delay: 0.6s; &:nth-of-type(6) {
} animation-delay: 0.6s;
&:nth-of-type(7) { }
animation-delay: 0.65s; &:nth-of-type(7) {
animation-delay: 0.65s;
}
} }
} }
} }
.logo { .logo {
color: $white; color: $white;
font-family: $Chronicle, $serif-stack; font-family: $Chronicle, $serif-stack;

2
css/main.css
View File

File diff suppressed because one or more lines are too long

2
js/main.js
View File

@@ -1 +1 @@
"use strict";function handleDotNav(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,n=window.scrollY>e;t&&n?dotNav.classList.add("active"):dotNav.classList.remove("active")}function switchNavs(){var t=window.innerWidth>768,e=overlay.classList.contains("open");t?(dotNav.classList.add("active"),e&&(hamburger.classList.remove("active"),overlay.classList.remove("open"))):dotNav.classList.remove("active")}function toggleMenu(){this.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){$(".section").each(function(){var t=$('#dot-nav a[href="#'+$(this).attr("id")+'"]').data("number"),e=$(this).offset().top,n=$(window).height()/2,o=$(window).scrollTop(),i=e-n<o,a=e+$(this).height()-n>o;i&&a?$("#dot-nav a").eq(t).addClass("is-selected"):$("#dot-nav a").eq(t).removeClass("is-selected")})}function e(t){$("body").animate({scrollTop:t.offset().top+50},500)}t(),window.addEventListener("scroll",t),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#dot-nav a").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#overlay a").on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section");window.addEventListener("scroll",handleDotNav);var hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("resize",switchNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand); "use strict";function handleNavs(){var t=window.innerWidth>768,e=about.offsetTop-about.offsetTop/4,n=window.scrollY>e,o=overlay.classList.contains("open");t&&n?dotNav.classList.add("active"):t&&o?toggleMenu():dotNav.classList.remove("active")}function toggleMenu(){hamburger.classList.toggle("active"),overlay.classList.toggle("open"),document.body.classList.toggle("noScroll")}function focusInput(){this.parentElement.classList.add("is-active","is-completed")}function blurInput(){this.parentElement.classList.remove("is-active","is-completed")}function autoExpand(){textarea.style.height="",textarea.style.height=Math.min(textarea.scrollHeight,limit)+"px"}$(function(){function t(){$(".section").each(function(){var t=$('#dot-nav a[href="#'+$(this).attr("id")+'"]').data("number"),e=$(this).offset().top,n=$(window).height()/2,o=$(window).scrollTop(),i=e-n<o,a=e+$(this).height()-n>o;i&&a?$("#dot-nav a").eq(t).addClass("is-selected"):$("#dot-nav a").eq(t).removeClass("is-selected")})}function e(t){$("body").animate({scrollTop:t.offset().top+50},500)}t(),window.addEventListener("scroll",t),$(".scroll-down").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#dot-nav a").on("click",function(t){t.preventDefault(),e($(this.hash))}),$("#overlay a").on("click",function(t){t.preventDefault(),e($(this.hash)),$("#toggle").click()})});var dotNav=document.querySelector("#dot-nav"),about=document.querySelector("#about-section"),hamburger=document.querySelector("#toggle"),overlay=document.querySelector("#overlay");window.addEventListener("scroll",handleNavs),window.addEventListener("resize",handleNavs),hamburger.addEventListener("click",toggleMenu);var isMobile={Android:function(){return navigator.userAgent.match(/Android/i)},BlackBerry:function(){return navigator.userAgent.match(/BlackBerry/i)},iOS:function(){return navigator.userAgent.match(/iPhone|iPad|iPod/i)},Opera:function(){return navigator.userAgent.match(/Opera Mini/i)},Windows:function(){return navigator.userAgent.match(/IEMobile/i)},any:function(){return isMobile.Android()||isMobile.BlackBerry()||isMobile.iOS()||isMobile.Opera()||isMobile.Windows()}};isMobile.any()||skrollr.init({render:function(t){},smoothScrolling:!1,forceHeight:!1});var contactInput=document.querySelectorAll(".contact-input");contactInput.forEach(function(t){return t.addEventListener("focus",focusInput)}),contactInput.forEach(function(t){return t.addEventListener("blur",blurInput)});var textarea=document.querySelector("#message"),limit=300;textarea.addEventListener("input",autoExpand);