Skip to content

Commit 39f322b

Browse files
JulianPrieberJulianPrieber
committed
Added custom animation support to Themes
1 parent 280d754 commit 39f322b

File tree

2 files changed

+160
-10
lines changed

2 files changed

+160
-10
lines changed

‎littlelink/css/animations.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/* Table of contents
2+
––––––––––––––––––––––––––––––––––––––––––––––––––
3+
- Entrance animations
4+
- Button hover animations
5+
- Icon hover animations
6+
7+
*/
8+
9+
10+
11+
/* Entrance animations
12+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
13+
14+
.button-entrance {
15+
animation-name: popUp;
16+
animation-duration: 1s;
17+
animation-fill-mode: both;
18+
/* Used to start button entrance animation one after another */
19+
animation-delay: calc(var(--delay)/10);
20+
}
21+
22+
@keyframes popUp {
23+
from {
24+
opacity: 0;
25+
transform: scale3d(0.3, 0.3, 0.3);
26+
}
27+
28+
50% {
29+
opacity: 1;
30+
}
31+
}
32+
33+
.fadein {
34+
animation-name: fadein;
35+
animation-duration: 3s;
36+
animation-fill-mode: both;
37+
}
38+
39+
@keyframes fadein {
40+
from {
41+
opacity: 0;
42+
}
43+
44+
to {
45+
opacity: 1;
46+
}
47+
}
48+
49+
50+
/* Button hover animations
51+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
52+
/* (Also apply to icon) */
53+
54+
.button-hover{
55+
-webkit-transform:perspective(1px) translateZ(0);
56+
transform:perspective(1px) translateZ(0);
57+
box-shadow:0 0 1px rgba(0,0,0,0);
58+
-webkit-transition-duration:.3s;
59+
transition-duration:.3s;
60+
-webkit-transition-property:transform;
61+
transition-property:transform
62+
}
63+
.button-hover:active,.button-hover:focus,.button-hover:hover{
64+
-webkit-transform:scale(1.1);
65+
transform:scale(1.1)
66+
}
67+
68+
69+
/* Icon hover animations
70+
–––––––––––––––––––––––––––––––––––––––––––––––––– */
71+
72+
.icon-hover{
73+
-webkit-transform:perspective(1px) translateZ(0);
74+
transform:perspective(1px) translateZ(0);
75+
box-shadow:0 0 1px rgba(0,0,0,0);
76+
-webkit-transition-duration:.3s;
77+
transition-duration:.3s
78+
}
79+
.icon-hover .hvr-icon{
80+
-webkit-transform:translateZ(0);
81+
transform:translateZ(0)
82+
}
83+
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
84+
-webkit-animation-name:icon-hover;
85+
animation-name:icon-hover;
86+
-webkit-animation-duration:1s;
87+
animation-duration:1s;
88+
-webkit-animation-timing-function:ease-in-out;
89+
animation-timing-function:ease-in-out;
90+
-webkit-animation-iteration-count:1;
91+
animation-iteration-count:1
92+
}
93+
94+
@-webkit-keyframes icon-hover{
95+
16.65%{
96+
-webkit-transform:translateY(6px);
97+
transform:translateY(6px)
98+
}
99+
33.3%{
100+
-webkit-transform:translateY(-5px);
101+
transform:translateY(-5px)
102+
}
103+
49.95%{
104+
-webkit-transform:translateY(4px);
105+
transform:translateY(4px)
106+
}
107+
66.6%{
108+
-webkit-transform:translateY(-2px);
109+
transform:translateY(-2px)
110+
}
111+
83.25%{
112+
-webkit-transform:translateY(1px);
113+
transform:translateY(1px)
114+
}
115+
100%{
116+
-webkit-transform:translateY(0);
117+
transform:translateY(0)
118+
}
119+
}
120+
@keyframes icon-hover{
121+
16.65%{
122+
-webkit-transform:translateY(6px);
123+
transform:translateY(6px)
124+
}
125+
33.3%{
126+
-webkit-transform:translateY(-5px);
127+
transform:translateY(-5px)
128+
}
129+
49.95%{
130+
-webkit-transform:translateY(4px);
131+
transform:translateY(4px)
132+
}
133+
66.6%{
134+
-webkit-transform:translateY(-2px);
135+
transform:translateY(-2px)
136+
}
137+
83.25%{
138+
-webkit-transform:translateY(1px);
139+
transform:translateY(1px)
140+
}
141+
100%{
142+
-webkit-transform:translateY(0);
143+
transform:translateY(0)
144+
}
145+
}

‎resources/views/littlelink.blade.php‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,6 @@
4444

