Browse Source

Snow!

tags/v1.9.0
Giuseppe Guerra 1 year ago
parent
commit
8d62311aee
5 changed files with 115 additions and 0 deletions
  1. BIN
      static/snow/large.png
  2. BIN
      static/snow/medium.png
  3. BIN
      static/snow/small.png
  4. +102
    -0
      static/snow/snow.css
  5. +13
    -0
      templates/base.html

BIN
static/snow/large.png View File

Before After
Width: 500  |  Height: 500  |  Size: 956B

BIN
static/snow/medium.png View File

Before After
Width: 410  |  Height: 410  |  Size: 8.3KB

BIN
static/snow/small.png View File

Before After
Width: 310  |  Height: 310  |  Size: 6.8KB

+ 102
- 0
static/snow/snow.css View File

@@ -0,0 +1,102 @@
#snow-container {
position: absolute;
width: 100%;
height: 175px;
}

#snow-container>div:first-child, .snow {
z-index: 100;
pointer-events: none;
}

#snow-container>div:first-child {
overflow: hidden;
position: absolute;
top: 0;
height: 100%;
width: 100%;
max-width: 100%;
}

.snow {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
-webkit-animation: falling linear infinite both;
animation: falling linear infinite both;
-webkit-transform: translate3D(0, -100%, 0);
transform: translate3D(0, -100%, 0);
}

.snow.large {
-webkit-animation-duration: 10s;
animation-duration: 10s;
background-image: url("./large.png");
background-size: auto;
}

.snow.large + .delayed {
-webkit-animation-delay: -5s;
animation-delay: -5s;
}

.snow.medium {
-webkit-animation-duration: 20s;
animation-duration: 20s;
background-image: url("./medium.png");
background-size: contain;
}

.snow.medium + .delayed {
-webkit-animation-delay: -10s;
animation-delay: -10s;
}

.snow.small {
-webkit-animation-duration: 30s;
animation-duration: 30s;
background-image: url("./small.png");
background-size: auto;
}

.snow.small + .delayed {
-webkit-animation-delay: -15s;
animation-delay: -15s;
}

@-webkit-keyframes falling {
0% {
-webkit-transform: translate3D(-7.5%, -100%, 0);
transform: translate3D(-7.5%, -100%, 0);
opacity: 0;
}
10% {
-webkit-transform: translate3D(-7.5%, -100%, 0);
transform: translate3D(-7.5%, -100%, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3D(7.5%, 100%, 0);
transform: translate3D(7.5%, 100%, 0);
}
}

@keyframes falling {
0% {
-webkit-transform: translate3D(-7.5%, -100%, 0);
transform: translate3D(-7.5%, -100%, 0);
opacity: 0;
}
10% {
-webkit-transform: translate3D(-7.5%, -100%, 0);
transform: translate3D(-7.5%, -100%, 0);
opacity: 1;
}
100% {
-webkit-transform: translate3D(7.5%, 100%, 0);
transform: translate3D(7.5%, 100%, 0);
}
}


+ 13
- 0
templates/base.html View File

@@ -12,6 +12,7 @@

<link rel="stylesheet" type="text/css" href="/static/{{ if $ds }}dark/{{ end }}semantic.min.css?{{ unixNano }}">
<link rel="stylesheet" type="text/css" href="/static/ripple.css?{{ unixNano }}">
<link rel="stylesheet" type="text/css" href="/static/snow/snow.css?{{ unixNano }}">
</head>
<body {{ if $ds }} class="ds"{{ end }}>
{{/*
@@ -29,6 +30,18 @@
{{ if not .DisableHH }}
<div class="huge heading {{ if .HeadingOnRight }}right{{ end }} dropped"
style="background-image: url('{{ if .KyutGrillAbsolute }}{{ .KyutGrill }}{{ else }}/static/headers/{{ or .KyutGrill "default.jpg" }}{{ end }}');">
<div id="snow-container">
<div>
<div class="snow large"></div>
<div class="snow large delayed"></div>
<div class="snow medium"></div>
<div class="snow medium delayed"></div>
<div class="snow small"></div>
<div class="snow small delayed"></div>
</div>
</div>
<div class="ui container">
<h1>{{ if .HeadingTitle }}{{ .T .HeadingTitle | html }}{{ else }}{{ .T .TitleBar }}{{ end }}</h1>
</div>


Loading…
Cancel
Save