acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

fade/scale animation

Browse Source
This commit is contained in:
Samuel Newman
2024-10-30 18:17:51 +00:00
parent e9f6a8e58d
commit 729a27af0c
3 changed files with 73 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files
bskyweb/templates/base.html
+33 -8
View File
@@ -70,10 +70,35 @@
}
#splash {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
pointer-events: none;
}
#splash svg {
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) translateY(-50px);
}
@media (prefers-color-scheme: dark) {
#splash {
background-color: black;
}
}
.animate-splash {
animation: splash-out 0.2s ease-in forwards;
}
@keyframes splash-out {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
/* We need this style to prevent web dropdowns from shifting the display when opening */
body {
@@ -96,11 +121,11 @@
</head>
<body>
{%- block body_all %}
<div id="root">
<div id="splash">
<!-- Bluesky SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
</div>
<div id="root"></div>
<div id="splash">
<!-- Bluesky SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
</div>
<noscript>
index.web.js
+8
View File
@@ -5,4 +5,12 @@ import {registerRootComponent} from 'expo'
import App from '#/App'
const splash = document.querySelector('#splash')
if (splash) {
splash.classList.add('animate-splash')
setTimeout(() => {
splash.remove()
}, 500)
}
registerRootComponent(App)
web/index.html
+32 -7
View File
@@ -75,10 +75,35 @@
}
#splash {
position: fixed;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background-color: white;
pointer-events: none;
}
#splash svg {
width: 100px;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%) translateY(-50px);
}
@media (prefers-color-scheme: dark) {
#splash {
background-color: black;
}
}
.animate-splash {
animation: splash-out 0.2s ease-in forwards;
}
@keyframes splash-out {
0% {
opacity: 1;
}
80% {
opacity: 0;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
/* We need this style to prevent web dropdowns from shifting the display when opening */
body {
@@ -138,11 +163,11 @@
</noscript>
<!-- The root element for your Expo app. -->
<div id="root">
<div id="splash">
<div id="root"></div>
<div id="splash">
<!-- Bluesky SVG -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 320"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 360"><path fill="#0085ff" d="M180 142c-16.3-31.7-60.7-90.8-102-120C38.5-5.9 23.4-1 13.5 3.4 2.1 8.6 0 26.2 0 36.5c0 10.4 5.7 84.8 9.4 97.2 12.2 41 55.7 55 95.7 50.5-58.7 8.6-110.8 30-42.4 106.1 75.1 77.9 103-16.7 117.3-64.6 14.3 48 30.8 139 116 64.6 64-64.6 17.6-97.5-41.1-106.1 40 4.4 83.5-9.5 95.7-50.5 3.7-12.4 9.4-86.8 9.4-97.2 0-10.3-2-27.9-13.5-33C336.5-1 321.5-6 282 22c-41.3 29.2-85.7 88.3-102 120Z"/></svg>
</div>
</div>
</body>
</html>