Browse Source

Added anchors to first row and swishy animation

pull/4/head
giuliof 2 years ago
parent
commit
e15727ae21
  1. 13
      animations.js
  2. 9
      index.html
  3. 5
      style.css

13
animations.js

@ -0,0 +1,13 @@
// Automagically nimate clicks to anchors
function animations() {
document.querySelectorAll('a[href^="#"]').forEach(anchor => {
anchor.addEventListener('click', function (e) {
e.preventDefault();
document.querySelector(this.getAttribute('href')).scrollIntoView({
behavior: 'smooth'
});
});
});
}

9
index.html

@ -13,8 +13,9 @@
<script type="text/javascript" src="lug.js"></script>
<script type="text/javascript" src="counters.js"></script>
<script type="text/javascript" src="animations.js"></script>
</head>
<body onload="lugtoscana(); counters();">
<body onload="lugtoscana(); counters(); animations();">
<header>
<h1 class="golem_font" >GOLEM</h1>
@ -24,12 +25,15 @@
<main>
<section id="chisiamo" class="bg">
<h2>Chi siamo</h2>
<a href="#attivita" class="anchor">
<div>
<h3>Il GOLEM</h3>
<p>
«Gruppo Operativo Linux Empoli» è il Linux Users Group di Empoli, ed è un'associazione di promozione sociale.
</p>
</div>
</a>
<a href="#" class="anchor">
<div>
<h3>Dove siamo</h3>
<p>
@ -37,12 +41,15 @@
</p>
<p><a href="https://www.openstreetmap.org/?mlat=43.72634&mlon=10.92510#map=18/43.72634/10.92510">Mappa</a></p>
</div>
</a>
<a href="#news" class="anchor">
<div>
<h3>Quando</h3>
<p>
Martedì sera<br/>dalle 21.30 alle 24.00
</p>
</div>
</a>
</section>
<section id="news" class="bg">

5
style.css

@ -160,4 +160,9 @@ ul > li {
.golem_font {
font-family: GOLEM, comfortaa, "Arial", sans-serif;
}
a:link.anchor, a:visited.anchor {
color: inherit;
text-decoration: inherit;
}
Loading…
Cancel
Save