Selamlar arkadaşlar,

Bugün sizlerle web projelerinize görsel derinlik katacak, etkileşimli bir "Sihirli Daire" çalışmasını paylaşacağım. Bu proje, fare imlecinizi takip eden bir mercek efekti oluşturarak arka plandaki görseli belirginleştiriyor.

Özellikle portfolyo sitelerinde veya dikkat çekmek istediğiniz özel bölümlerde bu yapıyı rahatlıkla kullanabilirsiniz.

HTML Yapısı
İlk olarak sayfamızın iskeletini oluşturuyoruz. Burada bir başlık ve sihirli dairenin içine yerleşeceği ana kapsayıcı bulunuyor.

Kod:

<div class="scene">

Kod:

  <h1>Sihirli Daire</h1>
  <p> Türk Bayrağı nerede? </p>
  <div class="magic"></div>
</div>

<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ı
Görselliği ön plana çıkaran kısım burası. Arka planı koyu tutup, dairenin içindeki görseli fixed pozisyonuyla sabitleyerek o "maskeleme" hissini veriyoruz.

Kod:

* {

Kod:

    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Righteous', cursive;
}

body {
    background-color: #222222;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    user-select: none;
}

.scene h1 {
    position: relative;
    font-size: 3em;
    text-transform: uppercase;
    color: #fff;
    z-index: 1;
    padding: 5px 10px;
    box-shadow: 0 0 0 10px #f00;
    text-shadow: 0 3px 0 #000;
}

.scene p {
    color: #fff;
    margin-top: 15px;
    text-align: center;
    text-shadow: 0 2px 2px #000;
}

.scene .magic {
    z-index: -1;
    position: absolute;
    top: 0;
    left: 0;
    top: calc(30% - 10rem);
    left: calc(50% - 10rem);
    width: 15rem;
    height: 15rem;
    background: url('https://image.ibb.co/cpPcbz/istanbul.jpg') 50% 50% no-repeat fixed;
    background-size: cover;
    border-radius: 50%;
}

JavaScript (jQuery) Kodları
Dairenin fareyi takip etmesini sağlayan ufak bir jQuery dokunuşu yeterli olacaktır. Fare koordinatlarını alıp dairenin merkezine eşitliyoruz.

Kod:

$(document).ready(function() {

Kod:

    var $magic = $('.magic'),
        magicWHalf = $magic.width() / 2;

    $(document).on('mousemove', function(e) {
        $magic.css({
            'left': e.pageX - magicWHalf,
            'top' : e.pageY - magicWHalf
        })
    })
})

Umarım projelerinizde işinize yarar. İyi forumlar!

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