Я учусь программировать и обращаюсь к вам с вопросом. Интересно, как строится пузырь, следующий за курсором на этой странице. Меня особенно интересует его "волнение/пульсация".
Я могу создать только простой градиент, который следует за курсором.
$(document).mousemove(function(event) {
windowWidth = $(window).width();
windowHeight = $(window).height();
mouseXpercentage = Math.round(event.pageX / windowWidth * 100);
mouseYpercentage = Math.round(event.pageY / windowHeight * 100);
$('.radial-gradient').css('background', 'radial-gradient(at ' + mouseXpercentage + '% ' + mouseYpercentage + '%, #3498db, #202020)');
});
body{
background-color: black;
}
.radial-gradient {
position:fixed;
top:0px;
left:0px;
height:100%;
width:100%;
background: #202020;
background:
radial-gradient(
at center, #3498db, #202020
);
}
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='radial-gradient'>
</div>
@tacoshy сейчас хорошо?
включите HTML, а затем переместите весь код в рабочий фрагмент (Ctrl + M
или кнопку <>
). Затем укажите, где вы на самом деле застряли. Обратите внимание, что запрос рекомендаций для библиотек, инструментов и т. д. не относится к теме SO.
Действительно классная идея учиться на реверс-инжиниринге вещей, которые вам нравятся!
Я не хочу сказать, что невозможно воссоздать этот эффект с помощью простого CSS и jQuery, но, исследуя html страницы, я могу сказать вам, что они используют three.js в элементе холста:
Хорошо, спасибо за помощь, я иду учиться. :)
Привет и добро пожаловать в SO. Пожалуйста, сначала пройдите тур , а затем прочитайте Как спросить . После этого отредактируйте свой вопрос, чтобы он соответствовал этим рекомендациям, и включите минимально воспроизводимый пример для деталей отладки. И последнее, но не менее важное: отметьте свой вопрос соответствующим образом. В вашем случае вы используете не vanilla JS, а jQuery.