devol
/
LinkStack
mirror of https://github.com/LinkStackOrg/LinkStack.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added button entrance animation 

Live demo: https://julianprieber.github.io/littlelink-admin-demo/button-entrance.html

Added an entrance animation for buttons on home.blade.php. This animation was made by the Animate.css project (https://github.com/animate-css/animate.css).

Each button entrance animation lasts 100ms. Every button after the first adds 100ms to the value of the previous button i.e. button 1 loads after 100ms, button 2 loads after 200ms,  button 3 after 300ms and so on...

Timings for the buttons can be changed in /littlelink/css/animate.css

I put every button in a separate <div> Tag, so the animation wouldn't in interfere with the existing hover animation.
This commit is contained in:
JulianPrieber 2022-02-17 22:15:51 +01:00 committed by GitHub
parent 44f57ce954
commit 11d05a558b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
resources/views/home.blade.php
View File

@ -9,6 +9,7 @@
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-light.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}"> <link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}"> <link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
</head> </head>
<body> <body>
@ -37,12 +38,11 @@
<!-- Short Bio --> <!-- Short Bio -->
<p class="mt-5">{{ $message->home_message }}</p> <p class="mt-5">{{ $message->home_message }}</p>
<?php $initial=1; // <-- Effectively sets the initial loading time of the buttons. This value should be left at 1. ?>
<!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css --> <!-- Replace # with your profile URL. Delete whatever you don't need & create your own brand styles in css/brands.css -->
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-github button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/github.svg') }}">Github</a></div>
<a class="button button-github button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/github.svg') }}">Github</a> <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-twitter button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/twitter.svg') }}">Twitter</a></div>
<a class="button button-twitter button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/twitter.svg') }}">Twitter</a> <div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-instagram button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/instagram.svg') }}">Instagram</a></div>
<a class="button button-instagram button hvr-grow hvr-icon-wobble-vertical" href="#"><img class="icon hvr-icon" src="{{ asset('littlelink/icons/instagram.svg') }}">Instagram</a>
<!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>--> <!--<a class="button button-pinterest" href="#"><img class="icon" src="{{ asset('littlelink/icons/pinterest.svg') }}">Pinterest</a>-->
</br></br> </br></br>