Çözüldü Rolls-Royce Sitesindeki Mouse İşareti Nasıl Yapılır?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.
emiirhans

emiirhans

Hectopat
Katılım
3 Mart 2019
Mesajlar
1.733
Makaleler
2
Çözümler
2
İnternette bir kaç konu okudum fakat burada biraz daha farklı, imleç linklerin üstüne geldiğinde büyüyor falan çok güzel göstermiş bence siteyi. Nasıl yapabilirim bunu?

www.rolls-roycemotorcars.com

Rolls-Royce Motor Cars: Inspiring Greatness

Inspiring Greatness – Rolls-Royce Motor Cars is an everlasting expression of the exceptional. From the world’s pinnacle motor car Phantom to the bold attitude of Black Badge and beyond. Explore the world of Rolls-Royce.
www.rolls-roycemotorcars.com www.rolls-roycemotorcars.com
 
Son düzenleyen: Moderatör:
Çözüm
Ecmel
[CODE lang="html" title="HTML"]<!--En alt kısma koyup CSS üzerinden hover efektlerini ayarlamayı sağlayabilirsin ama sorun çıkartacağı projeler olabilir-->
<div class="cursor"></div>
[/CODE]

[CODE lang="css" title="CSS"]* {
padding: 0;
margin: 0;
box-sizing: border-box;
cursor: none !important;
}


/*Ayarlamaları kendine göre yapabilirsin*/
.cursor {
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
pointer-events: none;
z-index: 9999; /* Tüm elementlerin üstünde olması için değeri yüksek tut*/
}[/CODE]

[CODE lang="javascript" title="JS"] <script>
const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})

document.addEventListener('click', () => {
cursor.classList.add("expand");

setTimeout(() => {
cursor.classList.remove("expand");
}, 500)
})
</script>[/CODE]

Daha önceden arşivimde olan bir custom cursor örneği. Kodda değişiklik yapabilirsin, düzgün şekilde çalışması gerekli. CSS kısmında doğru ayarlamaları yaparsan aynısını yaparsın.

İyi çalışmalar, bu arada bu tür konularda yardıma ihtiyacın olduğunda bu yapılan şeylerin özelleştirme olduğunu unutma. Yani internette "custom bla bla" şeklinde arayabilirsin. Genellikle istediğin şeye ulaşırsın, ulaşamazsan konu açabilirsin. :)

Not: Benim yaptığım örnekte link üstüne geldiği zaman bir değişim olmuyor. Onları yine kendin ayarlayabilirsin. :)
Tarihe göre sırala Puana göre sırala
[CODE lang="html" title="HTML"]<!--En alt kısma koyup CSS üzerinden hover efektlerini ayarlamayı sağlayabilirsin ama sorun çıkartacağı projeler olabilir-->
<div class="cursor"></div>
[/CODE]

[CODE lang="css" title="CSS"]* {
padding: 0;
margin: 0;
box-sizing: border-box;
cursor: none !important;
}


/*Ayarlamaları kendine göre yapabilirsin*/
.cursor {
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
pointer-events: none;
z-index: 9999; /* Tüm elementlerin üstünde olması için değeri yüksek tut*/
}[/CODE]

[CODE lang="javascript" title="JS"] <script>
const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})

document.addEventListener('click', () => {
cursor.classList.add("expand");

setTimeout(() => {
cursor.classList.remove("expand");
}, 500)
})
</script>[/CODE]

Daha önceden arşivimde olan bir custom cursor örneği. Kodda değişiklik yapabilirsin, düzgün şekilde çalışması gerekli. CSS kısmında doğru ayarlamaları yaparsan aynısını yaparsın.

İyi çalışmalar, bu arada bu tür konularda yardıma ihtiyacın olduğunda bu yapılan şeylerin özelleştirme olduğunu unutma. Yani internette "custom bla bla" şeklinde arayabilirsin. Genellikle istediğin şeye ulaşırsın, ulaşamazsan konu açabilirsin. :)

Not: Benim yaptığım örnekte link üstüne geldiği zaman bir değişim olmuyor. Onları yine kendin ayarlayabilirsin. :)
 
Son düzenleme:
Artı 0 Eksi
Çözüm
Ecmel dedi:
[CODE lang="html" title="HTML"]<!--<body> tagının hemen altına koyulacak-->
<div class="cursor"></div>
[/CODE]

