lettering_jpg

Библиотека lettering.js Эффект появления и приближения текста.

В новой записи я вас научу делать эффект приближения и появления текста с использованием библиотеки lettering.js. Данная библиотека разбивает текст по частям, в зависимости от требований вы можете разбить текст по словам, буквам или частям.

Ссылка на библиотеку – https://daverupert.com/2010/09/lettering-js/

Ссылка на GitHub – https://github.com/davatron5000/Lettering.js/downloads

HTML

Здесь вам нужно прописать контейнер во внутрь которого разместить блоки с текстом, в моем случае это заголовки. Так же нужно подключить библиотеку jQuery и библиотеку lettering.js.

<div class="container">
       <div class="headings_block">
           <h2>Сегодня я вам покажу</h2>
           <h2>Как сделать</h2>
           <h2>Подобный эффект</h2>
       </div>
</div>
    
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    
    <script src="js/jquery.lettering.js"></script>

JavaScript

$(document).ready(function() {
    $(".headings_block > h2").lettering('words').children('span').lettering().children('span').lettering();
})

CSS

body {
    background-image: url('../KmdvsIh.jpg');
    color: #1e1e1e;
    overflow: hidden;
}
.headings_block h2 {
    font-family: monospace;
    font-size: 40px;
    width: 100%;
    overflow: hidden;
    text-transform: uppercase;
    padding: 0;
    margin: 0;
    position: absolute;
    letter-spacing: 14px;
    text-align: center;
    color: #1e1e1e;
}
.headings_block h2, .headings_block h2 > span {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.headings_block h2 > span {
    margin: 0 15px;
}
.headings_block h2 > span > span {
    display: inline-block;
    perspective: 1000px;
    transform-origin: 50% 50%;
}
.headings_block h2 > span > span > span {
    display: inline-block;
    color: hsla(0,0%,0%,0);
    transform-style: preserve-3d;
    transform: translate3d(0,0,0);
    animation: OpeningSequence 5.2s linear forwards;
}
.headings_block h2:nth-child(1) {
    top: 250px;
}
.headings_block h2:nth-child(2) {
    top: 300px;
}
.headings_block h2:nth-child(3) {
    top: 350px;
}
.headings_block h2:nth-child(2) > span > span > span {
    animation-delay: 3s;
}
.headings_block h2:nth-child(3) > span > span > span {
    animation-delay: 6s;
}
@keyframes OpeningSequence {
    0% {
        text-shadow: 0 0 50px #fafafa;
        letter-spacing: 80px;
        opacity: 0.2;
        transform: rotateY(-90deg);  
    }
    50% {
        text-shadow: 0 0 1px #fafafa;
        letter-spacing: 14px;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);
    }
    85% {
        text-shadow: 0 0 1px #fafafa;
        opacity: 0.8;
        transform: rotateY(0deg) translateZ(100px);   
    }
    100% {
        text-shadow: 0 0 0px #fafafa;
        opacity: 1;
        transform: translateZ(130px);
        pointer-events: none;
    }
}
На этом всё!
Если у вас есть вопросы, пишите их в нашей группе - https://vk.com/progtime
Вы так же можете разместить свой вопрос на нашем форуме, где другие программисты смогут вам помочь в решение вашей задачи - https://vk.com/prog_time
В ней мы делимся своим опытом с другими начинающими программистами, поэтому обязательно ответим на ваш вопрос.
Так же прокачивайте свои навыки на нашем канале - https://www.youtube.com/c/ProgTime

50
Оставить комментарий

avatar
50 Цепочка комментария
0 Ответы по цепочке
0 Последователи
 
Популярнейший комментарий
Цепочка актуального комментария
47 Авторы комментариев
RobertBreryRobertBreryRandycydayRandycydayRandycyday Авторы недавних комментариев
  Подписаться  
новее старее большинство голосов
Уведомление о
JanleF
Гость

