NiceSnippets.com
Jquery Shuffle Letter Effect With HTML CSS
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="//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);
});
