Water wave Background with Jquery ( Source Code ) First download the plugin Add these files first <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="jquery.ripples-min.js"></script> HTML <div class="banner"> <h2> Beautiful Nature</h2> </div> css * { margin: 0; padding: 0; } .banner { background-image: url(1.jpeg); -webkit-background-size: cover; background-size: cover; background-position: center center; height: 100vh; } h2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 5em; text-shadow: 0 0 50px rgba(0, 0, 0, 0.5); font-family: poppins; } Initiate the plugin $('.banner').ripples({ dropRadius: 10, perturbance: 0.03 });
No comments