Возможно вам будет сложно понять. Я не программист, я использую сервис, позволяющий создавать сайт практически без кода.
На самом легком примере скажу в чем проблема: когда я вставляю два таких кода (мне нужны две таких анимации текста на разных позициях сайта) и в одном делаю размер текста 15px, а в другом 40px - при просмотре в браузере размер текста не отличается. Хотя в коде прописано разное значение. То есть один текст (код анимации текста) берет свойства со второго.
Я оставлю код здесь, но возможно, чтобы лучше понять, вам понадобится практический пример: http://text-test-75fece.webflow.io/ (Этот сайт показывает, что свойства одинаковы (в этом случае - размер текста) в независимости от того, что размер текста в "коде страницы" имеет разное значение для каждого предложения.
Я просто не понимаю в чем причина. Мне нужна такая анимация и для заголовка, подзаголовка и других форм текста. Пожалуйста, помогите в решении этого вопроса
// jshint esnext: true
const ANIM_SELECTOR = 'p:nth-child(even)', // '.text'
ANIM_CHARSBYSTEP = 1, // одинаковых симв. за шаг (int, >=0)
ANIM_DELAYMS = 30; // задержка в мс(int, >=0)
var d = document,
de = d.documentElement,
textEls;
d.addEventListener('DOMContentLoaded', () => {
let init = new Promise(resolve => {
textEls = d.querySelectorAll(ANIM_SELECTOR);
for (let el of textEls) {
spanner(el);
el.classList.add('animated');
}
resolve();
});
init.then(() => {
window.addEventListener('scroll', onScroll);
window.addEventListener('load', onScroll);
});
});
function onScroll(e) {
let bcr;
for (let el of textEls) {
bcr = el.getBoundingClientRect();
// если элемент вне вьюпорта - сбрасываем и пропускаем его
if ((bcr.top > de.clientHeight) || (bcr.bottom < 0)) {
clearState(el);
continue;
}
// если анимация не выполняется, то запускаем
if (!el.dataset.anim) {
el.dataset.anim = true;
animateFrames(el);
}
}
}
function spanner(el) {
let chars = el.textContent.split(' '),
html = '';
chars.forEach(chr => html += `<span>${chr}</span> `);
el.innerHTML = html;
}
function clearState(el) {
if (!el.dataset.anim)
return;
el.dataset.anim = '';
let sp, cl;
for (sp of el.getElementsByTagName('span')) {
cl = sp.classList; // как ни странно, это быстрее
while (cl.length) // чем простое присвоение
cl.remove(cl[0]); // строкой: sp.className=''
}
}
function animateFrames(el, charsByStep = ANIM_CHARSBYSTEP, delayMs = ANIM_DELAYMS) {
let spans = sortedSpans(el),
start = 0,
chars, sp, len, more; // это выиграет ~10% производительности
requestAnimationFrame(anim);
function anim(time) {
if (time - start >= delayMs) {
chars = charsByStep;
do {
if (!(sp = spans.shift()) || !el.dataset.anim)
return;
sp.classList.add('show');
len = spans.length;
more = !!len && (spans[0].textContent < 'a');
if (!more && len && (sp.textContent !== spans[0].textContent))
chars--;
} while (more || (chars > 0));
start = time;
}
requestAnimationFrame(anim);
}
}
function sortedSpans(el) {
let spans = Array.from(el.getElementsByTagName('span'));
return spans.sort((s1, s2) => s1.textContent.localeCompare(s2.textContent));
}
body {
background: #000;
font: 300 18px 'Open sans', sans-serif;
color: #ddd;
}
.text {
text-align: left;
margin: 25px 0;
}
p {
max-width: 700px;
margin: 80px auto;
padding: 0 10px;
text-align: justify;
}
.animated span {
color: transparent;
transition: all 0s;
will-change: color;
/* пытаемся вынудить браузер задействовать GPU */
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
.animated span.show {
color: inherit;
}
body {
background: #000;
font: 300 30px 'Open sans', sans-serif;
color: #ddd;
}
.text {
text-align: left;
margin: 25px 0;
}
p {
max-width: 700px;
margin: 80px auto;
padding: 0 10px;
text-align: justify;
}
.animated span {
color: transparent;
transition: all 0s;
will-change: color;
/* пытаемся вынудить браузер задействовать GPU */
transform: translateZ(0);
backface-visibility: hidden;
perspective: 1000;
}
.animated span.show {
color: inherit;
transition: color 0.3s ease-in;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<p>Great results don’t just happen. We design and build your business for tomorrow.</p>
<p>Great results don’t just happen. We design and build your business for tomorrow.</p>
CSS расшифровывается как Cascading StyleSheet.
Это означает, что описанные правила накладываются друг на друга и дополняют/переписывают предыдущие правила.
Например:
body {
background: #000;
font: 300 18px 'Open sans', sans-serif;
color: #ddd;
}
body {
background: #000;
font: 300 30px 'Open sans', sans-serif;
color: #ddd;
}
В этом случае применится последнее описание и размер шрифта будет 30px
.
Чтобы были разные размеры, то нужно разделять элементы, к которым применяется конкретный стиль.
Например, можно использовать отдельные классы:
.paragraph { font-size: 18px; }
.heading { font-size: 30px; }
И назначить их соответствующим элементам:
// jshint esnext: true
const ANIM_SELECTOR = 'p', // '.text'
ANIM_CHARSBYSTEP = 1, // одинаковых симв. за шаг (int, >=0)
ANIM_DELAYMS = 30; // задержка в мс(int, >=0)
var d = document,
de = d.documentElement,
textEls;
d.addEventListener('DOMContentLoaded', () => {
let init = new Promise(resolve => {
textEls = d.querySelectorAll(ANIM_SELECTOR);
for (let el of textEls) {
spanner(el);
el.classList.add('animated');
}
resolve();
});
init.then(() => {
window.addEventListener('scroll', onScroll);
window.addEventListener('load', onScroll);
});
});
function onScroll(e) {
let bcr;
for (let el of textEls) {
bcr = el.getBoundingClientRect();
// если элемент вне вьюпорта - сбрасываем и пропускаем его
if ((bcr.top > de.clientHeight) || (bcr.bottom < 0)) {
clearState(el);
continue;
}
// если анимация не выполняется, то запускаем
if (!el.dataset.anim) {
el.dataset.anim = true;
animateFrames(el);
}
}
}
function spanner(el) {
let chars = el.textContent.split(' '),
html = '';
chars.forEach(chr => html += `<span>${chr}</span> `);
el.innerHTML = html;
}
function clearState(el) {
if (!el.dataset.anim)
return;
el.dataset.anim = '';
let sp, cl;
for (sp of el.getElementsByTagName('span')) {
cl = sp.classList; // как ни странно, это быстрее
while (cl.length) // чем простое присвоение
cl.remove(cl[0]); // строкой: sp.className=''
}
}
function animateFrames(el, charsByStep = ANIM_CHARSBYSTEP, delayMs = ANIM_DELAYMS) {
let spans = sortedSpans(el),
start = 0,
chars, sp, len, more; // это выиграет ~10% производительности
requestAnimationFrame(anim);
function anim(time) {
if (time - start >= delayMs) {
chars = charsByStep;
do {
if (!(sp = spans.shift()) || !el.dataset.anim)
return;
sp.classList.add('show');
len = spans.length;
more = !!len && (spans[0].textContent < 'a');
if (!more && len && (sp.textContent !== spans[0].textContent))
chars--;
} while (more || (chars > 0));
start = time;
}
requestAnimationFrame(anim);
}
}
function sortedSpans(el) {
let spans = Array.from(el.getElementsByTagName('span'));
return spans.sort((s1, s2) => s1.textContent.localeCompare(s2.textContent));
}
p {
max-width: 700px;
margin: 80px auto;
padding: 0 10px;
text-align: justify;
}
.paragraph {
font-size: 18px;
}
.heading {
font-size: 30px;
}
.animated span {
color: transparent;
}
.animated span.show {
color: inherit;
}
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<p class="paragraph">Great results don’t just happen. We design and build your business for tomorrow.</p>
<p class="heading">Great results don’t just happen. We design and build your business for tomorrow.</p>
Айфон мало держит заряд, разбираемся с проблемой вместе с AppLab
Перевод документов на английский язык: Важность и ключевые аспекты
Какие существуют виды рекламных бордов и как выбрать подходящий?
http://prntscrcom/j4nxlm How make this? I need multi sector in donut with rounded ends
Есть массив картинок, которые отбираю по имени классаНужно их ресайзить в зависимости от соотношения ширина/высота
Привет, есть сайт, на котором работает калькулятор расчета стоимости за м2, нужно убрать соотношения сторон, но я не могу понять, где в коде...