Typed.js — печатаем и стираем заданный текст

Версия: 1.1.4

Демо

Документация

Скачать

Краткое описание

Плагин Typed.js для jQuery позволяет эмулировать эффект печатной машинки.

Подключение

Для работы необходимо подключить jQuery.js и Typed.js

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

1 2	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/typed.js" type="text/javascript"></script>

Также, для эффекта мигающего курсора нужно добавить немного CSS-кода

<style>
    .typed-cursor{
        opacity: 1;
        font-weight: 100;
        -webkit-animation: blink 0.7s infinite;
        -moz-animation: blink 0.7s infinite;
        -ms-animation: blink 0.7s infinite;
        -o-animation: blink 0.7s infinite;
        animation: blink 0.7s infinite;
    }
    @-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-webkit-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-moz-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-ms-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
    @-o-keyframes blink{
        0% { opacity:1; }
        50% { opacity:0; }
        100% { opacity:1; }
    }
</style>

<style>

.typed-cursor{

opacity: 1;

font-weight: 100;

-webkit-animation: blink 0.7s infinite;

-moz-animation: blink 0.7s infinite;

-ms-animation: blink 0.7s infinite;

-o-animation: blink 0.7s infinite;

animation: blink 0.7s infinite;

}

@-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-webkit-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-moz-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-ms-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

@-o-keyframes blink{

0% { opacity:1; }

50% { opacity:0; }

100% { opacity:1; }

}

</style>

Использование

Для базового использования достаточно указать элемент со строка и элемент для вывода текста при инициализации Typed.js

<script>
    (function ($) {
        $(document).ready(function () {
            $(".typed").typed({
                stringsElement: $('.typed-strings'),
            });
        });
    })(jQuery);
</script>

<div class="typed-strings">
    <span>Typed.js is a <strong>jQuery</strong> plugin.</span>
    <p>It <em>types</em> out sentences.</p>
    <p>And then deletes them.</p>
    <p>Try it out!</p>
</div>
<span class="typed"></span>

