Первый код забирает свойства со второго (размер текста)

175
14 апреля 2018, 20:09

Возможно вам будет сложно понять. Я не программист, я использую сервис, позволяющий создавать сайт практически без кода.

На самом легком примере скажу в чем проблема: когда я вставляю два таких кода (мне нужны две таких анимации текста на разных позициях сайта) и в одном делаю размер текста 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>

Answer 1

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>

READ ALSO
Chart.js multicenter in donut with rounded ends. How make this? [требует правки]

Chart.js multicenter in donut with rounded ends. How make this? [требует правки]

http://prntscrcom/j4nxlm How make this? I need multi sector in donut with rounded ends

130
Массив картинок и обработка после их загрузки

Массив картинок и обработка после их загрузки

Есть массив картинок, которые отбираю по имени классаНужно их ресайзить в зависимости от соотношения ширина/высота

126
как убрать соотношения сторон?

как убрать соотношения сторон?

Привет, есть сайт, на котором работает калькулятор расчета стоимости за м2, нужно убрать соотношения сторон, но я не могу понять, где в коде...

166
Проблема с пост-запросом/ Angular5

Проблема с пост-запросом/ Angular5

Есть сервис с пост-запросом:

125