Created main page structure and animation effects
This commit is contained in:
parent
6d1d87e4f6
commit
a2421fad12
|
@ -87,6 +87,61 @@ textarea {
|
||||||
Author's custom styles
|
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
|
Helper classes
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
@ -260,4 +315,3 @@ textarea {
|
||||||
page-break-after: avoid;
|
page-break-after: avoid;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -3,7 +3,7 @@
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title></title>
|
<title>Welcome to JnF.me</title>
|
||||||
<meta name="description" content="">
|
<meta name="description" content="">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
|
||||||
|
@ -12,10 +12,6 @@
|
||||||
<meta property="og:url" content="">
|
<meta property="og:url" content="">
|
||||||
<meta property="og:image" 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/normalize.css">
|
||||||
<link rel="stylesheet" href="css/main.css">
|
<link rel="stylesheet" href="css/main.css">
|
||||||
|
|
||||||
|
@ -23,9 +19,24 @@
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body>
|
<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 -->
|
<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>
|
||||||
<p>Hello world! This is HTML5 Boilerplate.</p>
|
|
||||||
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
<script src="js/vendor/modernizr-3.11.2.min.js"></script>
|
||||||
<script src="js/plugins.js"></script>
|
<script src="js/plugins.js"></script>
|
||||||
<script src="js/main.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