3

Quiero hacer que las letras de un texto se hagan secuencialmente más pequeñas:

Así es como quiero que quede

Ya sé cómo ponerlo en forma de círculo, pero, solo me falta saber cómo hacer que las letras sean cada vez más pequeñas.

circ = document.getElementById('circular');
textarr = circ.textContent.split('');
circ.textContent = '';

for (var i=0; i<textarr.length; i++) {
  circ.innerHTML += '<span style="-webkit-transform: rotate('+((i+1)*10)+'deg);transform: rotate('+((i+1)*2)+'deg);">'+textarr[i]+'</span>';
}
h1#circular span {
  font-size: 20px;
  font-family: 'MonoSpace';

  margin-left: 300px;
  
  width: 20px;
  height: 300px;

  position: absolute;
  left: 0;
  top: 0;

  transform-origin: bottom center;
  -webkit-transform-origin: bottom center;
  text-transform: lowercase;
}
<h1 style="" id="circular"> 3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679 82148086513282306647093844609550582231725359408128 48111745028410270193852110555964462294895493038196 44288109756659334461284756482337867831652712019091</h1>

4
  • Bienvenido. Por favor agrega una breve descripción de lo que has buscado/investigado/intentado como se sugiere en Cómo preguntar.
    – Rubén
    el 8 feb. 2020 a las 21:41
  • Podrias mostrarnos como lo hiciste circular, para que en base a eso podamos ayudarte, caso contrario, tu pregunta podria ser cerrada
    – Shassain
    el 8 feb. 2020 a las 21:52
  • ya he añadido como lo hice circular
    – Adriceb_02
    el 8 feb. 2020 a las 22:22
  • Hola @Adriceb_02. Te redacté una solución para que lo pruebes. Incluye el código fuente completo. el 9 feb. 2020 a las 13:47

1 respuesta 1

11

Nota:

Considere leer toda esta respuesta para entender los detalles de las líneas de código publicadas acá. También puede ir directamente al código fuente para probarlo.

Circunferencia, nodo y eje de rotación:

Para formar la circunferencia con los dígitos del símbolo PI decreciendo durante su rotación se pueden considerar las acciones que se describen en esta publicación.

JavaScript

Para el caso de JavaScript:

  • Crear las variables cantidad, nodo, tamanno y grados. Donde cantidad es la cantidad de caracteres, nodo la variable auxiliar donde se almacenará temporalmente el nodo creado en cada iteración, tamanno el tamaño de la fuente tipográfica y el grado de inclinación de cada elemento y grado el grado de inclinación almacenado en él (requiere del 5% de tamanno).

  • Crear el arreglo elementosHTML, que es donde se almacenarán los nodos que girarán cada tantos grados en cada iteración. En él se ubicarán los números de la constante PI.

  • Recuperar los caracteres numéricos de PI en la variable caracteres.

  • Recuperado los caracteres numéricos en la variable antes mencionada, borrarlos de donde estaban.

Para lograr que el código sea entendible para cualquier persona interesada en él se crean las siguientes funciones:

  • crearNodo( elemento ): creará y devolverá un nodo.

  • insertarNodo( nodo, nodoPadre ): una función con dos argumentos, que insertará o moverá un nodo previamente creado hacia otro elemento, que será el elemento padre del nodo insertado en él.

  • prepararNodo( nodo, caracter, tamanno, grados ): una función con cuatro (04) parámetros (argumentos). Esta función creará un nuevo nodo utilizando la función crearNodo(), que se insertará en un nodo previamente creado utilizando la función insertarNodo().

    Los parámetros de la función se explican a continuación:

    • nodo: si el nodo ha sido previamente creado debe pasar por este parámetro para prepararlo antes de ser renderizado. En él, se insertará otro nodo que se creará al momento de llamar la función prepararNodo().

    • caracter: este argumento pasará cada caracter numérico que se haya obtenido durante cada iteración.

    • tamanno: en él pasará un valor numérico que irá variando en cada iteración.

    • grados: los grados de inclinación (varía en cada iteración) del nodo que se preparará en dicha función pasarán por acá.

Caso HTML

En esta oportunidad, las líneas a utilizar serán las siguientes:

<div id="figura">3.1415...</div>

<!-- Imagen que se moverá dentro del elemento «figura» -->
<div id="simboloPI" class="flex">
  <img src="https://i.ibb.co/X5cMLDZ/imagen.png" alt="" />
</div>

Caso CSS:

En el código CSS crearemos una variable (también conocida como propiedades no estándar de CSS) que se denominará --diametro en ella se establecerá el diámetro de la circunferencia en px.

La idea de la variable --diametro es que se utilice para realizar cálculos de forma dinámica en las proporciones anchura y altura, a la vez, se calcule el radio de la propiedad border-radius en función de las proporciones antes descritas.

También se establece el eje de rotación en el centro inferior del elemento que debe girar utilizando la siguiente propiedad:

transform-origin: center bottom;

Dicha propiedad se encuentra ubicada en la siguiente regla CSS:

.girar {
  /* Propiedades CSS */
}

Código de ejemplo

No se agregaron validaciones en el código para simplificar en la medida de lo posible los pasos para la formación de la circunferencia a base de caracteres numéricos del número PI.

El resto de la explicación se encuentra en los comentarios de las siguientes líneas de código:

