how to make a slide rule effect?

ساخت وبلاگ

آخرین مطالب

امکانات وب

how to make a slide rule effect?

I have a long chart. it's a jpg image wide enough to fill the screen, and tall enough that you have to scroll up and down.

I want to make a simple HTML page to view that chart and nothing else, that works like a slide rule, with that image as the background, and a scrolling red line for the slide rule's cursor.

the biggest problem I have is that I don't know how to make the background image scroll up/down as needed. I use a 1px <div> for the cursor and that works, but it only scrolls down to the bottom of the page and stops. the background image doesn't scroll.

my other problem is that I don't know what I am doing. I hashed it together from an example of another page so some of it is awfully screwball. this is as far as I got.

Code:
<!DOCTYPE html>
<html>
<head>
<title>Chart</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">

<style>

body, html {
  height: 100%;
  margin: 0;
  color: #A9A9A9;
}

.fixed-bg {
    background-image: url("chart.png");
    /* Set a specified height, or the minimum height for the background image */
    min-height: 500px;

    background-attachment: fixed;
    background-position: relative;
    background-repeat: no-repeat;

    /* Scale the background image to be as large as possible */
    background-size: cover;
}


.txt1 {
        font-family: "Lucida Console";
        color: red;
        font-size: 12pt;
        font-weight: normal;
}

</style>
</head>

<body>


<div class="fixed-bg"></div>


<!-- BLURB -->

<div class="fixed-bg">
  <div class="txt1">
    <span style="background-color:transparent;padding:10px;">some sort of blurb here</span>
  </div>
</div>


<!-- CURSOR -->

<div style="position:relative;">
  <div style="background-color:red; padding:1px;">

  </div></div>

<!-- PADDING -->

<div class="fixed-bg">
<br>
</div>

</body></html>
CodingForums...
ما را در سایت CodingForums دنبال می کنید

برچسب : نویسنده : codingforums بازدید : 262 تاريخ : سه شنبه 6 شهريور 1397 ساعت: 7:47

آرشیو مطالب

پيوندهای روزانه

لینک دوستان

خبرنامه