4545
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
4646
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
47-
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
4847
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
4948
@if(file_exists(base_path("littlelink/images/avatar.png" )))
5049
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
@@ -57,11 +56,17 @@
5756
<link rel="stylesheet" href="themes/{{$info->theme}}/share.button.css">
5857
<link rel="stylesheet" href="themes/{{$info->theme}}/brands.css">
5958
<link rel="stylesheet" href="themes/{{$info->theme}}/skeleton-auto.css">
59+
@if(file_exists(base_path("themes/{{$info->theme}}/skeleton-auto.css" )))
60+
<link rel="stylesheet" href="<?php echo asset('themes/' . $info->theme . '/animations.css') ?>">
61+
@else
62+
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
63+
@endif
6064

6165
@else
6266
<?php // override dark/light mode if override cookie is set
6367
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
6468
<link rel="stylesheet" href="{{ asset('littlelink/css/share.button.css') }}">
69+
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
6570
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
6671
@if ($color_scheme_override == 'dark')
6772
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
@@ -136,12 +141,12 @@ function get_operating_system() {
136141

137142
@if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
138143
<script src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
139-
<div align="right" class="sharediv"><div class="button-entrance"><span class="sharebutton hvr-grow hvr-icon-wobble-vertical" id='share-share-button'><img alt="share-icon" class="sharebutton-img share-icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></span></div></div>
144+
<div align="right" class="sharediv"><div class="button-entrance button-hover"><span class="sharebutton button-hover icon-hover" id='share-share-button'><img alt="share-icon" class="sharebutton-img share-icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></span></div></div>
140145
<span class="copy-icon" role="button">
141146
</span>
142147
@else
143148
<span class="copy-icon" role="button">
144-
<div onclick="alert('URL has been copied to your clipboard!')" align="right" class="sharediv"><div class="button-entrance"><a class="sharebutton hvr-grow hvr-icon-wobble-vertical"><img alt="share-icon" class="sharebutton-img share-icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
149+
<div onclick="alert('URL has been copied to your clipboard!')" align="right" class="sharediv"><div class="button-entrance button-hover"><a class="sharebutton button-hover icon-hover"><img alt="share-icon" class="sharebutton-img share-icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}share.svg"><span class="sharebutton-mb">Share</span></a></div></div>
145150
</span>
146151
@endif
147152
<script src="{{ asset('littlelink/js/share.button.js') }}"></script>
@@ -171,18 +176,18 @@ function get_operating_system() {
171176
@foreach($links as $link)
172177
@php $linkName = str_replace('default ','',$link->name) @endphp
173178
@if($link->button_id === 0)
174-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-title button hvr-grow hvr-icon-wobble-vertical" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
179+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-title button button-hover icon-hover" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank">
175180
{{ $link->title }}</a></div>
176181
@elseif($link->name === "custom" and $link->custom_css === "" or $link->custom_css === "NULL")
177-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
182+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-{{ $link->name }} button button-hover icon-hover" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
178183
@elseif($link->name === "custom" and $link->custom_css != "")
179-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button hvr-grow hvr-icon-wobble-vertical" style="{{ $link->custom_css }}" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
184+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-hover icon-hover" style="{{ $link->custom_css }}" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><i style="color: {{$link->custom_icon}}" class="icon hvr-icon fa {{$link->custom_icon}}"></i>{{ $link->title }}</a></div>
180185
@elseif($link->name === "buy me a coffee")
181-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-coffee button hvr-grow hvr-icon-wobble-vertical" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}coffee.svg">Buy me a Coffee</a></div>
186+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-coffee button button-hover icon-hover" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/')}}coffee.svg">Buy me a Coffee</a></div>
182187
@elseif($link->name === "custom_website"and $link->custom_css === "" or $link->custom_css === "NULL")
183-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-custom_website button hvr-grow hvr-icon-wobble-vertical" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
188+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-custom_website button button-hover icon-hover" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
184189
@elseif($link->name === "custom_website" and $link->custom_css != "")
185-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button hvr-grow hvr-icon-wobble-vertical" style="{{ $link->custom_css }}" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
190+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-hover icon-hover" style="{{ $link->custom_css }}" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="http://www.google.com/s2/favicons?domain={{$link->link}}">{{ $link->title }}</a></div>
186191
@elseif($link->name === "space")
187192
<?php
188193
if (is_numeric($link->title) and $link->title < 10)
@@ -195,7 +200,7 @@ function get_operating_system() {
195200
@elseif($link->name === "heading")
196201
<h2>{{ $link->title }}</h2>
197202
@else
198-
<div style="--delay: {{ $initial++ }}s" class="button-entrance"><a class="button button-{{ $link->name }} button hvr-grow hvr-icon-wobble-vertical" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
203+
<div style="--delay: {{ $initial++ }}s" class="button-entrance button-hover"><a class="button button-{{ $link->name }} button button-hover icon-hover" rel="noopener noreferrer nofollow" href="{{ route('clickNumber') . '/' . $link->id . '/' . $link->link}}" target="_blank"><img alt="button-icon" class="icon hvr-icon" src="{{ asset('\/littlelink/icons\/') . $linkName }}.svg">{{ ucfirst($linkName) }}</a></div>
199204
@endif
200205
@endforeach
201206

0 commit comments

Comments
 (0)