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

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ı:

[Foruma üye olmadığınız sürece forum içeriğindeki bağlantıları görüntüleyemezsiniz. Foruma üye olmak için TIKLAYIN!]

HTML Kod Yapısı:

Kod:

<div class="box">

Kod:

     <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="https://www.youtube.com/channel/UC-66vmW776afaHILFSHnVMA?sub_confirmation=1" target="_blank"> <span>ABONE OL</span> </a>
 </div>

CSS Tasarım Kodları:

Kod:

* {

Kod:

      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:

[Foruma üye olmadığınız sürece forum içeriğindeki bağlantıları görüntüleyemezsiniz. Foruma üye olmak için TIKLAYIN!]

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