Amoxicilina Medicine Website Shop Without Rx [url=https://apcialisle.com/#]Buy Cialis[/url] Ed Medicine Cialis Cheap Viagra For Sale Fast Shipping

JanleF
Гость

Cialis Und Ssri [url=http://cialibuy.com/#]buy viagra cialis online[/url] Amoxicillin Prescribed For cialis generic name Acheter Cialis Site Fiable

Genarodrisy
Гость
Genarodrisy

is there a generic for cialis https://canadianpharmacystorm.com viagra sale no prescription

Brianrix
Гость
Brianrix

order viagra ship canada http://tadmedz.com where can i buy viagra in las vegas

Mauriceprert
Гость
Mauriceprert

discount canadian pharmacy cialis order cialis buy levitra canada

Allenploft
Гость
Allenploft

buy cialis online australia buy generic viagra buy cialis from australia

JanleF
Гость

Viagra Generika Wirkung [url=https://cheapcialisir.com/#]where to buy cialis cheap[/url] Comprar Cialis En Miami Cialis Pflanzliches Viagra Horn Kapseln

Israelevago
Гость
Israelevago

cialis cheapest lowest price ed drugs online from canada buy cialis in europe

Thomasneomo
Гость
Thomasneomo

viagra sale las vegas https://www.sildwithdoctorprescription.com where to buy viagra in london

JanleF
Гость

Levitra Wann Wirkt [url=https://cheapcialisir.com/#]cheapest cialis online[/url] Buy Clomid Australian Dollars Cialis Where To Buy Cipro

Michealfrapy
Гость
Michealfrapy

viagra cheap overnight http://zithazi.com – cheap zithromax generic cialis cost

Michealfrapy
Гость
Michealfrapy

buy now viagra cialis http://tadal24ph.com – generic cialis genuine pfizer-viagra for sale

Michealfrapy
Гость
Michealfrapy

how to buy levitra http://hydroxychloroquine24.com – buy hydroxychloroquine online buy cialis jakarta

Michealfrapy
Гость
Michealfrapy

buy viagra durban http://zithazi.com – zithromax Azithromycin discount generic cialis india

Michealfrapy
Гость
Michealfrapy

where to buy generic cialis http://hydroxychloroquine24.com – buy plaquenil how to order cialis from canada

Michealfrapy
Гость
Michealfrapy

ordering cialis online legal http://tadal24ph.com – cialis generic cialis pills from india

Michealfrapy
Гость
Michealfrapy

buy viagra online new york http://aralenph.com – chloroquine viagra online order

Michealfrapy
Гость
Michealfrapy

buy viagra cialis canada http://kaletra24.com – Ritonavir cialis cheap online

Michealfrapy
Гость
Michealfrapy

order viagra safely http://aralenph.com – buy alaren cialis pill

Michealfrapy
Гость
Michealfrapy

cialis online order canada http://hydroxychloroquine24.com – plaquenil for sale viagra pfizer buy

Michealfrapy
Гость
Michealfrapy

buy cialis kl http://kaletra24.com – buy kaletra buy cialis au

Michealfrapy
Гость
Michealfrapy

viagra sale glasgow http://tadal24ph.com – cialis online cheapest canadian pharmacy cialis

Michealfrapy
Гость
Michealfrapy

buy cialis from india http://hydroxychloroquine24.com – plaquenil cialis coupon discounts

Harryjab
Гость
Harryjab

cheap viagra
buy discount generic cialis

Harryjab
Гость
Harryjab

buy viagra
canadian pharmacy cialis 20mg

Harryjab
Гость
Harryjab

viagra alternatives
cheap viagra tablets sale

Harryjab
Гость
Harryjab

viagra without a doctor prescription
can you buy cialis online

Harryjab
Гость
Harryjab

sildenafil
cialis online cheap canada

Harryjab
Гость
Harryjab

viagra
real viagra sale online

Harryjab
Гость
Harryjab
Harryjab
Гость
Harryjab

viagra without doctor prescription
cheap viagra generic pills

Harryjab
Гость
Harryjab

how long for viagra to take effect
cialis mail order pharmacy

Harryjab
Гость
Harryjab

buy sildenafil
order viagra in canada

Harryjab
Гость
Harryjab

buy sildenafil
buy viagra oral jelly

Harryjab
Гость
Harryjab

generic viagra
cheap viagra alternative

Harryjab
Гость
Harryjab

buy viagra
order cialis for daily use

MichealLogUe
Гость
MichealLogUe

does viagra or cialis help with pe cheap cialis

MichealLogUe
Гость
MichealLogUe

cialis or viagra buy here

EldenEvist
Гость
EldenEvist

https://sildenafilprof.com ed pills that work better than viagra

EldenEvist
Гость
EldenEvist
DavidNak
Гость
DavidNak

http://tadalafilprof.com real cialis without a doctor’s prescription

Rickycok
Гость
Rickycok

http://vgrmall.com/# cost of viagra per pill
side effects for viagra

Rickycok
Гость
Rickycok

http://vgrmall.com/# viagra pills
viagra cost

Philipglock
Гость
Philipglock

online pharmacy: http://onlinepharmacyero.com/# comfortis without vet prescription

Philipglock
Гость
Philipglock

online pharmacy: http://onlinepharmacyero.com/# amoxicillin without a doctor’s prescription

Randycyday
Гость
Randycyday

cheap cialis: http://bestpricemedz.com/# generic viagra

Randycyday
Гость
Randycyday

buy cialis: http://bestpricemedz.com/# cheap cialis

Randycyday
Гость
Randycyday

viagra without doctor prescription: http://bestpricemedz.com/# cialis

RobertBrery
Гость
RobertBrery

warnings for cialis: buy cialis

RobertBrery
Гость
RobertBrery

cialis daily: cialis vs viagra