Browse Source

smooth scroooooooooll

master
nglk 4 years ago
parent
commit
e76e18cd33
  1. 6
      static/css/style.css
  2. 33
      templates/hello.html

6
static/css/style.css

@ -24,6 +24,12 @@
.thesis {
overflow-y: scroll;
max-height:500px;
scroll-behavior: smooth;
}
/* background audio */
audio {
width:100%;
}
/* circles */

33
templates/hello.html

@ -3,14 +3,19 @@
{% block body %}
<div class="row">
<div class="col-md-9">
<!-- <div class="map_area">Map area<div id="circle-1" onclick="scrolldiv()"> -->
<div class="map_area">Map area
<div class="row">
<div class="col-md-1 col-sm-4">
<div id="show1"><audio controls>
<source src="../static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio></div>
<svg id="first_circle">
<svg id="first_circle angela" onclick="scrolldiv()">
<circle cx="50" cy="50" r="2rem" stroke="green" stroke-width="4" fill="yellow" />
<text x="50" y="50" text-anchor="middle">hello </text>
<a href="#" >Angela<text x="50" y="50" text-anchor="middle">hello </text></a>
</svg>
</div>
<div class="col-md-1 col-sm-4">
@ -82,21 +87,11 @@
elem.scrollIntoView();
}
</script>
<!-- <script type="text/javascript">
let firsttext = 'text text';
function setup() {
var canvas = createCanvas(400, 400);
canvas.parent('circle-1');
}
function draw() {
stroke(0);
ellipse(252, 144, 72, 72);
text(firsttext, 252, 144, 72, 72);
firsttext.id = 'firsttext';
}
</script> -->
<script type="text/javascript">
$("#angela").click(function(){
$("#show1").fadeIn()
console.log("around")
});
</script>
{% endblock %}

Loading…
Cancel
Save