From b445eb85ffc187177cbe768282e98c90231ccb93 Mon Sep 17 00:00:00 2001
From: Julian Prieber <60265788+JulianPrieber@users.noreply.github.com>
Date: Mon, 30 May 2022 23:10:08 +0200
Subject: [PATCH] Re-implemented footer hover animations
---
littlelink/css/animations.css | 30 +++++++++++++++++++++---
resources/views/layouts/footer.blade.php | 10 ++++----
2 files changed, 32 insertions(+), 8 deletions(-)
diff --git a/littlelink/css/animations.css b/littlelink/css/animations.css
index 32b8765..c88c8d1 100644
--- a/littlelink/css/animations.css
+++ b/littlelink/css/animations.css
@@ -3,6 +3,7 @@
- Entrance animations
- Button hover animations
- Icon hover animations
+- Footer hover animations
*/
@@ -51,7 +52,7 @@
–––––––––––––––––––––––––––––––––––––––––––––––––– */
/* (Also apply to icon) */
-.button-hover{
+.button-hover, .credit-hover{
display:inline-block;
-webkit-transform:perspective(1px) translateZ(0);
transform:perspective(1px) translateZ(0);
@@ -61,7 +62,9 @@
-webkit-transition-property:transform;
transition-property:transform
}
-.button-hover:active,.button-hover:focus,.button-hover:hover{
+.button-hover:active,.credit-hover:active,
+.button-hover:focus,.credit-hover:focus,
+.button-hover:hover,.credit-hover:hover{
-webkit-transform:scale(1.1);
transform:scale(1.1)
}
@@ -144,4 +147,25 @@
-webkit-transform:translateY(0);
transform:translateY(0)
}
-}
\ No newline at end of file
+}
+
+
+/* Footer hover animations
+–––––––––––––––––––––––––––––––––––––––––––––––––– */
+
+.footer-hover{
+ display:inline-block;
+ -webkit-transform:perspective(1px) translateZ(0);
+ transform:perspective(1px) translateZ(0);
+ box-shadow:0 0 1px rgba(0,0,0,0);
+ -webkit-transition-duration:.3s;
+ transition-duration:.3s;
+ -webkit-transition-property:transform;
+ transition-property:transform;
+ -webkit-transition-timing-function:ease-out;
+ transition-timing-function:ease-out
+}
+.footer-hover:active,.footer-hover:focus,.footer-hover:hover{
+ -webkit-transform:translateY(-8px);
+ transform:translateY(-8px)
+}
diff --git a/resources/views/layouts/footer.blade.php b/resources/views/layouts/footer.blade.php
index 840e2c8..1a0908a 100755
--- a/resources/views/layouts/footer.blade.php
+++ b/resources/views/layouts/footer.blade.php
@@ -1,16 +1,16 @@
<div class="container">
<div class="footer fadein" style="margin:5% 0px 35px 0px;">
@if(env('DISPLAY_FOOTER') === true)
- <a class="hvr-float spacing" href="{{ url('') }}/">Home</a>
- <a class="hvr-float spacing" href="{{ url('') }}/pages/terms">Terms</a>
- <a class="hvr-float spacing" href="{{ url('') }}/pages/privacy">Privacy</a>
- <a class="hvr-float spacing" href="{{ url('') }}/pages/contact">Contact</a>
+ <a class="footer-hover spacing" href="{{ url('') }}/">Home</a>
+ <a class="footer-hover spacing" href="{{ url('') }}/pages/terms">Terms</a>
+ <a class="footer-hover spacing" href="{{ url('') }}/pages/privacy">Privacy</a>
+ <a class="footer-hover spacing" href="{{ url('') }}/pages/contact">Contact</a>
@endif
</div>
@if(env('DISPLAY_CREDIT') === true)
<div class="credit-footer"><a style="text-decoration: none;" class="spacing" href="https://littlelink-custom.com" target="_blank" title="Learn more">
- <section class="hvr-grow fadein">
+ <section class="credit-hover hvr-grow fadein">
<div class="parent-footer credit-icon" >
<img id="footer_spin" class="footer_spin image-footer1 generic" src="{{ asset('littlelink/images/just-gear.svg') }}" alt="LittleLink Custom"></img>
<img class="image-footer2" src="{{ asset('littlelink/images/just-ll.svg') }}" alt="LittleLink Custom"></img>