pictureScroll

Einfaches Programm zum Umblättern von Musik-Notenblättern

Version 1.07, © Gerhard Schacherl, 2021-2025

NEU Animation beim Blättern: langsames Scrollen vor, schnelles Scrollen zurück

Demo

J. S. Bach, Präludium und Fuge g-moll (Hochformat)

G. F. Händel, Sonate F-Dur (Querformat)

Bedienung des Programms

Umblättern

Der Notenbereich ist (virtuell) in 2 Hälften geteilt.
Die grüne Markierung dient nur der Veranschaulichung, sie ist im Notenblatt unsichtbar!

Maus-Bedienung

Mausklick links:	Mausklick in rechter Hälfte: weiterblättern (= Noten um eine Seite nach links verschieben) Mausklick in linker Hälfte: zurückblättern
Mausklick rechts	Unabhängig von der Stellung des Mauszeigers: immer zurückblättern

Touch-Bedienung
Nur Touch rechts/links, kein "Wischen"
Tasten
Cursor Left/Right, Cursor Up/Down, PageUp/PageDown, Pos1 (= Seite 1), Ende (= letzte Seite)
Presenter od. Fusspedal
das Tasten od. Mausklick simulieren kann, z.B. Pageflip-Pedal, erhältlich bei Thomann, ...)

Seitennummer - Button

Klick auf Button mit der roten Seitennummer links oben im Notenbereich ermöglicht direkte Seitenwahl

Rechtsklick geht auf Seite 1

"Zurück" - Button

Der Button links unten im Notenbereich führt auf die vorige Seite zurück.

Festergröße verändern

Wenn die Fenstergröße verändert wird, aktualisiert sich die Seite automatisch (Neuladen)

Eigene Projekte

Benötigt werden Bilder, eine *.html-Seite, pictureScroll.css und pictureScroll.js

Für eigene Projekte müssen in die *.html-Seite die richtigen Bilder eingebaut werden.

Beispiel Internetseite: bach.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="pictureScroll.css">
</head>

<body>
<div id="pics">
<img src="bilder/bach/pr_fuge06_s01.jpg">
<img src="bilder/bach/pr_fuge06_s02.jpg">
<img src="bilder/bach/pr_fuge06_s03.jpg">
<img src="bilder/bach/pr_fuge06_s04.jpg">
<img src="bilder/bach/pr_fuge06_s05.jpg">
<img src="bilder/bach/pr_fuge06_s06.jpg">
<div id="abstandhalter"></div>
</div>

<button onclick="setOptions();" id="seitenNr">1</button>
<button onclick="history.back()" id="zurueck">←</button>

<script src="pictureScroll.js"></script>
</body>
</html>