How we can create a moving text background using HTML CSS? Solution: See this CSS Moving Text Mask With JavaScript, Text Mask Background.
Previously I have shared many types of text related programs, but this is about text masks. Basically, masking means to mask a specific area and cut out the area and modify the visuality. And this program is about cutting text shape and showing a moving background image, the image will move according to the mouse movement.
Today you will learn to create Text Mask Background cutout. Basically, there is a text which is this web site’s name and a background image with text size cutout shape. When you will move the mouse pointer then the background image will also move opposite of mouse direction. And the program will be good practice for you of HTML CSS JS.
So, Today I am sharing CSS Moving Text Mask With JavaScript. There I have used jQuery for easy working and save times, and as we know jQuery is a JavaScript library that’s why I am putting this in the JS category. I think this program will useful for you, and you can use this on your website to add a little bit of style.
If you are thinking now how this moving mask actually is, then see the preview given below.
Preview Of Masking Background Movement
See this video preview to getting an idea of how this text mask looks like.
Now you can see this visually, you also can see this it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
CSS Moving Text Mask With JavaScript Source Code
Before sharing source code, let’s talk about it. First, I have just put a text using HTML div inside a main div. And in the HTML file, I have linked all external files like CSS, JS and jQuery‘s CDN link. This is a very short program that’s why HTML has fewer codes and all the styles and functions are handling by CSS & jQuery.
Now using CSS I have placed the text in the center, as you can see in the preview. There I have placed a background image for the text and set CSS values to background-clip: text; (info). And there also I have used some basic CSS stuff like letter spacing, transform, etc. And for the responsive design, I have reduced the font size for the small screen using @media query.
JQuery handling here the mouse movement function. There I have used JS $(document).mousemove command for declaring the mouse move actions. Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating this program you have to create 3 files for that. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Moving Text Mask | Webdevtrick.com</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="title">WEBDEVTRICK .COM</div> </div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ @import url(https://fonts.googleapis.com/css?family=Raleway:400,,800,900); html { width: 100%; height: 100%; } body { background: -webkit-linear-gradient(#ebece7, white); background: linear-gradient(#ebece7, white); margin: 0; width: 100%; height: 100%; font-family: 'Raleway', sans-serif; } .container { position: absolute; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; top: 50%; } .title { font-weight: 800; color: transparent; font-size: 120px; background: url("https://images.pexels.com/photos/1252890/pexels-photo-1252890.jpeg") repeat; background-position: 40% 50%; -webkit-background-clip: text; position: relative; text-align: center; line-height: 90px; letter-spacing: -8px; } @media (max-width: 765px) { .title { font-size: 40px; letter-spacing: -2px; line-height: 50px; } } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(document).ready(function(){ var mouseX, mouseY; var ww = $( window ).width(); var wh = $( window ).height(); var traX, traY; $(document).mousemove(function(e){ mouseX = e.pageX; mouseY = e.pageY; traX = ((4 * mouseX) / 570) + 40; traY = ((4 * mouseY) / 570) + 50; console.log(traX); $(".title").css({"background-position": traX + "%" + traY + "%"}); }); }); |
That’s It. Now you have successfully created CSS Moving Text Mask With JavaScript, Text Mask Background. If you have any doubt or question comment down below.
Thanks For Visiting, Keep Visiting.
