devol/LinkStack
1
0
Fork 0
mirror of https://github.com/LinkStackOrg/LinkStack.git synced 2025-04-25 07:28:50 +02:00
Code Issues Packages Projects Releases Wiki Activity

Re-implemented footer hover animations

Browse Source
This commit is contained in:
Julian Prieber 2022-05-30 23:10:08 +02:00
parent 663fd9701e
commit b445eb85ff
2 changed files with 32 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
littlelink/css/animations.css vendored
View File

@ -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)
}
}
}
/* 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)
}

10
resources/views/layouts/footer.blade.php
View File

@ -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>