// Variables que se necesitan:
let
  cantidad, // Cantidad de caracteres que forman la circunferencia.
  nodo, // Variable auxiliar donde se almacenará el nodo.
  tamanno, // Tamaño de la fuente y grados de inclinación.
  grados; // Grado de la circunferencia.

// Array (arreglo) donde se almacenarán los nodos:
const elementosHTML = [];
// Almacenar los caracteres en un Array (arreglo):
const caracteres = figura.textContent.split("");

// Valores por defectos de las variables:
tamanno = cantidad = 121;
grados = 360;

// Eliminar caracteres de la figura:
figura.textContent = "";

// Función para crear un nodo:
const crearNodo = ( elemento ) => {
    return document.createElement( elemento );
}

// Función para insertar o mover el nodo a otro elemento:
const insertarNodo = ( nodo, nodoPadre ) => {
  nodoPadre.append( nodo );
}

// Función para preparar cada nodo que se vaya generando en
// en cada iteración:
const prepararNodo = ( nodo, caracter, tamanno, grados ) => {
  let nodoInterno = crearNodo( "div" );

  // Preparar nodo principal:
  nodo.classList.add( "girar" );
  nodo.style.transform = `rotateZ(-${grados}deg)`;
  nodo.style.fontSize = `${tamanno * 0.3}px`;

  // Preparar nodo interno:
  nodoInterno.classList.add( "flex" );

  // Se insertará en este nodo los caracteres
  // numéricos:
  nodoInterno.textContent = caracter;

  // Insertar el nodo Interno en el nodo principal,
  // tomando en cuenta que el nodo principal es el que
  // rotará:
  insertarNodo( nodoInterno, nodo );

  // Retornar el nodo principal ya preparado:
  return nodo;
}

// Clases que se agregan a la figura circular:
figura.classList.add( "flex", "figura" );

// Colocar el símbolo PI en la figura circular:
insertarNodo( simboloPI, figura );

// Con este bucle crearemos los nodos donde estarán
// contenido los números:
for ( let i = 0; i < cantidad; i++ ) {
  tamanno--;
  grados -= tamanno * 0.05;

  nodo = crearNodo( "div" );
  nodo = prepararNodo( nodo, caracteres[i], tamanno, grados );

  // Se agrega el nodo ya preparado en
  // el Array «elementosHTML»:
  elementosHTML.push( nodo );
}

// Una vez preparado el nodo se muestra en el
// navegador al insertarlo en el elemento figura:
for ( let nodo of elementosHTML )
  insertarNodo( nodo, figura );
/* Importar fuentes tipográficas */
@import url('https://fonts.googleapis.com/css?family=Courier+Prime|Montserrat|Open+Sans&display=swap');

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Aquí se define la regla CSS del elemento
   que formará una circunferencia */
.figura {
  /* Variable para definir el diámetro de 
     la circunferencia */
  --diametro: 500px;

  position: absolute;
  margin: auto;
  left: 0; right: 0;
  top: 0; bottom: 0;

  /*
  Mantener la proporción altura = anchura
  usuario variables CSS para poder cambiarla
  de tamaño sin que se rompa el diseño */
  width: var(--diametro);
  height: var(--diametro);

  /* Redondear el radio en función del diámetro
     de la circunferencia */
  border-radius: calc(var(--diametro) / 2);

  overflow: hidden;

  /* Fuente de tipo consola y negrita para los números */
  font-family: 'Courier Prime', monospace;
  font-weight: bold;
}


/* Esta animación es opcional, por lo tanto, 
   no es necesaria para la formación de la 
   circunferencia a base de caracteres
   numéricos de PI. Su función es crear un 
   efecto animado */
@keyframes girar {
  from {
    transform: rotateZ( -359deg );
  }
}

/* Regla CSS para el elemento que tendrá los números
   contenidos en él */
.girar {
  position: absolute;
  margin: auto;
  left: 0; right: 0;
  top: 0;

  /* La anchura es su contenido y su altura será
     el radio de la circunferencia que lo contiene */
  width: max-content;
  height: calc(var(--diametro) / 2);

  /* Esta propiedad es opcional */
  animation: 2s ease girar 1;

  /*  Se establece el eje de rotación en el centro
      inferior del elemento que contiene los números */
  transform-origin: center bottom;
}

.girar > div {
  height: 50px;
}

/* La altura o anchura máxima del
   símbolo del PI será el radio de la
   circunferencia: */
#simboloPI img {
  max-width: 50%;
  max-height: 50%;
}

/* Se utiliza el modelo de caja flexible para centrar
   horizontal y verticalmente los números y el símbolo PI */
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
<div id="figura">3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679821480865132823066470938446095505822317253594081284811174502841027019385211055596446229489549303819644288109756659334461284756482337867831652712019091</div>

<!-- Imagen que se moverá dentro del elemento «figura» -->
<div id="simboloPI" class="flex">
  <img src="https://i.ibb.co/X5cMLDZ/imagen.png" alt="">
</div>

IMPORTANTE:

La solución presentada en esta publicación no se puede considerar definitiva ni la mejor. Esta es una solución con resultados aproximados que busca explicar o dar una idea sobre los posibles pasos que deben seguirse para lograr el resultado deseado, que es la formación de la circunferencia a base de caracteres numéricos del número PI.

También dejo disponible el código en CodePen para que lo puedan visualizar allí también:

Visitar Circunferencia PI

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.