123

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <main>
<h1>Desplazamiento suave con anclas. (JS + CSS). </h1>
<p>Para <a target="_blank" href="https://escss.blogspot.com/2017/02/revision-posts-nuevas-demos.html">EsCss</a>. </p>
<hr>
<p id="intro">El siguiente artículo es una recopilación de algunos post publicados en 2010, editados como un solo contenido. </p>

<h2>[ 26 Ene 2010 19:17 ]</h2>
<p id="ancla0">El otro día, conversando sobre relojes, me quisieron hacer creer que el nombre de las sabonetas venía de su forma, parecida a un 'jabón' <span class="emot">¦-\</span> . Estas aseveraciones ridículas me hacen mucha gracia cuando terminan en una broma o en un juego de sofisterías absurdas. De otro modo me parece que me lo hacen a propósito para que me tome el trabajo de confirmar que es mentira. <br>
Pero esta vez no les voy a dar el gusto. 
</p>
<p>La <i>saboneta</i> es un reloj de bolsillo que en su cuerda (o más bien, en la corona para darle cuerda que está a un costado) tiene un botón para liberar la tapa. Ésta se abre sola por un resorte y así deja ver el cuadrante. 
</p>
<p >Para mi, el nombre viene de <b>Savona</b> (ciudad de <b>Italia</b>), porque supongo que se habrán inventado allí. Como "corbata" viene de <b>Croacia</b> o "bayoneta" de <b>Bayona</b>. Ni lo pienso buscar. Es así porque me parece a mí. Punto. 
</p>
<p>Como empecé a recordar otras curiosidades sobre relojes, me di una vuelta por acá, antes que por el tema de 'orígenes de palabras'; porque hay más mitos que etimología.
</p>

<hr>

<p id="ancla1">A pesar de lo que decían los relojeros franceses, los "huevos de nuremberg" no fueron inventados por un tal <b>Otto Nuremberg</b> usando como modelo una parte de su anatomía. En verdad estos relojes tenían la forma y el tamaño de un huevo de gallina, y se fabricaban en la ciudad de <b>Nuremberg</b> (<b>Alemania</b>).
</p>

<hr>

<p id="ancla2">Una discusión que todavía se mantiene es la del origen del "IIII" en vez del "IV", para las carátulas en numeración romana.
La mejor historia —pero la menos creíble— dice que <b>Luis XIV</b> de <b>Francia</b> era muy afecto a los relojes, y un artesano solía llevarle piezas con algún "error" para que el rey lo descubriera. Cuando vio uno con el "4" mal escrito en romano ... no lo notó, y aseguró que el reloj estaba perfecto. El relojero no se animó a contradecirlo; y a partir de entonces, un poco como recuerdo de la anécdota, un poco para lamerle las calzas a <b>Luis</b> y un poco para molestar al relojero, las carátulas francesas empezaron a hacerse con el formato "IIII".
</p>
<p class="offtopic"><b>Offtopic:</b> <br>
Los <b>Capeto</b> mostraron cierta debilidad por los artefactos mecánicos. <b>Luis XVI</b> tenía por hobby la cerrajería y la relojería. De hecho, él se hacía llamar "Relojero".
</p>
<p>Por suerte la moda no prendió en todos los países, y la mayoría de los relojes emblemáticos tienen el número "IV". <br>
Como el <b>Big Ben</b> de <b>Londres</b>. 
</p>

<hr>

<p id="ancla3">Y ya que andamos por el Parlamento Británico, digamos que su reloj no se llama <b>Big Ben</b>, sino <b>Reloj de la Torre de San Esteban</b>.
</p>
<p >La historia comienza cuando los obreros intentan subir la campana mayor del carrillón, llamada "<b>Victoria</b>", y descubren que tiene una rajadura en la copa. Después de un largo debate, llegan a 2 conclusiones 
<ol type="a">
<li>La reina Victoria no era virgen. </li>
<li>El nombre de la soberana es mufa. </li>
</ol>
</p>
<p>Cuando traen la nueva campana de reemplazo, los operarios deciden bautizarla "de apuro", y a falta de un nombre mejor, eligen el apodo de su jefe de obra (Sir <b>Benjamin Hall</b>) que era para todos el "Gran Ben". <br>
<b>Big Ben</b> es, en realidad, el nombre de la campana mayor de <b>St. Stephen</b>.
La gente de la época que conocía la anécdota, solía decir cada hora <i>"—Sonó el <b>Big Ben</b>"</i> ; y quienes no la conocían, creyeron que se hablaba del reloj.
</p>
<p>Y nadie se ocupó mucho de aclarar el desacierto durante estos últimos 150 años. 
</p>

