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

@ -18,6 +18,18 @@ h1{
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

@ -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");
}
});
})