Стилизация отдельных символов в строках HTML на основе положения мыши

Question

Я пытаюсь изменить свойства css отдельных символов в строке текста в зависимости от положения мыши.

Codepen: https://codepen.io/NewbCake/pen/qYXvoo

Идея состоит в том, чтобы взять строку текста и обернуть каждый символ в промежуток общим классом «single-char» и уникальным классом.

Исходная текстовая строка выглядит следующим образом:

<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

Затем он разделяется на отдельных персонажей следующим образом:

<span class=“single-char char-0”> T</span>
<span class=“single-char char-1”> h</span>
<span class=“single-char char-2”> i</span>
<span class=“single-char char-3”> s</span>

JS

function arrayMe(string) {

  // For all matching elements
  $(string).each(function() {

    // Get contents of string
    var myStr = $(this).html();

    // Split myStr into an array of characters
    myStr = myStr.split("");

    // Build an html string of characters wrapped in  tags with classes
    var myContents = "";
    for (var i = 0, len = myStr.length; i < len; i++) {
        myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
    }

    // Replace original string with constructed html string
    $(this).html(myContents);
console.log(i)
});
(function() {

  var mX, mY, distance,
    $distanceSpan_red = $('#distance_blue span'),
    $distanceSpan_blue = $('#distance_red span'),
    $element0 = $('.char-0'),
    $element1 = $('.char-1');
    $element2 = $('.char-2');
    $element3 = $('.char-3');
    $element4 = $('.char-4');

function calculateDistance(elem, mouseX, mouseY) {
return Math.floor(Math.sqrt(Math.pow(mouseX - (elem.offset().left + (elem.width() / 2)), 2) + Math.pow(mouseY - (elem.offset().top + (elem.height() / 2)), 2)));
}

$(document).mousemove(function(e) {
  mX = e.pageX;
  mY = e.pageY;

  distance0 = calculateDistance($element0, mX, mY);
  distance1 = calculateDistance($element1, mX, mY);
  distance2 = calculateDistance($element2, mX, mY);
  distance3 = calculateDistance($element3, mX, mY);
  distance4 = calculateDistance($element4, mX, mY);


  $element0.css({'font-size': distance0 + 'px'});
  $element1.css({'font-size': distance1 + 'px'});
  $element2.css({'font-size': distance2 + 'px'});
  $element3.css({'font-size': distance3 + 'px'});
  $element4.css({'font-size': distance4 + 'px'});
});
})();
}
// Calling arrayMe on page load, on class "sample-text"
$('document').ready(function() {
  var myStringType = $('.sample-text');
  arrayMe(myStringType);
});

Я борюсь с тем, как сделать код более гибким и работать динамически. Независимо от объема текста, он должен иметь возможность измерить расстояние от позиции мыши до уникального класса каждой буквы, затем сохранить его как значение расстояния, а затем сопоставить это расстояние со значением свойства css.

Любая помощь будет оценена!

Answer 1

Я реструктурирую ваш код, чтобы сделать рабочий пример. Вам нужно создать массив, основанный на вашем классе single-char, чтобы потом можно было зациклить его и наложить жесткий код на количество символов.

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

  $(document).mousemove(function(e) {
    var mX = e.pageX;
    var mY = e.pageY;
    $('.single-char').each(function(){
      $(this).css({'font-size': calculateDistance(this, mX, mY) + 'px'});
    });                    
  });

Вы можете выбрать все символы с помощью $('common-class'), а затем зациклить их с помощью .each().

Надеюсь, это поможет:)

function arrayMe(string){
	$(string).each(function() {
		var myStr = $(this).html();
		myStr = myStr.split("");
		var myContents = "";
		for (var i = 0, len = myStr.length; i < len; i++) {
			myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
		}
		$(this).html(myContents);
    console.log(i);
	});
}



 function calculateDistance(elem, mouseX, mouseY) {
    // return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
   return mouseX;
  }


  $(document).mousemove(function(e) {
    var mX = e.pageX;
    var mY = e.pageY;
    $('.single-char').each(function(){
      $(this).css({'font-size': calculateDistance(this, mX, mY) + 'px'});
    });                    
  });


$('document').ready(function() {
	var myStringType = $('.sample-text');
	arrayMe(myStringType);
});

.single-char:hover {
	color:red;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

Этот код был добавлен, чтобы помочь ОП после последующего комментария.

function arrayMe(string){
	$(string).each(function() {
		var myStr = $(this).html();
		myStr = myStr.split("");
		var myContents = "";
		for (var i = 0, len = myStr.length; i < len; i++) {
			myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
		}
		$(this).html(myContents);
    console.log(i);
	});
}



 function calculateDistance(elem, mouseX, mouseY) {
    // return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
   return mouseX;
  }




$('document').ready(function() {
	var myStringType = $('.sample-text');
	arrayMe(myStringType);
  
    $('.single-char').hover(function(e) {
      var charNumber = $(this).attr('class').split('-')[2];
      $('.single-char').each(function(){
       $(this).css({'font-size': 12 + 'px'});
      }); 
    $(this).css({'font-size': 36 + 'px'});           
  });
});

.single-char:hover {
	color:red;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>

Это второй фрагмент кода для демонстрации забавности математики.

function arrayMe(string){
	$(string).each(function() {
		var myStr = $(this).html();
		myStr = myStr.split("");
		var myContents = "";
		for (var i = 0, len = myStr.length; i < len; i++) {
			myContents += '<span class="single-char char-' + i + '">' + myStr[i] + '</span>';
		}
		$(this).html(myContents);
    console.log(i);
	});
}



 function calculateDistance(elem, mouseX, mouseY) {
    return Math.floor(Math.sqrt(Math.pow(mouseX - ($(elem).offset().left + ($(elem).width() / 2)), 2) + Math.pow(mouseY - ($(elem).offset().top + ($(elem).height() / 2)), 2)));
  }




$('document').ready(function() {
	var myStringType = $('.sample-text');
	arrayMe(myStringType);
  
    $('.single-char').hover(function(e) {
      var mX = e.pageX;
      var mY = e.pageY;
      var charNumber = $(this).attr('class').split('-')[2];
      $('.single-char').each(function(){
       $(this).css({'font-size': calculateDistance($(this), mX, mY) + 'px'});
      });      
  });
});

.single-char:hover {
	color:red;
	cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class='sample-text hover-letter'>This sample text turns red, character by character, when you hover over it with your mouse.</p>