From a2421fad12d0db8638f2e1d931a14a11cb96abbc Mon Sep 17 00:00:00 2001 From: Jason Williams Date: Sat, 19 Nov 2022 11:50:00 -0700 Subject: [PATCH] Created main page structure and animation effects --- www/css/main.css | 56 ++++++++++++++++++++++- www/index.html | 25 +++++++--- www/js/main.js | 116 +++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 189 insertions(+), 8 deletions(-) diff --git a/www/css/main.css b/www/css/main.css index 416a37e..4653f9b 100644 --- a/www/css/main.css +++ b/www/css/main.css @@ -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; } } - diff --git a/www/index.html b/www/index.html index 283d3b5..1d80c8a 100644 --- a/www/index.html +++ b/www/index.html @@ -3,7 +3,7 @@ - + Welcome to JnF.me @@ -12,10 +12,6 @@ - - - - @@ -23,9 +19,24 @@ +
+
+
Jason Splash
+
+ + +
+
+ + +
+
Flo Splash
+
+
- -

Hello world! This is HTML5 Boilerplate.

+ diff --git a/www/js/main.js b/www/js/main.js index e69de29..385779d 100644 --- a/www/js/main.js +++ b/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 + } + }) + + } + } + }) +})