(function ($) {

$(document).ready(function () {

$(".typed").typed({

stringsElement: $('.typed-strings'),

});

})(jQuery);

</script>

<span>Typed.js is a <strong>jQuery</strong> plugin.</span>

<p>It <em>types</em> out sentences.</p>

<p>And then deletes them.</p>

</div>

Расширенная настройка

$(".element").typed({
    // Список фраз для вывода
    strings: ["First sentence.", "Second sentence."],
    // Альтернативный вариант указания фраз для вывода, с помощью html-элемента (каждая строка должна быть обернута в <p>)
    stringsElement: null,
    // Скорость печати текста
    typeSpeed: 0,
    // Задержка перед началом печати текста
    startDelay: 0,
    // Скорость стирания текста
    backSpeed: 0,
    // Перемещать строки
    shuffle: false,
    // Задержка перед стиранием текста
    backDelay: 500,
    // Зациклить
    loop: false,
    // Количество повторений, false — бесконечно
    loopCount: false,
    // Показать курсор
    showCursor: true,
    // Символ курсора
    cursorChar: "|",
    // Атрибут элемента, в котором будет меняться текст (null — текст элемента)
    attr: null,
    // Формат: html или text
    contentType: 'html',
    // Функция будет вызвана, после завершения печати текста
    callback: function () {},
    // Функция будет вызвана перед началом печати каждой строки
    preStringTyped: function () {},
    // Функция будет вызвана для каждой напечатанной строки
    onStringTyped: function () {},
    // Функция будет вызвана при сбросе — $(".element").typed('reset')
    resetCallback: function () {}
});

//Пауза между печатью слов
$(".element").typed({
    // Пауза 1000 мс после печати слолва "First"
    strings: ["First ^1000 sentence.", "Second sentence."]
});

$(".element").typed({

// Список фраз для вывода

strings: ["First sentence.", "Second sentence."],

// Альтернативный вариант указания фраз для вывода, с помощью html-элемента (каждая строка должна быть обернута в <p>)

stringsElement: null,

// Скорость печати текста

typeSpeed: 0,

// Задержка перед началом печати текста

startDelay: 0,

// Скорость стирания текста

backSpeed: 0,

// Перемещать строки

shuffle: false,

// Задержка перед стиранием текста

backDelay: 500,

// Зациклить

loop: false,

// Количество повторений, false — бесконечно

loopCount: false,

// Показать курсор

showCursor: true,

// Символ курсора

cursorChar: "|",

// Атрибут элемента, в котором будет меняться текст (null — текст элемента)

attr: null,

// Формат: html или text

contentType: 'html',

// Функция будет вызвана, после завершения печати текста

callback: function () {},

// Функция будет вызвана перед началом печати каждой строки

preStringTyped: function () {},

// Функция будет вызвана для каждой напечатанной строки

onStringTyped: function () {},

// Функция будет вызвана при сбросе — $(".element").typed('reset')

resetCallback: function () {}

});

//Пауза между печатью слов

$(".element").typed({

// Пауза 1000 мс после печати слолва "First"

strings: ["First ^1000 sentence.", "Second sentence."]

});

15 thoughts on “Typed.js — печатаем и стираем заданный текст”

влад 26.11.2018 в 21:18

лучший тайпер

Ответить ↓
Данила 27.06.2019 в 00:18

Помогите!!! Не догоняю + на официальном сайте typed не написано, а только показано как сделано!!! Проблема вот в чем: Как они сделали что при нажатии на кнопку start скрипт активируется, а при dectroy отключается?

Ответить ↓
1. mrs4z 04.12.2019 в 10:29
  
  $(класс_кнопки).click(function() {
  // … тут соответственно вызываем typed js
  })
  
  Ответить ↓
rardfloke 24.09.2019 в 18:57

Hello. And Bye.

Ответить ↓
StevWigree 02.10.2019 в 05:40

Fluoxetine Visa Accepted Metabolism In Keflex Kidney Or Liver tadalafil cialis from india Levitra Conditionnement Buy Accutane In Usa Alli Orlistat Best Price

Ответить ↓
itaHaite 08.10.2019 в 16:10

Ciao a tutti vengo dall’italia

Ответить ↓
rardfloke 24.10.2019 в 05:19

hi 🙂 bross 🙂

Ответить ↓
rardfloke 11.11.2019 в 23:52

posso usare l’italiano or english

Ответить ↓
rardfloke 01.12.2019 в 02:11

i am from Italy hello. Can you help me translate? /rardor

Ответить ↓
itaHaite 07.12.2019 в 23:04

Ok. I use translate and will be good ok?

Ответить ↓
Mixinvok 27.12.2019 в 10:04

hi guys :). I am looking for help for me and my girl. i am from France

Ответить ↓
Lesenfoto 16.01.2020 в 06:31

Cialis 20mg Filmtabletten 4 Stuck Kaufen Progesterone Internet Usa Shipped Ups Buy Cialis Levitra In Women Cheap Tadifil

Ответить ↓
KelAllodo 16.01.2020 в 23:08

Alli Acheter Amoxil Dosage For Toothache Cialis Sans Ordonnance Belgique Cialis Free Shipping Stendra 50mg Erectile Dysfunction Nimotop Cialis In 24 Ore

Ответить ↓
Matsmoose 17.01.2020 в 14:13

Effect Of Tadalis Sx Soft Generic Finasteride Skin Zithromax Prescribing Information Cialis Propecia Dha Viagra El Mejor Contact Rayhhealthcare

Ответить ↓
Lesenfoto 17.01.2020 в 18:45

Generic Provera With Free Shipping Price Overseas Amex Accepted Lexington Cheap Cialis Buy Cialis Diprosone Sans Ordonnance Buy Cheap Tegretol Uk

Ответить ↓

Compnot

Блог о WordPress

Typed.js — печатаем и стираем заданный текст

Краткое описание

Подключение

Использование

Расширенная настройка

15 thoughts on “Typed.js — печатаем и стираем заданный текст”

Добавить комментарий Отменить ответ