Эффект перетасовки текста


В этом уроке сделаем плагин перетасовки текстового содержимого любого элемента DOM. Эффект довольно интересный и может быть использован в заголовках, логотипе, слайдшоу и т.д.

Разметка HTML

<div id="container">Это демонстрация текстового эффекта!</div>
<input type="text" id="userText" />

CSS

Стили в файле, скачаете исходник или посмотрите в демке:

<link rel="stylesheet" href="assets/css/styles.css" />

javascript

Подключаем jQuery, наш плагин и скрипт вызова плагина:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="assets/js/jquery.shuffleLetters.js"></script>
<script src="assets/js/script.js"></script>

Вот содержимое файла script.js

$(function(){
   
    // container is the DOM element;
    // userText is the textbox
   
    var container = $("#container")
        userText = $('#userText');
   
    // Shuffle the contents of container
    container.shuffleLetters();

    // Bind events
    userText.click(function () {
       
      userText.val("");
     
    }).bind('keypress',function(e){
       
        if(e.keyCode == 13){
           
            // The return key was pressed
           
            container.shuffleLetters({
                "text": userText.val()
            });
           
            userText.val("");
        }

    }).hide();

    // Leave a 4 second pause

    setTimeout(function(){
       
        // Shuffle the container with custom text
        container.shuffleLetters({
            "text": "Проверьте у себя на сайте!"
        });
       
        userText.val("обновите для повтора..").fadeIn();
       
    },4000);
   
});
СКАЧАТЬСкачек: 299
12,34 Kb
Кто скачал?

ДЕМОПосмотреть
пример