/ Сайтостроение / Дизайн / Эффекты с текстом

Эффекты с текстом

29.03.2018

309


Deprecated: Function create_function() is deprecated in /home/htvtwmhs/public_html/wp-content/plugins/wp-spamshield/wp-spamshield.php on line 2033

В данном посте приведены различные эффекты с текстом.

Мигающий текст

<span class="blink_me">Мигающий текст</span>

скрипт

function blinker() {
    $('.blink_me').fadeOut(500);
    $('.blink_me').fadeIn(500);
}

setInterval(blinker, 1000);

Повторяющийся эффект animate

Делаем любой эффект animate повторяющимся на объекте (тексте)

jQuery(document).ready(function(){
	
setTimeout(function run() {

    jQuery('.page-id-18 #header-contact .phone').addClass('animated tada');
  
  setTimeout(function () { 
  
    jQuery('.page-id-18 #header-contact .phone').removeClass('animated tada'); 
  
  }, 1000);

  setTimeout(run, 4000); // Интервал повторения
  
}, 2000); // Первый интервал срабатывания

});

Буквица на чистейшем CSS

Если предположить что основной текст заключен в тэг с id #post-content, то буквицу у первого абзаца можно сделать с помощью двух псевдоэлементов:

#post-content p:first-child:first-letter {
    color: #0990dd;
    font-size: 6rem;
    float: left;
    font-weight: 600;
    margin: -40px 15px -45px 0;
}

Не тестировал, правда, в разных браузерах..

Градиент на тексте

.coming-soon {
    font-size: 10rem;
    color: #a421c1;
    background: linear-gradient(45deg, #8216b1 33%, #c25181 66%, #cd1483);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Coming soon!

Также можно сделать вместо градиента изображение:

.coming-soon-img {
    font-size: 10rem;
    color: #a421c1;
    background-image: url('/wp-content/uploads/2017/06/fire-smoke.jpg');
    background-size: cover;
    background-position: bottom;
    font-weight: 600;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

Coming soon!

Сияющий текст

.text-shine {
    color: #ff7700;
    font-weight: 600;
    display: inline-block;
    font-size: 2rem;
    -webkit-mask-image: linear-gradient(-75deg, rgba(245,166,97,.6) 30%, #f5a661 50%, rgba(245,166,97,.6) 70%) !important;
    -webkit-mask-size: 200%;
    animation: shine 2s linear infinite;
}

@keyframes shine {
  from { -webkit-mask-position: 150%; }
  to { -webkit-mask-position: -50%; }
}

TEXT SHINE

Поделится информацией с друзьями

  • Комментарии
  • Вложения

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

Пока нет комментариев. Будь первым!

Эффекты с текстом Эффекты с текстом
Изменение объекта при скроллинге
Рекомендации для васИзменение объекта при скроллингеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.