Text reveal test
How do I make an text reveal test?
A little test to reveal some text. What is a text reveal test? How do you make a text reveal test? This script and codes were developed by Sladix on 09 December 2022, Friday.
Text reveal test - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Text reveal test</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <h1>Text reveal test</h1> <p class="reveal">Let's reveal your darkest secrets. Don't be afraid to join the dark side of the force. I am not inspired at all while writing this and wanted to use human content rather than lorem ipsum. Forgive this test as it's quite useless.</p> <button onclick="reveal()">Reveal</button> <button onclick="hide()">Hide</button>
</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 reveal test - Script Codes CSS Codes
.container{ width:400px; margin: 0 auto; font-family:'Open Sans',sans-serif;
}
.reveal{ display:none;
}
.r-hidden{ display:inline-block; margin-right:4px; position:relative; margin-bottom:5px; transition:all 0.15s linear;
}
.noselect { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;
}
.r-hidden:after{ position:absolute; content:''; right:0; top:0; height:100%; width:100%; background:black; transition:all 0.5s ease;
}
.r-hidden.show:after{ height:0%;
}
Text reveal test - Script Codes JS Codes
(function($){ var words = []; $('.reveal').each(function(j){ $(this).data("rid",j); var str = $(this).text(); tab = str.split(" "); var els = []; words[j] = []; for (var i = 0; i < tab.length; i++) { words[j].push(tab[i]+" "); els.push($('<span/>').addClass("r-hidden noselect").text(tab[i])); } $(this).empty().append(els).fadeIn(); }); function reveal(){ $('.reveal').each(function(){ var id = $(this).data('rid'); $(this).find('.r-hidden').each(function(j){ var self = $(this); setTimeout(function(){ self.text(words[id][j]); self.addClass('show'); self.removeClass('noselect'); },j*150) }); }) } window['reveal'] = reveal; function hide(){ $('.reveal').each(function(){ var id = $(this).data('rid'); $(this).find('.r-hidden').each(function(j){ var self = $(this); setTimeout(function(){ self.removeClass('show'); self.addClass('noselect'); },j*150) }); }) } window['hide'] = hide;
})(jQuery)
Developer | Sladix |
Username | Sladix |
Uploaded | December 09, 2022 |
Rating | 3 |
Size | 2,423 Kb |
Views | 12,144 |
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!
Name | Size |
Agent Chaos | 4,709 Kb |
Canvas snake animation random bezier curve looped | 2,882 Kb |
Fibonacci color test | 2,310 Kb |
Responsive Stack slider | 3,527 Kb |
CSS Letter animations | 2,116 Kb |
A Pen by Sladix | 3,349 Kb |
HMD | 8,249 Kb |
Visualizer tests | 3,361 Kb |
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!
Name | Username | Size |
Freecodecamp - Tribute Page | Samoht513 | 3,583 Kb |
Sassy Buttons | Elyseholladay | 2,299 Kb |
Cartoon Bomb | Tcmulder | 4,929 Kb |
CSS Grid Test | Ajaykarwal | 2,377 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
CSS3 Form | Tusharbandal | 1,836 Kb |
Default Input, Textareas, Submits, and Buttons in iOS | Demersdesigns | 2,334 Kb |
Twitch.tv API | Ryzokuken | 2,618 Kb |
Mobile first social buttons with no iframe | Alistairtweedie | 3,158 Kb |
Simple Login Form | JoshBlackwood | 4,418 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!