<hr>

<p id="ancla4">Alguien que sí le dio su apodo a un tipo de relojes fue una hetaira famosa en la antigua <b>Grecia</b> llamada <b>Metiké</b>.
Para evitar que sus clientes se demoraran mucho en los preliminares, les ponía un 'reloj' que era una palangana de cobre llena de agua colgada con cadenas. Adentro arrojaba una bola hueca de hierro que tenía unas pequeñas perforaciones. El agua entraba lentamente por los agujeros y cuando la esfera se llenaba, terminaba cayendo hasta el fondo, golpeando la base como si fuera un gong.
Si el cliente aún no había terminado, tenía que pagar otro turno.
</p>
<p>Esto empezó a pasar bastante seguido, lo que preocupó a los hombres del lugar, que temían una impotencia generalizada por obra de algún dios resentido. Pero no era así. Rapidamente descubrieron que <b>Metiké</b> truchaba el cronómetro agrandando los orificios de la esfera para que cayese antes.
Entonces comenzaron a llamarla <i>"klepsydra"</i> (literalmente "ladrona del agua"), al igual que a sus relojes.
</p>
<p>Hoy se llama clepsidra también a los relojes de arena y a todos los que trasvasen un fluido de un contenedor a otro.
</p>

<hr>

<p id="ancla5">Iba terminar contando la historia del primer reloj del Cabildo de <b>Buenos Aires</b>. Ése que al fin lograron traer de <b>Europa</b> juntando moneda por moneda (o cuero sobre cuero), y que el importador insistía con desembalar él personalmente. Cuando llegó al puerto, se le adelantaron y lo abrieron antes, sólo para descubrir que en su máquina habían escondido cualquier cantidad de artículos de contrabando (¡hasta pornografía!).
</p>
<p>Pero mejor no lo cuento. Es un bajón. <br>
En esta ciudad fuimos, somos, y seremos siempre una manga de delincuentes. ¿Encima lo vamos a andar publicando?.
</p>
<p><a target="_blank" href="https://images.google.com.ar/images?gbv=2&hl=es&sa=1&q=saboneta&btnG=Buscar&aq=null&oq=&start=0"> https://images.google.com.ar/images?gbv=2&hl=es&sa=1&q=saboneta&btnG=Buscar&aq=null&oq=&start=0</a><br>

<a target="_blank" href="https://images.google.com.ar/images?hl=es&source=hp&q=huevos+de+nuremberg&gbv=2&aq=f&oq="> https://images.google.com.ar/images?hl=es&source=hp&q=huevos+de+nuremberg&gbv=2&aq=f&oq=</a><br>

<a target="_blank" href="https://images.google.com.ar/images?hl=es&source=hp&q=clepsidra&btnG=Buscar+im%C3%A1genes&gbv=2"> https://images.google.com.ar/images?hl=es&source=hp&q=clepsidra&btnG=Buscar+im%C3%A1genes&gbv=2</a><br>
</p>

<hr>

<h2>[01 Feb 2010 15:25]</h2>

