mirror of
https://github.com/DerTyp7/dertyp7.github.io.git
synced 2025-11-02 06:32:32 +01:00
Update ScrollToTop component and styles
This commit is contained in:
@@ -1,4 +1,3 @@
|
||||
// src/styles/ScrollToTop.scss
|
||||
.scrollToTop {
|
||||
position: fixed;
|
||||
bottom: 20px;
|
||||
@@ -6,23 +5,35 @@
|
||||
cursor: pointer;
|
||||
|
||||
.arrow {
|
||||
transition: transform 200ms ease-in-out;
|
||||
transition: transform 300ms ease-in-out;
|
||||
|
||||
&.up {
|
||||
transform: rotate(0deg);
|
||||
|
||||
&:hover {
|
||||
animation: pulseUp 1s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
&.down {
|
||||
transform: rotate(-180deg);
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: fixed;
|
||||
bottom: 15px;
|
||||
right: 50%;
|
||||
|
||||
&:hover {
|
||||
animation: pulseDown 1s infinite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
animation: pulse 1s infinite;
|
||||
color: var(--color-accent);
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
@keyframes pulseUp {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
@@ -33,4 +44,16 @@
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulseDown {
|
||||
0% {
|
||||
transform: scale(1) rotate(-180deg);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.4) rotate(-180deg);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1) rotate(-180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user