Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 13.10.2019, 13:44
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Как оптимизировать скрипт анимации текста
Добрый день. Как можно оптимизировать скрипт
https://codepen.io/zava75/pen/LYPmbxL
на es2015 (Оператор разворота (spread operator) и тд)
Спасибо.
Ответить с цитированием
  #2 (permalink)  
Старый 13.10.2019, 15:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

zava75,
[...t.querySelectorAll('div')].forEach

t.querySelectorAll('div').forEach
Ответить с цитированием
  #3 (permalink)  
Старый 13.10.2019, 17:35
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

babbel cod es2015
document.addEventListener('DOMContentLoaded', ready);

function rand(x) {
  return Math.random() * x - x * 0.5 + 'px';
}

function ready() {
  var sections = document.querySelectorAll('div .section');

  for (var i = 0; i < sections.length; ++i) {
    var box = sections[i].querySelector('.text');
    if (box) {
      (function() {
        var hideText = function hideText(intel) {
          var t = intel.querySelector('.text');
          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 0,
                transform:
                  'translate3d(' +
                  rand(400) +
                  ', ' +
                  rand(400) +
                  ', ' +
                  rand(60) +
                  ')'
              });
            });
        };

        var showText = function showText(intel) {
          var t = intel.querySelector('.text');
          console.log(t);

          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 1,
                transform: 'translate3d(0, 0, 0)'
              });
            });
        };

        box.innerHTML = []
          .concat(_toConsumableArray(box.textContent))
          .map(function(n) {
            return '<div>' + (n.trim() ? n : '&nbsp;') + '</div>';
          })
          .join('');

        hideText(sections[i]);

        sections[i].addEventListener('mouseenter', function(e) {
          showText(this);
        });

        sections[i].addEventListener('mouseleave', function(e) {
          hideText(this);
        });
      })();
    }
  }
}


вот проблемный участок
(function() {
        var hideText = function hideText(intel) {
          var t = intel.querySelector('.text');
          []
            .concat(_toConsumableArray(t.querySelectorAll('div')))
            .forEach(function(n, i) {
              Object.assign(n.style, {
                opacity: 0,
                transform:
                  'translate3d(' +
                  rand(400) +
                  ', ' +
                  rand(400) +
                  ', ' +
                  rand(60) +
                  ')'
              });
            });
        };
Ответить с цитированием
  #4 (permalink)  
Старый 13.10.2019, 18:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

zava75,
поставить Полифилл для Object.assign или убрать анимацию opacity в css.
Ответить с цитированием
  #5 (permalink)  
Старый 14.10.2019, 08:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

zava75,
в чём задача, сделать код быстрее или для ie?
Ответить с цитированием
  #6 (permalink)  
Старый 14.10.2019, 09:55
Аспирант
Отправить личное сообщение для zava75 Посмотреть профиль Найти все сообщения от zava75
 
Регистрация: 13.07.2018
Сообщений: 34

Сообщение от рони Посмотреть сообщение
zava75,
в чём задача, сделать код быстрее или для ie?
Добрый день, основная задача поддержка браузеров. Переделаю выложу если получится)
Ответить с цитированием
  #7 (permalink)  
Старый 14.10.2019, 10:03
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Text Animation js ie
zava75,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body, section {
	height: 100%;
    background: red;
	color: #fff;
}
.box {
  max-width: 50vw;
  padding: 30px;
  position: relative;
  font-size: 30px;
  line-height: 1.5;
  perspective: 400px;
}
div.text {
     display: flex;
     flex-wrap: wrap;
}

div.text > div.anime > span{
  transition: all 1.6s cubic-bezier(0.165, 0.84, 0.44, 1);
  opacity: 0;

}
.section:hover div.text > div.anime > span{
  opacity: 1;
}
.section{
    border: 1px #0000FF solid;
    width: 98%;
    margin: 0 auto;
    overflow: hidden;
}
.section div.text > div{
     display: flex;
}


  </style>
  <script src="https://unpkg.com/grapheme-splitter@1.0.4/index.js"></script>
  <script>
document.addEventListener('DOMContentLoaded', ready);

function rand(x) {
    return x * (Math.random() - 0.5) + 'px';
}
if (window.NodeList && !NodeList.prototype.forEach) {
    NodeList.prototype.forEach = Array.prototype.forEach;
}

function animateText(elems, random) {
    elems.forEach(function(n, i) {
        n.style.transform = random ? 'translate3d(' + [400, 400, 60].map(rand) + ')' :
            'translate3d(0, 0, 0)';
        n.style.transitionDelay =  Math.random() < 0.5 ? (700 + Math.random() * 1200) + 'ms' : '';
    });
}

function ready() {
    var sections = document.querySelectorAll('div .section');
    var splitter = new GraphemeSplitter();
    sections.forEach(function(section) {
        var box = section.querySelector('.text');
        if (box) {
            var teg = true;
            box.innerHTML = splitter.splitGraphemes(box.innerHTML).map(function(g) {
                g = g.trim();
                var html = '';
                if (g && teg) {
                    teg = false;
                    html = '<div class="anime">'
                } else if (!g && !teg) {
                    teg = true;
                    html = '</div>'
                };
                return html + '<span>' + (g ? g : '&nbsp;') + '</span>'
            }).join('');

            var spans = section.querySelectorAll('.anime > span');

            animateText(spans, true)

            section.addEventListener('mouseenter', function(e) {
                animateText(spans);
            });

            section.addEventListener('mouseleave', function(e) {
                animateText(spans, true)
            });
        }
    })
}
  </script>
</head>

<body>
<div>
<div class="section">
  <div class="box">
     <div class="text">&#128514; 안녕하세요  1 Animation is the process of creating the illusion of motion and shape change by means of the rapid display of a sequence of static images that minimally differ from each other. The illusion—as in motion pictures in general—is thought to rely on the &#128578;</div>
  </div>
</div>
</div>

</body>
</html>

Последний раз редактировалось рони, 14.10.2019 в 18:40.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подскажите скрипт для защиты от копирования текста - обфускация лучше запрета frenzy Общие вопросы Javascript 18 27.03.2016 17:08
Как передать 2 значения в скрипт? useruser jQuery 1 07.10.2014 11:32
Как заставить скрипт обновить свои знания о dom? l-liava-l Оффтопик 6 21.02.2013 16:21
Скрипт сворачиваемых блоков, как доработать? varik Общие вопросы Javascript 0 25.10.2012 10:00
А как зделать скрипт, чтобы например скрипт 1 заменялся скриптом 2? yura371 Общие вопросы Javascript 3 06.01.2009 22:40