Masked.js

Developer
Andy Lorimer
Size
3,037 Kb
Views
28,336
  1. Masked.js Previews
  2. Masked.js HTML Codes
  3. Masked.js CSS Codes
  4. Masked.js JS Codes

How do I make an masked.js?

What is a masked.js? How do you make a masked.js? This script and codes were developed by Andy Lorimer on 22 July 2022, Friday.

Masked.js Previews
IQ Test

Masked.js - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Masked.js</title> <script src="https://use.typekit.net/pbb5mck.js"></script> <script>try{Typekit.load({ async: true });}catch(e){}</script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="page-wrapper"> <div class="centered-content"> <span class="mask" data-mask-transition="fromBottom"><h1>m</h1></span> <span class="mask" data-mask-transition="fromBottom"><h1>a</h1></span> <span class="mask" data-mask-transition="fromBottom"><h1>s</h1></span> <span class="mask" data-mask-transition="fromBottom"><h1>k</h1></span> <span class="mask" data-mask-transition="fromBottom"><h1>e</h1></span> <span class="mask" data-mask-transition="fromBottom"><h1>d</h1></span> <span class="mask" data-mask-transition="fromRight"><h3>.js</h3></span> <div class="outer-p"> <div class="mask" data-mask-transition="fromLeft"> <p class="intro">A free and simple set of transitions using a mask effect.</p> <p class="intro">Just add any of the following transition types to the mask element and watch the magic happen, <a class="demo-link" href="#">fromTop</a>, <a class="demo-link" href="#">fromRight</a>, <a class="demo-link" href="#">fromBottom</a>, <a class="demo-link" href="#">fromLeft</a></p> </div> </div> </div> <div class="buttons"> <div class="mask" data-mask-transition="fromRight"><a href="https://raw.github.com/andylorimer/masked.js/master/src/masked.min.js" download="masked.min.js" class="main-btn"><span>Download</span></a></div> <div class="mask" data-mask-transition="fromLeft"><a class="main-btn" href="https://github.com/andylorimer/masked.js"><span>View on Github</span></a></div> </div> </div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/269193/masked.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Masked.js - Script Codes CSS Codes

body { margin: 0; font-family: "bebas-neue",sans-serif; font-size: 14px; /*overflow-y: hidden;*/
}
#page-wrapper { position: absolute; width: 100%; height: 100%; top: 0; left: 0;
}
.centered-content { position: relative; width: 50%; height: auto; padding: 20px 0; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0 auto; text-align: center;
}
h1 { color: #34CAFF; font-size: 110px; text-transform: uppercase; font-weight: normal; margin: 0; line-height: 100px;
}
h3 { color: #34CAFF; font-size: 50px; text-transform: uppercase; font-weight: normal; margin: 0; line-height: 60px;
}
.outer-p { position: relative; width: 100%; height: auto; display: none;
}
.intro { font-size: 18px;
}
.buttons { position: absolute; width: 100%; height: 120px; left: 0; bottom: 0; display: flex;
}
.main-btn { position: relative; display: inline-block; width: 100%; height: 120px; background: #2ecc71; color: #fff; font-size: 22px; text-decoration: none; overflow: hidden; flex-grow: 1; text-align: center; line-height: 120px;
}
.main-btn span { position: relative; z-index: 1;
}
.main-btn:after { content: ''; position: absolute; width: 100%; height: 100%; bottom: -100%; left: 0; background: #27ae60; -webkit-transition: .3s ease; -moz-transition: .3s ease; -o-transition: .3s ease; transition: .3s ease;
}
.main-btn:hover:after { bottom: 0;
}
.demo-link, .demo-link:active, .demo-link:visited { display: inline-block; padding: 5px 5px; background: #ebebff; text-decoration: none; color: #000;
}
.demo-link:hover { background: #d9d9f9;
}

Masked.js - Script Codes JS Codes

$(document).ready(function() { $(document).on('click', '.demo-link', function(e) { function maskOut() { $('.title').css({ '-webkit-transform':'translate(150%, 150%)', '-moz-transform':'translate(150%, 150%)', '-o-transform':'translate(150%, 150%)', '-ms-transform':'translate(150%, 150%)', 'transform':'translate(150%, 150%)', '-webkit-transition': 'none', '-moz-transition': 'none', '-o-transition': 'none', 'transition': 'none' }); } maskOut(); var getDir = $(this).text(); $('.title').parent().attr('data-mask-transition',getDir); var maskTransit = $('.title').parent().attr('data-mask-transition'); switch(maskTransit) { case 'fromLeft': $('.title').css({ '-webkit-transform': 'translate(-150%, 0)', '-moz-transform': 'translate(-150%, 0)', '-o-transform': 'translate(-150%, 0)', '-ms-transform': 'translate(-150%, 0)', 'transform': 'translate(-150%, 0)' }); break; case 'fromRight': $('.title').css({ '-webkit-transform': 'translate(150%, 0)', '-moz-transform': 'translate(150%, 0)', '-o-transform': 'translate(150%, 0)', '-ms-transform': 'translate(150%, 0)', 'transform': 'translate(150%, 0)' }); break; case 'fromTop': $('.title').css({ '-webkit-transform': 'translate(0, -150%)', '-moz-transform': 'translate(0, -150%)', '-o-transform': 'translate(0, -150%)', '-ms-transform': 'translate(0, -150%)', 'transform': 'translate(0, -150%)' }); break; case 'fromBottom': $('.title').css({ '-webkit-transform': 'translate(0, 150%)', '-moz-transform': 'translate(0, 150%)', '-o-transform': 'translate(0, 150%)', '-ms-transform': 'translate(0, 150%)', 'transform': 'translate(0, 150%)' }); } setTimeout(function() { $('.title').css({ '-webkit-transition': '.5s ease', '-moz-transition': '.5s ease', '-o-transition': '.5s ease', 'transition': '.5s ease', '-webkit-transform': 'translate(0,0)', '-moz-transform': 'translate(0,0)', '-o-transform': 'translate(0,0)', '-ms-transform': 'translate(0,0)', 'transform': 'translate(0,0)' }); }, 1000); }); });
Masked.js - Script Codes
Masked.js - Script Codes
Home Page Home
Developer Andy Lorimer
Username andylorimer
Uploaded July 22, 2022
Rating 3
Size 3,037 Kb
Views 28,336
Do you need developer help for Masked.js?

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!

Andy Lorimer (andylorimer) Script Codes
Name
Scroll down button
A Pen by Andy Lorimer
Interactive Button Editor
Random Spinning loader
Messing about with CSS3 animations
Dropzone Uploader
Vertically aligning content
Input field - jQuery test
Searchbar with Navigation
Password Input
Create amazing captions 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!