[CODE lang="css" title="CSS"]* {
padding: 0;
margin: 0;
box-sizing: border-box;
cursor: none !important;
}


/*Ayarlamaları kendine göre yapabilirsin*/
.cursor {
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
pointer-events: none;
z-index: 9999; /* Tüm elementlerin üstünde olması için değeri yüksek tut*/
}[/CODE]

[CODE lang="javascript" title="JS"] <script>
const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})

document.addEventListener('click', () => {
cursor.classList.add("expand");

setTimeout(() => {
cursor.classList.remove("expand");
}, 500)
})
</script>[/CODE]

Daha önceden arşivimde olan bir custom cursor örneği. Kodda değişiklik yapabilirsin, düzgün şekilde çalışması gerekli. CSS kısmında doğru ayarlamaları yaparsan aynısını yaparsın.

İyi çalışmalar, bu arada bu tür konularda yardıma ihtiyacın olduğunda bu yapılan şeylerin özelleştirme olduğunu unutma. Yani internette "custom bla bla" şeklinde arayabilirsin. Genellikle istediğin şeye ulaşırsın, ulaşamazsan konu açabilirsin. :)

Not: Benim yaptığım örnekte link üstüne geldiği zaman bir değişim olmuyor. Onları yine kendin ayarlayabilirsin. :)
Genişletmek için tıkla...
Bence bilgisayara yapmak istiyor ama :).
 
Artı 0 Eksi
Ecmel dedi:
[CODE lang="html" title="HTML"]<!--En alt kısma koyup CSS üzerinden hover efektlerini ayarlamayı sağlayabilirsin ama sorun çıkartacağı projeler olabilir-->
<div class="cursor"></div>
[/CODE]

[CODE lang="css" title="CSS"]* {
padding: 0;
margin: 0;
box-sizing: border-box;
cursor: none !important;
}


/*Ayarlamaları kendine göre yapabilirsin*/
.cursor {
width: 10px;
height: 10px;
border: 1px solid white;
border-radius: 50%;
position: absolute;
transition-duration: 200ms;
transition-timing-function: ease-out;
animation: cursorAnim .5s infinite alternate;
pointer-events: none;
z-index: 9999; /* Tüm elementlerin üstünde olması için değeri yüksek tut*/
}[/CODE]

[CODE lang="javascript" title="JS"] <script>
const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px;")
})

document.addEventListener('click', () => {
cursor.classList.add("expand");

setTimeout(() => {
cursor.classList.remove("expand");
}, 500)
})
</script>[/CODE]

Daha önceden arşivimde olan bir custom cursor örneği. Kodda değişiklik yapabilirsin, düzgün şekilde çalışması gerekli. CSS kısmında doğru ayarlamaları yaparsan aynısını yaparsın.

İyi çalışmalar, bu arada bu tür konularda yardıma ihtiyacın olduğunda bu yapılan şeylerin özelleştirme olduğunu unutma. Yani internette "custom bla bla" şeklinde arayabilirsin. Genellikle istediğin şeye ulaşırsın, ulaşamazsan konu açabilirsin. :)

Not: Benim yaptığım örnekte link üstüne geldiği zaman bir değişim olmuyor. Onları yine kendin ayarlayabilirsin. :)
Genişletmek için tıkla...
Çok sağolun sabah bilgisayara geçince deneyeceğim :).
 
Artı 0 Eksi

Benzer konular

509401
  • Soru
shipy.net sitesindeki yazı animasyonu nasıl yapılır?
Mesaj
2
Görüntüleme
469
Yeniçocuk
Yeniçocuk
Zose
  • Soru
Web sitesindeki birden çok resmi küçük resme göre hizalama nasıl yapılır?
Mesaj
1
Görüntüleme
428
Mucosoft
Mucosoft
umutakyuz
Web sitesindeki istenmeyen şekiller nasıl kaldırılır?
Mesaj
3
Görüntüleme
160
umutakyuz
umutakyuz
Darknetxx
Web sitesindeki kenar boşlukları fazla
Mesaj
7
Görüntüleme
263
cuttty
cuttty
Antares
W3schools sitesindeki slider otomatik geçişini ayarlama
Mesaj
0
Görüntüleme
312
Antares
Antares

Yeni konular

Yeni mesajlar

Geri
Yukarı