79 lines
1.8 KiB
Text
79 lines
1.8 KiB
Text
|
---
|
||
|
|
const { targetSelector = '.info-section' } = Astro.props;
|
||
|
|
---
|
||
|
|
|
||
|
|
<div class="scroll-indicator" id="scrollArrow" data-target={targetSelector}>
|
||
|
|
<div class="scroll-indicator-bg"></div>
|
||
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round">
|
||
|
|
<polyline points="6,9 12,15 18,9"></polyline>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
.scroll-indicator {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 40px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
color: white;
|
||
|
|
animation: bounce 2s infinite;
|
||
|
|
cursor: pointer;
|
||
|
|
z-index: 10;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: 60px;
|
||
|
|
height: 60px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-indicator-bg {
|
||
|
|
position: absolute;
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
border: 2px solid rgba(255, 255, 255, 0.6);
|
||
|
|
border-radius: 50%;
|
||
|
|
background: rgba(0, 0, 0, 0.3);
|
||
|
|
transition: all 0.3s ease;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-indicator:hover .scroll-indicator-bg {
|
||
|
|
background: rgba(0, 0, 0, 0.5);
|
||
|
|
border-color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.scroll-indicator svg {
|
||
|
|
position: relative;
|
||
|
|
z-index: 1;
|
||
|
|
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5));
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes bounce {
|
||
|
|
0%, 20%, 50%, 80%, 100% {
|
||
|
|
transform: translateX(-50%) translateY(0);
|
||
|
|
}
|
||
|
|
40% {
|
||
|
|
transform: translateX(-50%) translateY(-10px);
|
||
|
|
}
|
||
|
|
60% {
|
||
|
|
transform: translateX(-50%) translateY(-5px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
document.addEventListener('DOMContentLoaded', () => {
|
||
|
|
const scrollArrow = document.getElementById('scrollArrow');
|
||
|
|
if (scrollArrow) {
|
||
|
|
scrollArrow.addEventListener('click', () => {
|
||
|
|
const targetSelector = scrollArrow.getAttribute('data-target');
|
||
|
|
const targetElement = document.querySelector(targetSelector);
|
||
|
|
if (targetElement) {
|
||
|
|
targetElement.scrollIntoView({
|
||
|
|
behavior: 'smooth',
|
||
|
|
block: 'start'
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
});
|
||
|
|
</script>
|