Sihirli Daire Yapımı

[Leydihan]

[Only Registered Users Can See Links] 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.

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

<div class="youtube">
<a class="watch" href="[Only Registered Users Can See Links]" 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ı
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.

* {
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('[Only Registered Users Can See Links]') 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.

$(document).ready(function() {

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!

Kaynak ([Only Registered Users Can See Links])

[OmerAti]

paylasim super basitce herkezin anlaya bilecegi sekil kisa ve öz olarak anlatmissin emegine saglik