Text-mask background moving on MouseMove - v2

Developer
Robert Borghesi
Size
3,050 Kb
Views
109,296
  1. Text-mask background moving on MouseMove - v2 Previews
  2. Text-mask background moving on MouseMove - v2 HTML Codes
  3. Text-mask background moving on MouseMove - v2 CSS Codes
  4. Text-mask background moving on MouseMove - v2 JS Codes

How do I make an text-mask background moving on mousemove - v2?

Trying the new feature "background-clip: text", with background moving.. What is a text-mask background moving on mousemove - v2? How do you make a text-mask background moving on mousemove - v2? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Text-mask background moving on MouseMove - v2 Previews
IQ Test

Text-mask background moving on MouseMove - v2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text-mask background moving on MouseMove - v2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- If you don't see it u probably are using a browser not based on webkit, so leave IE and grab anything else (Y) -->
<!-- UPDATE: works in Chrome & Safari, not Firefox. To solve that you could use an SVG insted of pure text. -->
<div class="container"> <div class="title">ROBERT DEVELOPER</div> <div class="subtitle"> geek + smart + curious + nerd + ingenious + cunning = ME </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Text-mask background moving on MouseMove - v2 - Script Codes CSS Codes

@import url(http://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("http://phandroid.s3.amazonaws.com/wp-content/uploads/2014/05/rainbow-nebula.jpg") repeat; background-position: 40% 50%; -webkit-background-clip: text; position: relative; text-align: center; line-height: 90px; letter-spacing: -8px;
}
.subtitle { display: block; text-align: center; text-transform: uppercase; padding-top: 10px;
}

Text-mask background moving on MouseMove - v2 - Script Codes JS Codes

$(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 + "%"}); });
});
Text-mask background moving on MouseMove - v2 - Script Codes
Text-mask background moving on MouseMove - v2 - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4.5
Size 3,050 Kb
Views 109,296
Do you need developer help for Text-mask background moving on MouseMove - v2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Robert Borghesi (dghez) Script Codes
Name
Simple PureCss dropdown menu with following subnav
Opening with auto typing responsive sentences with random background color loop
Envato Remix Contest Challenge
Pulse Avatar on click with TweenMax
Anaglyph 3D with CSS-blend on mouseMove
Continuous register clean form with autoresize input
Opening animation from circular avatar
Pure Css Loader - Square
Continuous scrolling background of sticky header
Gradient border on hover - Scorer of fifa world cup
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!