jquery latter effect plugin with html and css. this is shuffle letter effect. when you type then click on try it button then you string display random latter then diplay original latter. this is best latter effect jquery plugin.

We allows to free snippets of jquery shuffle letters , you can download full code of shuffle text javascript layout. Here in this post i will give you example of shuffle letters into words snippet and you will get simple code of html, css and jquery. In shuffle letters to make a word snippet i give you three tab with html, css and js, you can easily get code of letter mixer layout.

<!doctype html> <html lang="en"> <head> <title>Shuffle Letter Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> </head> <body> <div id="title"> This is a Shuffle Letters Demo! </div> <div class="type-div"> <input type="text" id="userText"/> <button class="btn btn-sm try-it">Try it !</button> </div> </body> <script src="https://code.jquery.com/jquery-1.6.3.min.js"></script> <script type="text/javascript" src="http://nicesnippets.com/demo/jquery.shuffleLetters.js"></script> </html>
body{ font-family:'Open Sans Condensed',sans-serif; } #title{ color: #555; font-size: 58px; margin: 0 auto; padding: 200px 0 100px; width: 40%; position:relative; min-height: 90px; text-shadow:1px 1px 0 rgba(255,255,255,0.5); } #title:before{ content: ">"; font-size: 50px; left: -40px; opacity: 0.25; position: absolute; text-shadow: 1px 1px 0 white; top: 210px; } #userText{ background:none; border:none; border-bottom:1px solid #aaa; color: #777777; display: none; font-size: 26px; margin: 0 auto 0px; padding: 10px; text-align: center; width: 300px; outline: none; } .type-div{ width: 30%; margin: 0 auto; } .try-it{ display: none; padding: 10px; background-color: #34bfa3; color: #fff; border:none; margin-left: 15px; border-radius: 3px; }
$(function(){ // container is the DOM element; // userText is the textbox var container = $("#title") userText = $('#userText'); // Shuffle the contents of container container.shuffleLetters(); // Bind events userText.click(function () { userText.val(""); }); $('.try-it').click(function(e) { container.shuffleLetters({ "text": userText.val() }); }); // Leave a 4 second pause setTimeout(function(){ // Shuffle the container with custom text container.shuffleLetters({ "text": "Test it for yourself!" }); userText.val("type anything").fadeIn(); $('.try-it').css('display','inline-block'); },4000); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:

Random Post