janishutz-website/development-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add fancy background animations nav

Browse Source
This commit is contained in:
Janis Hutz
2023-05-18 17:31:02 +02:00
parent ccf1c67837
commit f659c53a64
3 changed files with 27 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
newVersion/css/navstyle.css
View File

@@ -13,7 +13,8 @@
#nav-menu {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.85);
background: repeating-linear-gradient( 45deg, rgba(0, 0, 0, 0.822), rgba(22, 17, 65, 0.822) 5% );
background-size: 150vh 150vh;
position: fixed;
display: block;
z-index: 10;
@@ -22,6 +23,7 @@
bottom: 0;
left: 1;
right: 1;
transition: background-position 0.5s ease-in-out;
}
.nav-container {

1
newVersion/index.html
View File

@@ -34,7 +34,6 @@
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!--<script defer src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script> -->
<script defer src="js/scrolling.js"></script>
<script>

24
newVersion/nav.html
View File

@@ -25,7 +25,9 @@
<span class="line" id="line3"></span>
</a>
<script>
let offset = 0;
let menuOpen = false;
const offsetList = { 'home': 0, 'order': -200, 'contact': -400, 'examples': -600 };
$( document ).ready( function () {
if ( sessionStorage.getItem( 'menuOpen' ) == 'true' ) {
$( '#nav-menu' ).hide( 700 );
@@ -36,10 +38,32 @@
}
if ( location.pathname === '/' ) {
$( '#home' ).removeClass( 'inactive' );
$( '#home' ).addClass( 'locActive' );
} else {
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).removeClass( 'inactive' );
$( '#' + location.pathname.slice( 1, location.pathname.length - 1 ) ).addClass( 'locActive' );
}
sessionStorage.setItem( 'menuOpen', 'false' );
let loc = document.getElementsByClassName( 'locActive' )[ 0 ].id;
offset += offsetList[ loc ];
$( '.inactive' ).mouseenter( function () {
let obj = $( this ).attr( 'id' );
if ( obj === 'home' ) {
$( '#nav-menu' ).css( 'background-position', `${0 - offset}px` );
} else if ( obj == 'order' ) {
$( '#nav-menu' ).css( 'background-position', `${200 - offset}px` );
} else if ( obj == 'contact' ) {
$( '#nav-menu' ).css( 'background-position', `${400 - offset}px` );
} else if ( obj == 'examples' ) {
$( '#nav-menu' ).css( 'background-position', `${600 - offset}px` );
}
} )
$( '.inactive' ).mouseleave ( function () {
$( '#nav-menu' ).css( 'background-position', '0px' );
} )
} );
function toggleMenu () {