Created main page structure and animation effects
This commit is contained in:
Jason Williams
parent
6d1d87e4f6
commit
a2421fad12
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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
116
www/js/main.js
|
|
@ -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
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
})
|
||||
Loading…
Reference in New Issue