animations also in contact and experience section

This commit is contained in:
Lukas Heiligenbrunner 2020-03-31 22:52:31 +02:00
parent 68595415d3
commit 2966ca55ba
6 changed files with 98 additions and 23 deletions

View File

@ -9,8 +9,17 @@
background-color: #deebff; background-color: #deebff;
} }
#contactheader{
visibility: hidden;
}
#contactsubheader{
visibility: hidden;
}
.personalcontacts { .personalcontacts {
margin-top: 60px; margin-top: 60px;
visibility: hidden;
} }
.personalcontacts a { .personalcontacts a {

View File

@ -65,12 +65,17 @@
border-radius: 5mm; border-radius: 5mm;
} }
#experienceheader {
visibility: hidden;
}
.ratiobtn { .ratiobtn {
display: none; display: none;
} }
#experiencecontentcontainer { #experiencecontentcontainer {
margin-top: 100px; margin-top: 100px;
visibility: hidden;
} }
.experiencetitle { .experiencetitle {

View File

@ -12,12 +12,24 @@ body, html, #maincontent {
/*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/ /*font-family: Calibre, "San Francisco", "SF Pro Text", -apple-system, system-ui, BlinkMacSystemFont, Roboto, "Helvetica Neue", "Segoe UI", Arial, sans-serif;*/
} }
h1{ h1 {
text-transform: uppercase; text-transform: uppercase;
font-family: 'Open Sans', arial, sans-serif; font-family: 'Open Sans', arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
.animationappearnow {
animation: textappear 1s 0ms 1 forwards;
}
.animationappear300ms {
animation: textappear 1s 300ms 1 forwards;
}
.animationappear600ms {
animation: textappear 1s 600ms 1 forwards;
}
/* general definition of a tile */ /* general definition of a tile */
.tile { .tile {
height: 80%; height: 80%;
@ -56,6 +68,34 @@ h1{
font: bold 15px/1.4 'Open Sans', arial, sans-serif; font: bold 15px/1.4 'Open Sans', arial, sans-serif;
} }
/* The animation code */
@keyframes textfade {
from {
visibility: hidden;
position: relative;
top: -20px;
}
to {
visibility: visible;
position: relative;
top: 0;
}
}
/* The animation code */
@keyframes textappear {
from {
visibility: hidden;
opacity: 0;
top: -20px;
}
to {
visibility: visible;
opacity: 1;
top: 0;
}
}
/* screen larger than 600px -- desktop */ /* screen larger than 600px -- desktop */
@media screen and (min-width: 1201px) { @media screen and (min-width: 1201px) {

View File

@ -26,7 +26,7 @@
color: #78ffd9; color: #78ffd9;
visibility: hidden; visibility: hidden;
animation: textfade 1s 900ms 1 forwards ; animation: textfade 1s 900ms 1 forwards;
} }
#homepicture { #homepicture {
@ -46,7 +46,7 @@
color: #ced5f6; color: #ced5f6;
visibility: hidden; visibility: hidden;
animation: textfade 1s 600ms 1 forwards ; animation: textfade 1s 600ms 1 forwards;
} }
#subTitleText { #subTitleText {
@ -54,14 +54,14 @@
color: #bec1d4; color: #bec1d4;
visibility: hidden; visibility: hidden;
animation: textfade 1s 300ms 1 forwards ; animation: textfade 1s 300ms 1 forwards;
} }
#meaningFullSentence { #meaningFullSentence {
width: 40%; width: 40%;
color: #babccd; color: #babccd;
animation: textfade 1s 0ms 1 forwards ; animation: textfade 1s 0ms 1 forwards;
} }
#homepicture:hover { #homepicture:hover {
@ -69,20 +69,6 @@
transition: all 500ms; transition: all 500ms;
} }
/* The animation code */
@keyframes textfade {
from {
visibility: hidden;
position: relative;
top: -20px;
}
to {
visibility: visible;
position: relative;
top: 0;
}
}
/* height smaller than 720px */ /* height smaller than 720px */
@media screen and (max-height: 720px) { @media screen and (max-height: 720px) {
#homepicture { #homepicture {

View File

@ -19,6 +19,9 @@
<!-- Latest compiled JavaScript --> <!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<!-- main javascript -->
<script src="js/index.js"></script>
<!-- Stylesheets --> <!-- Stylesheets -->
<link rel="stylesheet" href="css/general.css"> <link rel="stylesheet" href="css/general.css">
<link rel="stylesheet" href="css/home.css"> <link rel="stylesheet" href="css/home.css">
@ -120,7 +123,7 @@
<!-- Experience Page --> <!-- Experience Page -->
<div id="section3" class="tile"> <div id="section3" class="tile">
<div class="container"> <div class="container">
<h1>Experience</h1> <h1 id="experienceheader">Experience</h1>
<div id="experiencecontentcontainer"> <div id="experiencecontentcontainer">
<input class="ratiobtn" id="tab1" type="radio" name="tabs" checked=""> <input class="ratiobtn" id="tab1" type="radio" name="tabs" checked="">
@ -208,8 +211,8 @@
<!-- Contact Page --> <!-- Contact Page -->
<div id="section5" class="tile"> <div id="section5" class="tile">
<div class="container"> <div class="container">
<h1>Contact</h1> <h1 id="contactheader">Contact</h1>
<h3>I'd love to hear from You!</h3> <h3 id="contactsubheader">I'd love to hear from You!</h3>
<div class="personalcontacts"> <div class="personalcontacts">
<a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank"> <a href="mailto:lukas.heiligenbrunner@gmail.com" target="_blank">
<div id="emailsign" class="contactsign"> <div id="emailsign" class="contactsign">

32
js/index.js Normal file
View File

@ -0,0 +1,32 @@
$(function () {
;(function ($, win) {
$.fn.inViewport = function (cb) {
return this.each(function (i, el) {
function visPx() {
const H = $(this).height(),
r = el.getBoundingClientRect(), t = r.top, b = r.bottom;
return cb.call(el, Math.max(0, t > 0 ? H - t : (b < H ? b : H)));
}
visPx();
$(win).on("resize scroll", visPx);
});
};
}(jQuery, window));
$("#section3").inViewport(function (px) {
if (px) {
$("#experienceheader").addClass("animationappear600ms");
$("#experiencecontentcontainer").addClass("animationappear300ms");
}
});
$("#section5").inViewport(function (px) {
if (px) {
$("#contactheader").addClass("animationappear600ms");
$("#contactsubheader").addClass("animationappear300ms");
$(".personalcontacts").addClass("animationappearnow");
}
});
})