<p id="ancla6">Cuando escribí el mensaje estaba seguro de que les iba a gustar más la historia de la clepsidra. Debí imaginar que eso sólo me pasaría a mí, que tengo una mente podreca con fijación en los temas sexuales. 
</p>
<p>El "IIII" aparece en relojes de estilo francés, estilo que en general se usó mucho en <b>Buenos Aires</b> hasta mediados del siglo XX; pero más que nada en los detalles, por eso no sería raro encontrar un edificio de estilo italiano con una torre que contenga un reloj de carátula <i>"franco-romana"</i> . También se ve mucho en relojes de pulsera (de marca francesa), y en relojes de mesa importados de <b>Taiwan</b> o <b>China</b>, que imitan a los europeos "antiguos".
</p>
<p id="ancla7">Y ahora que hablo de relojes orientales, de carrillones y de numeración romana ... a ver si alguien me saca la duda sobre este dato.
Resulta que la sonería que marca las horas en punto con la misma cantidad de campanadas, y cada cuarto de hora con una melodía distinta, es tipicamente europea. No todos los relojes funcionan así. Estoy "casi" seguro de que son los relojes chinos los que usaban (y usan) un código de campanas graves y agudas con o sin sordina para cantar las horas.
El punto de contacto con nuestro tema aparece cuando llega a oriente la numeración romana, porque se adapta perfectamente a esa sonería. Quiero decir, que una campana corta aguda es "I", una campana larga aguda es "V" ... y una corta seguida de una larga es "IV". Por supuesto : ninguno de estos relojes podría usar el "IIII", porque no tiene sentido golpear cuatro veces cuando se puede golpear solamente dos.
</p>
<p id="ancla8">Allá por los años 70, un reloj pulsera que estoy 99% seguro de que era fabricado por la japonesa <b>Citizen</b>, trajo un modelo para no videntes que codificaba las horas y los minutos con <i>"beeps"</i> . La publicidad la hacía el eternamente querido <b>Tato Bores</b>, pero no decía que era para ciegos porque entonces era más difícil de vender fuera de ese reducido mercado. Además, era carísimo.
El punto es que —como dije— ese invento era japonés, y a mi me asaltó la duda sobre el origen de este sistema de números convertidos a sonido ¿Al final serán japoneses o serán chinos? ¿Quién lo inventó primero y quién lo copió segundo? ¿Por qué hago preguntas bo!ud@s que no le interesan a nadie en vez de postear algo interesante? 
</p>

<hr>

<h2>[ 08 Feb 2010 16:26 ]</h2>

<p id="ancla9">Qué lástima que no tengamos a nadie que conozca del tema. No digo un relojero, un anticuario, un coleccionista; ¡sería pedir mucho!. Pero aunque más no sea, un entusiasta.
Hay una cantidad enorme de anécdotas curiosas asociadas a relojes, a su historia, a su estilo. Tengamos fe; alguien va a caer por aquí algún día a contarnos algo.
</p>
<p>Yo puedo sanatear un poco más, pero no soy un experto, ni mucho menos. Lo de los carrillones orientales que pregunté, debe ser un dato muy sabido para un conocedor. Aunque desde que aparecieron las voces y melodías sintetizadas sólo es una curiosidad.
Es más, muchas torres tienen hoy las campanas de vista, porque el sonido que se escucha es en realidad una grabación amplificada. O sampleada, lo que permitiría tocar una canción distinta cada hora. 
<ol type="1">
<li>Uno (Discépolo) </li>
<li>Two Hearts (Collins) </li>
<li>Viernes, 3 AM (García) </li>
<li>Señora de las Cuatro Décadas (Arjona) </li>
<li>Toma cinco (Desmond)<br>
—No pongo Silencio (Le Pera) porque además <i>"ella era una santa"</i> — </li>
<li>Seis De La Mañana (Sabina) </li>
<li>Por Siete Vidas (cacería) (Páez) </li>
<li>Los Orozco (Gieco) </li>
<li>Nueve (Bunbury) </li>
<li>Una casa con diez pinos (Pappo)<br>
. . .</li>
</ol>
</p>
<p>Bueno, aquí se me terminó la cuerda del divague y la sanata... 
</p>
<p id="ancla10">Aprovecho para contar que el otro día me decidí a exprimir al <b>Google</b> para buscar el origen de algunas frases; y como me embalé, terminé rastreando páginas de fantasmas y otras cosas que me quedaban pendientes. <br>
Una fue algún sitio que contara lo del Reloj del Cabildo. Y no lo hallé ni en la página de <b>Pigna</b>. Cuando ya me había desanimado, empecé a revisar las que tenía abiertas, y (¡oh, casualidad!) estaba en una que recopilaba dichos populares. <br>
Estoy empezando a creer que internet funciona así : las cosas aparecen cuando ya las dejaste de buscar (...¿o ésa era la vida?). <br>

<a target="_blank" href="https://tangou.wordpress.com/2008/12/15/la-impuntualidad-ese-deporte-argentino/"> https://tangou.wordpress.com/2008/12/15/la-impuntualidad-ese-deporte-argentino/ </a>
</p>

<hr>
</main>

