surya/myprojplanet_vite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

++ Animation fixed in Home pic.

Browse Source 
++"Dark Mode"
This commit is contained in:
Surya Paolo
2022-11-23 23:57:21 +01:00
parent 46bf74e9e2
commit fab0dbbb72
17 changed files with 722 additions and 232 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
src/css/app.scss
View File

@@ -973,6 +973,10 @@ h3 {
}
}
.q-item__section--side {
margin-left: 0px !important;
}
.underline {
text-decoration: underline;
color: blue;
@@ -1336,3 +1340,147 @@ h3 {
transform: translateY(0);
}
}
.film, .effect {
width: 100%;
height: 100%;
filter: blur(0.45px) drop-shadow(0px 0px 0px #fff1);
}
.film:after, .effect:after {
content: '';
width: 120%;
height: 100%;
top: 0;
left: 0;
padding-left: 100px;
opacity: 0.5;
animation: film-scratch 0.45s steps(1) infinite;
background: repeating-linear-gradient(90deg, #0002 0 2px, transparent 4px 37vmin);
}
.effect:after {
left: 30%;
animation: effect-scratch 2s infinite;
}
.grain {
width: 100%;
height: 100%;
}
.grain:after {
content: '';
width: 110%;
height: 110%;
top: -5%;
left: -5%;
opacity: .25;
background-image:
repeating-conic-gradient(var(--black) 0%, transparent .00003%, transparent .0005%, transparent .00095%),
repeating-conic-gradient(var(--black) 0%, transparent .00005%, transparent 0.00015%, transparent 0.0009%);
animation: grain 0.5s steps(1) infinite;
filter: drop-shadow(0px 0px 1px black);
}
@keyframes grain {
0%, 100% { transform: translate(0, 0); }
10% { transform: translate(-1%, -1%); }
20% { transform: translate(1%, 1%); }
30% { transform: translate(-2%, -2%); }
40% { transform: translate(3%, 3%); }
50% { transform: translate(-3%, -3%); }
60% { transform: translate(4%, 4%); }
70% { transform: translate(-4%, -4%); }
80% { transform: translate(2%, 2%); }
90% { transform: translate(-3%, -3%); }
}
@keyframes film-scratch {
0%, 100% { transform: translateX(0); opacity: 0.5; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); opacity: 0.75; }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(-2%); }
}
@keyframes effect-scratch {
0% { transform: translateX(0); opacity: 0.75; }
10% { transform: translateX(-1%); }
20% { transform: translateX(1%); }
30% { transform: translateX(-2%); }
40% { transform: translateX(3%); }
50% { transform: translateX(-3%); opacity: 0.5; }
60% { transform: translateX(8%); }
70% { transform: translateX(-3%); }
80% { transform: translateX(10%); opacity: 0.25; }
90% { transform: translateX(20%); }
100% { transform: translateX(30%); }
}
/**** OLD FILM EFFECT END ****/
@keyframes zoomImg {
0% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
20% { transform: translate(-15%, 10%) scale(1.5); opacity: 1; }
50% { transform: translate(-15%, 25%) scale(1.35); opacity: 1; }
80% { transform: translate(-65%, 25%) scale(1.35); opacity: 1; }
100% { transform: translate(-75%, 10%) scale(1.5); opacity: 0.6; }
}
.zoomImg {
animation: zoomImg 20s linear infinite;
}
.animate__animated.animate__slow3 {
-webkit-animation-duration: calc(1s * 3);
animation-duration: calc(1s * 3);
-webkit-animation-duration: calc(var(--animate-duration) * 3);
animation-duration: calc(var(--animate-duration) * 3);
}
.animate__animated.animate__slow4 {
-webkit-animation-duration: calc(1s * 4);
animation-duration: calc(1s * 4);
-webkit-animation-duration: calc(var(--animate-duration) * 4);
animation-duration: calc(var(--animate-duration) * 4);
}
.animate__animated.animate__slow5 {
-webkit-animation-duration: calc(1s * 5);
animation-duration: calc(1s * 5);
-webkit-animation-duration: calc(var(--animate-duration) * 5);
animation-duration: calc(var(--animate-duration) * 5);
}
.animate__animated.animate__slow10 {
-webkit-animation-duration: calc(1s * 10);
animation-duration: calc(1s * 10);
-webkit-animation-duration: calc(var(--animate-duration) * 10);
animation-duration: calc(var(--animate-duration) * 10);
}
.animate__animated.animate__slow20 {
-webkit-animation-duration: calc(1s * 20);
animation-duration: calc(1s * 20);
-webkit-animation-duration: calc(var(--animate-duration) * 20);
animation-duration: calc(var(--animate-duration) * 20);
}
.animate__animated.animate__ease-in-out {
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.animate__animated.animate__linear {
transition-timing-function: linear;
}
.animate__animated.animate__ease-in {
transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
}
.animate__animated.animate__ease-out {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.animate__animated.animate__ease {
transition-timing-function: ease;
}