diff options
| author | gurusabarish <gurusabarisha@gmail.com> | 2022-03-23 03:34:01 +0300 |
|---|---|---|
| committer | gurusabarish <gurusabarisha@gmail.com> | 2022-03-23 03:34:01 +0300 |
| commit | e3fb3dc6beb3546003ad183e39e7d72fca1ede70 (patch) | |
| tree | 025751762b61bd10a0e77879e5384e573131dc47 | |
| parent | b611c5f102fa22a975663bd3f8a7c40bbcd04dce (diff) | |
hero animations
| -rw-r--r-- | layouts/partials/sections/hero/index.html | 2 | ||||
| -rw-r--r-- | layouts/partials/sections/projects.html | 2 | ||||
| -rw-r--r-- | static/css/header.css | 15 | ||||
| -rw-r--r-- | static/css/index.css | 47 |
4 files changed, 63 insertions, 3 deletions
diff --git a/layouts/partials/sections/hero/index.html b/layouts/partials/sections/hero/index.html index 8107c6e..14602f4 100644 --- a/layouts/partials/sections/hero/index.html +++ b/layouts/partials/sections/hero/index.html @@ -2,7 +2,7 @@ <section id="hero" class="py-5">
<div class="container px-3 px-sm-5 px-md-5 px-lg-5 pt-lg-3">
<div class="row">
- <div class="col-sm-12 col-md-12 col-lg-8" id="primary-font">
+ <div class="col-sm-12 col-md-12 col-lg-8 content" id="primary-font">
<span class="subtitle">
{{ .Site.Params.hero.intro }}
</span>
diff --git a/layouts/partials/sections/projects.html b/layouts/partials/sections/projects.html index cf83c68..c7c0129 100644 --- a/layouts/partials/sections/projects.html +++ b/layouts/partials/sections/projects.html @@ -2,7 +2,7 @@ <section id="projects" class="py-5">
<div class="container">
<h3 class="text-center">Projects</h3>
- <div class="row justify-content-center px-3 ">
+ <div class="row justify-content-center px-3 px-md-5">
{{ range .Site.Params.projects.items }}
<div class="col-lg-4 col-md-6 my-3">
<div class="card my-3 h-100" title="{{ .title }}">
diff --git a/static/css/header.css b/static/css/header.css index 3a0f2f3..1d7eaa5 100644 --- a/static/css/header.css +++ b/static/css/header.css @@ -1,3 +1,18 @@ +@keyframes fade-up {
+ 0% {
+ transform: translateY(-10px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+
+header .navbar {
+ animation: fade-up 0.5s ease-in;
+}
+
header .navbar .navbar-nav a {
color: var(--text-color) !important;
}
diff --git a/static/css/index.css b/static/css/index.css index bca1b1d..7306df8 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -1,3 +1,44 @@ +/* Animation */
+@keyframes fade-in {
+ 0% {
+ opacity: 0;
+ }
+ 100% {
+ opacity: 1;
+ }
+}
+@keyframes fade-bottom {
+ 0% {
+ transform: translateY(50px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateY(0);
+ opacity: 1;
+ }
+}
+@keyframes fade-left {
+ 0% {
+ transform: translateX(-20px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes fade-right {
+ 0% {
+ transform: translateX(20px);
+ opacity: 0;
+ }
+ 100% {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
/* ToolTip */
.tooltip {
@@ -19,6 +60,10 @@ max-width: 100%;
}
+#hero .content {
+ animation: fade-left 1.2s ease-out;
+}
+
#hero .hero-bottom-svg {
opacity: 0.5;
position: absolute;
@@ -49,6 +94,7 @@ }
#hero .image img {
+ animation: fade-in 1.2s ease-out;
box-shadow: 0px 8px 56px rgba(15, 80, 100, 0.16);
transition: box-shadow 0.3s;
padding: 0;
@@ -127,7 +173,6 @@ }
/* about me */
-
#about h3 {
color: var(--text-secondary-color) !important;
}
|