xdrm-brackets
/
xdrm.io
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat: create scroll button on the home page

This commit is contained in:
Adrien Marquès 2022-10-05 17:36:23 +02:00
parent b0bd060033
commit adf87b62ed
Signed by: xdrm-brackets
GPG Key ID: D75243CA236D825E
2 changed files with 54 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/assets/scroll_arrow.svg Normal file
View File

@ -0,0 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="4.2333mm" height="4.2333mm" version="1.1" viewBox="0 0 4.2333 4.2333" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-89.762 -60.858)">
<path d="m91.879 62.037a0.13229 0.13229 0 0 0-0.13281 0.13281v1.2891l-0.55078-0.55078a0.13229 0.13229 0 0 0-0.18555 0 0.13229 0.13229 0 0 0 0 0.1875l0.77539 0.77539a0.13229 0.13229 0 0 0 0.1875 0l0.77539-0.77539a0.13229 0.13229 0 0 0 0-0.1875 0.13229 0.13229 0 0 0-0.1875 0l-0.55078 0.55273v-1.291a0.13229 0.13229 0 0 0-0.13086-0.13281z" color="#000000" stroke-linecap="round" stroke-linejoin="bevel" style="-inkscape-stroke:none"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 649 B

49
src/components/Home.vue
View File

@ -4,18 +4,24 @@
<div class='wave'></div>
<div class='wave w2'></div>
<div class='scroll-arrow' @click='scrollNext()'>
<img src='@/assets/scroll_arrow.svg' />
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { Themes, Theme } from '@/model/themes';
import { go } from '@/service/scroller';
@Component({
components: {},
})
export default class Home extends Vue {
protected scrollNext() {
go('skill-picker', 0);
}
}
</script>
@ -42,6 +48,11 @@
to{ background-position-x: 100vw; }
}
@keyframes fadeLoop {
from { opacity: 1.0; transform: translateY(-2%); }
to { opacity: 0.8; transform: translateY(2%); }
}
.wave {
display: block;
position: absolute;
@ -65,4 +76,40 @@
z-index: 900;
}
$scroll-btn-size: 5rem;
.scroll-arrow {
display: flex;
position: absolute;
top: calc( 100% - #{1.5*$wave-height} );
left: calc( 50% - #{$scroll-btn-size/2} );
width: $scroll-btn-size;
height: $scroll-btn-size;
opacity: .7;
background: #fff;
border-radius: 50% / 50%;
z-index: 1000;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
transition: opacity .2s ease-in-out;
cursor: pointer;
img {
width: #{.8*$scroll-btn-size};
height: #{.8*$scroll-btn-size};
animation: 1s ease-in-out fadeLoop infinite alternate-reverse;
}
&:hover {
opacity: .9;
}
}
</style>