jason/Jnf.me
jason/Jnf.me
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Created main page structure and animation effects

Browse Source
This commit is contained in:
Jason Williams 2022-11-19 11:50:00 -07:00
parent 6d1d87e4f6
commit a2421fad12
3 changed files with 189 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
www/css/main.css
View File

@ -87,6 +87,61 @@ textarea {
Author's custom styles
========================================================================== */
body { overflow-x: hidden; }
#view {
width: 100vw;
}
#container {
min-height: 100vh;
width: 100vw;
position: relative;
}
.main {
float: left;
overflow: hidden;
}
.splash {
float: left;
width: 0;
height: 0;
overflow: hidden;
}
@media (orientation: landscape) {
body {
background-color: #FF0000;
}
.main {
width: 50vw;
min-height: 100vh;
}
}
@media (orientation: portrait) {
body {
background-color: #00FF00;
}
#container {
width: 100vw;
left: 0;
}
.main {
width: 100vw;
min-height: 50vh;
}
.splash {
display: none;
}
}
/* ==========================================================================
Helper classes
========================================================================== */
@ -260,4 +315,3 @@ textarea {
page-break-after: avoid;
}
}

25
www/index.html
View File

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title></title>
<title>Welcome to JnF.me</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
@ -12,10 +12,6 @@
<meta property="og:url" content="">
<meta property="og:image" content="">
<link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" href="icon.png">
<!-- Place favicon.ico in the root directory -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
@ -23,9 +19,24 @@
</head>
<body>
<div id="view">
<div id="container">
<div id="splash-jason" class="splash jason notflo">Jason Splash</div>
<div id="main-jason" class="main jason notflo">
<div id="banner-jason" class="banner jason notflo" data-person="jason">
<a href="/jason" class="openlink">Jason Banner</a>
</div>
<div id="links-jason" class="links jason notflo"></div>
</div>
<div id="main-flo" class="main flo notjason">
<div id="banner-flo" class="banner flo notjason" data-person="flo">Flo Banner</div>
<div id="links-flo" class="links flo notjason"></div>
</div>
<div id="splash-flo" class="splash flo notjason">Flo Splash</div>
</div>
</div>
<!-- Add your site or application content here -->
<p>Hello world! This is HTML5 Boilerplate.</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>

116
www/js/main.js
View File

@ -0,0 +1,116 @@
openPerson = false
$(() => {
$('a.openlink').click(function(e) {
e.preventDefault();
})
$('div.banner').click(function() {
if (!openPerson) {
// If no profile is open, open one...
openPerson = $(this).attr('data-person')
if (window.matchMedia('(orientation: portrait)').matches) {
// If we're opening in portrait mode...
$('.main.not' + openPerson).css({
height: '50vh',
minHeight: 0
})
$('.main.not' + openPerson).animate({
height: 0
}, {
duration: 300,
queue: false
})
$('#main-' + openPerson).animate({
minHeight: '100vh'
}, {
duration: 300,
queue: false,
complete: () => {
$('.main.not' + openPerson).css('width', 0)
$('#splash-' + openPerson).css({
width: '50vw',
height: '100vh'
})
}
})
} else {
// If we're opening in landscape mode...
$('#splash-' + openPerson).css('height', '100vh')
$('.main.not' + openPerson).animate({
width: 0
}, {
duration: 300,
queue: false
})
$('#splash-' + openPerson).animate({
width: '50vw'
}, {
duration: 300,
queue: true,
complete: () => {
$('.main.not' + openPerson).css({
height: 0,
minHeight: 0
})
}
})
// SHOW LINKS HERE
}
} else {
// If a profile is open, close it...
if (window.matchMedia('(orientation: portrait)').matches) {
// If we're closing in portrait mode...
$('.main.not' + openPerson).css('width', '100vw')
$('#main-' + openPerson).animate({
minHeight: '50vh'
}, {
duration: 300,
queue: false
})
$('.main.not' + openPerson).animate({
height: '50vh'
}, {
duration: 300,
queue: false,
complete: () => {
$('.main, .splash').removeAttr('style')
openPerson = false
}
})
} else {
// If we're closing in landscape mode...
$('.main.not' + openPerson).css('height', '100vh')
$('#splash-' + openPerson).animate({
width: 0
}, {
duration: 300,
queue: false
})
$('.main.not' + openPerson).animate({
width: '50vw'
}, {
duration: 300,
queue: false,
complete: () => {
$('.main, .splash').removeAttr('style')
openPerson = false
}
})
}
}
})
})