Добрый день. Сейчас рассмотрим как сделать на своем сайте эффект водной ряби при движении курсором. Эффект довольно стар, но все еще актуален.
Итак, приступим.
Прежде чем двигаться дальше, сначала нам нужно добавить CDN-файл jquery и jquery.ripples в файл нашего проекта для создания эффекта:
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.ripples/0.5.3/jquery.ripples.min.js">
</script>
</head>
<body>
<script>
$(".background-image").ripples({
resolution: 512,
dropRadius: 20,
interactive: true,
perturbance: 0.02,
});
</script>
<div class="background-image">
<h1>Эффект водной ряби</h1>
</div>
</body>
</html>
Тут мы встроили наш основной код js в тег body, но его так же можно вынести и в отдельный файл.
- dropRadius - определяет размер (в пикселях) капли, возникающей при щелчке мыши или перемещении мыши по холсту.
- interactive - движения мышки и клики могут вызывать эффект
- perturbance - величина преломления. 0 означает что преломления нет.
В свой css файл добавляем код:
body{
margin: 0;
padding: 0;
}
h1{
text-align: center;
color: blueviolet;
padding-top: 300px;
}
.background-image{
width: 100%;
height: 100vh;
background-color: black;
background-size: cover;
}
На выходе получаем интересный эффект при движении мышкой и кликах.