Hareketli Kaydırma Çubuğu

[Leydihan]

Web Siteleri İçin Hareketli Scroll (Kaydırma) İkonu


[Only Registered Users Can See Links] Merhaba arkadaşlar,

Web projelerinizde, özellikle açılış sayfalarında (landing page) kullanıcıyı aşağı kaydırmaya yönlendirecek şık ve modern bir fare animasyonu paylaşmak istiyorum. Tamamen HTML ve CSS kullanılarak hazırlanan bu yapı, sitenize profesyonel bir hava katacaktır.

Uygulamanın Video Anlatımı:

[Only Registered Users Can See Links]
HTML Kod Yapısı:

<div class="box">
<div class="mouse"> </div>
</div>

<!-- Sağ alt kısımdaki butonlar -->
<div class="youtube">
<a class="watch" href="#" target="_blank"> <span>Seyret</span> </a>
<a class="me" href="[Only Registered Users Can See Links]" target="_blank"> <span>ABONE OL</span> </a>
</div>

CSS Tasarım Kodları:

* {
padding: 0;
margin: 0;
}

body {
background-color: #333333;
}

.box {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}

.mouse {
width: 100px;
height: 180px;
border: 4px solid #efefef;
border-radius: 60px;
position: relative;
}

.mouse::before {
content: '';
width: 25px;
height: 25px;
background: #efefef;
position: absolute;
top: 30px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
opacity: 1;
animation: anim 2s infinite;
}

@keyframes anim {
from {
opacity: 1;
top: 30px;
}
to {
opacity: 0;
top: 120px;
}
}Çalışmanın canlı önizlemesine ve orijinal kodlarına aşağıdaki bağlantıdan ulaşabilirsiniz:

Kod Kaynağı (CodePen) ([Only Registered Users Can See Links])

İyi çalışmalar, umarım işinize yarar.