<ul id="enlaces">
<li><a href=#ancla0>Saboneta</a></li>
<li><a href=#ancla1>Huevos</a></li>
<li><a href=#ancla2>IIII (1)</a></li>
<li><a href=#ancla3>Big Ben</a></li>
<li><a href=#ancla4>Clepsidra</a></li>
<li><a href=#ancla5>Cabildo (1)</a></li>
<li><a href=#ancla6>IIII (2)</a></li>
<li><a href=#ancla7>Carrillón (1)</a></li>
<li><a href=#ancla8>Beeps</a></li>
<li><a href=#ancla9>Carrillón (2)</a></li>
<li><a href=#ancla10>Cabildo (2)</a></li>
</ul>

            
          
!
            
              body {
margin-bottom: 5em; 
background: linear-gradient(bisque, ivory, bisque); 
background-size: 100% 10%; 
}
main {
position: fixed; 
top: 0; 
margin-right: 10.5em; 
width: auto; 
transition: top 2s ease-out 500ms; 
}
ol>li {
font-size: 1.2em; 
}
#enlaces {
position: fixed; 
list-style-type: none; 
top: 10px; right: 10px; 
padding: .1em; 
font-size: 150%; 
background: white; 
border-radius: .5em 0 0 .5em; 
}
li>a {
margin: .1em 0; 
display: inline-block; 
width: 5em; 
text-decoration: none; 
padding: 0 1em; 
background: black; 
color: white; 
line-height: 1.3em; 
}
p {
font: normal 1.2em/1.5 sans-serif; 
margin: 1em; 
}
p>a {
display: inline-block; 
margin: 1em; 
}
main ol {
padding-left: 4em; 
}
hr {
border-color: chocolate; 
}
#intro {
display: block; 
padding: .5em; 
text-align: center; 
border: solid 2px black; 
}

.emot {
display: inline-block; 
font-family: monospace; 
margin: 0 .15em; 
background: yellow; 
padding: 0 .2em .2em .2em; 
border: solid 1px black; 
border-radius: .4em; 
transform: rotate(90deg) scaleX(.6); 
}
.offtopic {
color: maroon; 
font-style: oblique; 
padding: 0 .4em; 
border-style: solid; 
border-width: 0 .2em; 
border-color: maroon; 
border-radius: .6em / 50%; 
}
div[id^='ancla'] {
position: absolute;
}

            
          
!
            
              var elPrincipal; //VARIABLE PARA EL BLOQUE main

/* REESCRIBE EL DOCUMENTO AL CARGAR */
window.addEventListener("load", function(){ 
  /*REFERENCIA AL body */
  elDocumento = document.querySelector("body"); 
  /*REFERENCIA AL main */
  elPrincipal = document.querySelector("main"); 

  /*MIDE ALTURA DE main ... */
  altoPrincipal = elPrincipal.offsetHeight; 
  /*... Y LA PASA AL body */
  elDocumento.style.height = altoPrincipal + "px"; 

  /*REFIERE A COLECCIÓN DE ANCLAS */
  lasAnclas = document.querySelectorAll("p[id^='ancla']"); 
  /*CUENTA EL TOTAL DE ANCLAS */
  totalAnclas = lasAnclas.length; 

  /*CREA COPIAS DE ANCLAS Y ANULA LAS ORIGINALES */
  for(a=0; a<totalAnclas; a++) {
    /*CREA CADA NUEVA ANCLA */
    nuevaAncla = document.createElement('div'); 
    /*LE PONE IDENTIFICADOR "COPIADO" DEL ORIGINAL*/
    nuevaAncla.setAttribute("id","ancla"+a); 
    /*LE DA LA MISMA DISTANCIA AL TOPE DEL ORIGINAL*/
    nuevaAncla.style.top = lasAnclas[a].offsetTop + "px"; 
    /*AGREGA LA NUEVA ANCLA AL body */
    elDocumento.appendChild(nuevaAncla); 
    /*BORRA EL id DE LA ORIGINAL */
    lasAnclas[a].removeAttribute("id"); 
  }
}, false); 

/* AL DESPLAZAR EL DOCUMENTO CAMBIA top DE main*/
document.addEventListener("scroll", function(){ 
  elPrincipal.style.top = (-pageYOffset+20) + "px"; 
}, false); 

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console