Added custom animation support to Themes
This commit is contained in:
Julian Prieber
parent
280d7544a9
commit
39f322bd86
|
|
@ -0,0 +1,145 @@
|
|||
/* Table of contents
|
||||
––––––––––––––––––––––––––––––––––––––––––––––––––
|
||||
- Entrance animations
|
||||
- Button hover animations
|
||||
- Icon hover animations
|
||||
|
||||
*/
|
||||
|
||||
|
||||
|
||||
/* Entrance animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.button-entrance {
|
||||
animation-name: popUp;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: both;
|
||||
/* Used to start button entrance animation one after another */
|
||||
animation-delay: calc(var(--delay)/10);
|
||||
}
|
||||
|
||||
@keyframes popUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale3d(0.3, 0.3, 0.3);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.fadein {
|
||||
animation-name: fadein;
|
||||
animation-duration: 3s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@keyframes fadein {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* Button hover animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
/* (Also apply to icon) */
|
||||
|
||||
.button-hover{
|
||||
-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
|
||||
}
|
||||
.button-hover:active,.button-hover:focus,.button-hover:hover{
|
||||
-webkit-transform:scale(1.1);
|
||||
transform:scale(1.1)
|
||||
}
|
||||
|
||||
|
||||
/* Icon hover animations
|
||||
–––––––––––––––––––––––––––––––––––––––––––––––––– */
|
||||
|
||||
.icon-hover{
|
||||
-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
|
||||
}
|
||||
.icon-hover .hvr-icon{
|
||||
-webkit-transform:translateZ(0);
|
||||
transform:translateZ(0)
|
||||
}
|
||||
.icon-hover:active .hvr-icon,.icon-hover:focus .hvr-icon,.icon-hover:hover .hvr-icon{
|
||||
-webkit-animation-name:icon-hover;
|
||||
animation-name:icon-hover;
|
||||
-webkit-animation-duration:1s;
|
||||
animation-duration:1s;
|
||||
-webkit-animation-timing-function:ease-in-out;
|
||||
animation-timing-function:ease-in-out;
|
||||
-webkit-animation-iteration-count:1;
|
||||
animation-iteration-count:1
|
||||
}
|
||||
|
||||
@-webkit-keyframes icon-hover{
|
||||
16.65%{
|
||||
-webkit-transform:translateY(6px);
|
||||
transform:translateY(6px)
|
||||
}
|
||||
33.3%{
|
||||
-webkit-transform:translateY(-5px);
|
||||
transform:translateY(-5px)
|
||||
}
|
||||
49.95%{
|
||||
-webkit-transform:translateY(4px);
|
||||
transform:translateY(4px)
|
||||
}
|
||||
66.6%{
|
||||
-webkit-transform:translateY(-2px);
|
||||
transform:translateY(-2px)
|
||||
}
|
||||
83.25%{
|
||||
-webkit-transform:translateY(1px);
|
||||
transform:translateY(1px)
|
||||
}
|
||||
100%{
|
||||
-webkit-transform:translateY(0);
|
||||
transform:translateY(0)
|
||||
}
|
||||
}
|
||||
@keyframes icon-hover{
|
||||
16.65%{
|
||||
-webkit-transform:translateY(6px);
|
||||
transform:translateY(6px)
|
||||
}
|
||||
33.3%{
|
||||
-webkit-transform:translateY(-5px);
|
||||
transform:translateY(-5px)
|
||||
}
|
||||
49.95%{
|
||||
-webkit-transform:translateY(4px);
|
||||
transform:translateY(4px)
|
||||
}
|
||||
66.6%{
|
||||
-webkit-transform:translateY(-2px);
|
||||
transform:translateY(-2px)
|
||||
}
|
||||
83.25%{
|
||||
-webkit-transform:translateY(1px);
|
||||
transform:translateY(1px)
|
||||
}
|
||||
100%{
|
||||
-webkit-transform:translateY(0);
|
||||
transform:translateY(0)
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +44,6 @@
|
|||
|
||||
<link href="//fonts.googleapis.com/css?family=Open+Sans:400,600,800&display=swap" rel="stylesheet">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/normalize.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/hover-min.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animate.css') }}">
|
||||
@if(file_exists(base_path("littlelink/images/avatar.png" )))
|
||||
<link rel="icon" type="image/png" href="{{ asset('littlelink/images/avatar.png') }}">
|
||||
|
|
@ -57,11 +56,17 @@
|
|||
<link rel="stylesheet" href="themes/{{$info->theme}}/share.button.css">
|
||||
<link rel="stylesheet" href="themes/{{$info->theme}}/brands.css">
|
||||
<link rel="stylesheet" href="themes/{{$info->theme}}/skeleton-auto.css">
|
||||
@if(file_exists(base_path("themes/{{$info->theme}}/skeleton-auto.css" )))
|
||||
<link rel="stylesheet" href="<?php echo asset('themes/' . $info->theme . '/animations.css') ?>">
|
||||
@else
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
|
||||
@endif
|
||||
|
||||
@else
|
||||
<?php // override dark/light mode if override cookie is set
|
||||
$color_scheme_override = isset($_COOKIE["color_scheme_override"]) ? $_COOKIE["color_scheme_override"] : false; ?>
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/share.button.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/animations.css') }}">
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/brands.css') }}">
|
||||
@if ($color_scheme_override == 'dark')
|
||||
<link rel="stylesheet" href="{{ asset('littlelink/css/skeleton-dark.css') }}">
|
||||
|
|
@ -136,12 +141,12 @@ function get_operating_system() {
|
|||
|
||||
@if($user_browser === 'Chrome' or get_operating_system() == 'mobile')
|
||||
<script src="{{ asset('littlelink/js/jquery.min.js') }}"></script>
|
||||
<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>
|
||||
<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>
|
||||
<span class="copy-icon" role="button">
|
||||
</span>
|
||||
@else
|
||||
<span class="copy-icon" role="button">
|
||||
<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>
|
||||
<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>
|
||||
</span>
|
||||
@endif
|
||||
<script src="{{ asset('littlelink/js/share.button.js') }}"></script>
|
||||
|
|
@ -171,18 +176,18 @@ function get_operating_system() {
|
|||
@foreach($links as $link)
|
||||
@php $linkName = str_replace('default ','',$link->name) @endphp
|
||||
@if($link->button_id === 0)
|
||||
<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">
|
||||
<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">
|
||||
{{ $link->title }}</a></div>
|
||||
@elseif($link->name === "custom" and $link->custom_css === "" or $link->custom_css === "NULL")
|
||||
<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>
|
||||
<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>
|
||||
@elseif($link->name === "custom" and $link->custom_css != "")
|
||||
<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>
|
||||
<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>
|
||||
@elseif($link->name === "buy me a coffee")
|
||||
<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>
|
||||
<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>
|
||||
@elseif($link->name === "custom_website"and $link->custom_css === "" or $link->custom_css === "NULL")
|
||||
<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>
|
||||
<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>
|
||||
@elseif($link->name === "custom_website" and $link->custom_css != "")
|
||||
<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>
|
||||
<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>
|
||||
@elseif($link->name === "space")
|
||||
<?php
|
||||
if (is_numeric($link->title) and $link->title < 10)
|
||||
|
|
@ -195,7 +200,7 @@ function get_operating_system() {
|
|||
@elseif($link->name === "heading")
|
||||
<h2>{{ $link->title }}</h2>
|
||||
@else
|
||||
<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>
|
||||
<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>
|
||||
@endif
|
||||
@endforeach
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue