All animations built
This commit is contained in:
Jason Williams
parent
7233356524
commit
9efbb3be70
|
|
@ -83,6 +83,7 @@ textarea {
|
|||
resize: vertical;
|
||||
}
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
Author's custom styles
|
||||
========================================================================== */
|
||||
|
|
@ -92,6 +93,11 @@ textarea {
|
|||
--flo-bg-color: #601F22;
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#view {
|
||||
width: 100vw;
|
||||
}
|
||||
|
|
@ -99,23 +105,23 @@ textarea {
|
|||
#container {
|
||||
min-height: 100vh;
|
||||
width: 100vw;
|
||||
/* position: relative; */
|
||||
}
|
||||
|
||||
.main {
|
||||
position: relative;
|
||||
display: flex;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.splash {
|
||||
float: left;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.splash .splash-container {
|
||||
.splash-container {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
padding: 1rem;
|
||||
|
|
@ -123,22 +129,54 @@ textarea {
|
|||
|
||||
.splash img { width: 100%; height: 100%; border-radius: 1rem; object-fit: cover; }
|
||||
|
||||
.banner {
|
||||
position: absolute;
|
||||
/* .banner {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
-ms-transform: translateY(-50%);
|
||||
height: 100%;
|
||||
margin: auto 0 auto 0;
|
||||
/* top: 50%; */
|
||||
/* -ms-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
-webkit-transition: all 0.5s ease;
|
||||
-moz-transition: all 0.5s ease;
|
||||
transition: all 0.5s ease;
|
||||
} */
|
||||
|
||||
.banner {
|
||||
flex: 0 0 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.banner img {max-width: 20vw; max-height: 20vh; }
|
||||
|
||||
.jason {
|
||||
.links {
|
||||
height: 0;
|
||||
/* flex: 0 0 100%; */
|
||||
}
|
||||
|
||||
.links ul {
|
||||
width: 80%;
|
||||
margin: 0 auto 0 auto;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.links li a {
|
||||
display: block;
|
||||
background-color: #FF0000;
|
||||
height: 3rem;
|
||||
line-height: 3rem;
|
||||
margin-bottom: 0.5rem;
|
||||
border-radius: 1rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.splash.jason, .main.jason {
|
||||
background-color: var(--jason-bg-color);
|
||||
}
|
||||
|
||||
.flo {
|
||||
.splash.flo, .main.flo {
|
||||
background-color: var(--flo-bg-color);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -24,10 +24,6 @@ body {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
div {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
/**
|
||||
* Render the `main` element consistently in IE.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -19,31 +19,67 @@
|
|||
</head>
|
||||
|
||||
<body>
|
||||
<!-- <div id="view"> -->
|
||||
<div id="container">
|
||||
<div id="splash-jason" class="splash jason notflo">
|
||||
<div class="splash-container">
|
||||
<img src="/img/splash-jason.jpg">
|
||||
</div>
|
||||
<div id="container">
|
||||
<div id="splash-jason" class="splash jason notflo">
|
||||
<div class="splash-container">
|
||||
<img src="/img/splash-jason.jpg">
|
||||
</div>
|
||||
<div id="main-jason" class="main jason notflo">
|
||||
</div>
|
||||
<div id="main-jason" class="main jason notflo">
|
||||
<div class="splash-container">
|
||||
<div id="banner-jason" class="banner jason notflo" data-person="jason">
|
||||
<a href="/jason" class="openlink" data-person="jason" data-pos="0vw"><img src="/img/profile-jason.png"></a>
|
||||
<h1><a href="/jason" class="openlink">Jason Williams</a></h1>
|
||||
</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">
|
||||
<a href="/flo" class="openlink">Flo Banner</a>
|
||||
</div>
|
||||
<div id="links-jason" class="links jason notflo">
|
||||
<ul>
|
||||
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
|
||||
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
|
||||
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
|
||||
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
|
||||
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
|
||||
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
|
||||
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
|
||||
|
||||
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
|
||||
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
|
||||
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
|
||||
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
|
||||
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
|
||||
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
|
||||
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
|
||||
<li><a href="https://ja.son-williams.ca"><i class="fa-solid fa-user"></i> Website</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/resume"><i class="fa-solid fa-file"></i> Résumé</a></li>
|
||||
<li><a href="https://www.linkedin.com/in/jaywll/"><i class="fa-brands fa-linkedin-in"></i> LinkedIn</a></li>
|
||||
<li><a href="https://twitter.com/jaywll"><i class="fa-brands fa-twitter"></i> Twitter</a></li>
|
||||
<li><a href="/"><i class="fa-brands fa-mastodon"></i> Mastodon</a></li>
|
||||
<li><a href="https://www.instagram.com/jaywll/"><i class="fa-brands fa-instagram"></i> Instagram</a></li>
|
||||
<li><a href="https://jaywll.wordpress.com/category/blog/"><i class="fa-brands fa-wordpress"></i> Blog</a></li>
|
||||
<li><a href="https://code.jaywll.co/explore/repos"><i class="fa-solid fa-code-branch"></i> Code</a></li>
|
||||
<li><a href="https://ja.son-williams.ca/contact"><i class="fa-solid fa-envelope"></i> Contact Me</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="links-flo" class="links flo notjason"></div>
|
||||
</div>
|
||||
<div id="splash-flo" class="splash flo notjason">Flo Splash</div>
|
||||
</div>
|
||||
<!-- </div> -->
|
||||
<div id="main-flo" class="main flo notjason">
|
||||
<div id="banner-flo" class="banner flo notjason" data-person="flo">
|
||||
<a href="/flo" class="openlink">Flo Banner</a>
|
||||
</div>
|
||||
<div id="links-flo" class="links flo notjason"></div>
|
||||
</div>
|
||||
<div id="splash-flo" class="splash flo notjason">
|
||||
<div class="splash-container">
|
||||
Flo Splash
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/js/all.min.js" integrity="sha512-rpLlll167T5LJHwp0waJCh3ZRf7pO6IT1+LZOhAyP6phAirwchClbTZV3iqL3BMrVxIYRbzGTpli4rfxsCK6Vw==" 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>
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@ $(() => {
|
|||
minHeight: '100vh'
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: false,
|
||||
queue: true,
|
||||
complete: () => {
|
||||
$('.main.not' + openPerson).css('width', 0)
|
||||
$('#splash-' + openPerson).css({
|
||||
|
|
@ -61,11 +61,26 @@ $(() => {
|
|||
})
|
||||
}
|
||||
})
|
||||
|
||||
// SHOW LINKS HERE
|
||||
}
|
||||
|
||||
// Display the links
|
||||
setTimeout(() => {
|
||||
$('#links-' + openPerson).animate({
|
||||
height: $('#links-' + openPerson).get(0).scrollHeight
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true
|
||||
})
|
||||
}, 300)
|
||||
} else {
|
||||
// If a profile is open, close it...
|
||||
// If a profile is open, close it.
|
||||
$('#links-' + openPerson).animate({
|
||||
height: 0
|
||||
}, {
|
||||
duration: 300,
|
||||
queue: true
|
||||
})
|
||||
|
||||
if (window.matchMedia('(orientation: portrait)').matches) {
|
||||
// If we're closing in portrait mode...
|
||||
$('.main.not' + openPerson).css('width', '100vw')
|
||||
|
|
@ -109,7 +124,6 @@ $(() => {
|
|||
openPerson = false
|
||||
}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue