search

josephernest / bigpicture.js

bigpicture.js is a Javascript library that allows infinite panning and infinite zooming in HTML pages.
https://josephernest.github.io/bigpicture.js/index.html
MIT License
809 stars 58 forks source link

Change opacity depence on font size #20

Open kvasnyj opened 5 years ago

kvasnyj commented 5 years ago

I add two constants:

const sizeOpacity1 = 10; //Maximum font size with opacity = 1
const sizeOpacity0 = 300;  //Minimum font size with opacity = 0

To switch off feature it is enought to set sizeOpacity0 = 1000

image

josephernest commented 5 years ago

Hi @kvasnyj Would you have an online link with a "live demo" to see how this new feature looks like?

kvasnyj commented 5 years ago

Hi @josephernest, I haven't public web server yet, but I attached files to run on any web server. bigpicture.zip

josephernest commented 5 years ago

Nice indeed! How would you include this feature? With a parameter, where?

kvasnyj commented 5 years ago

I include parameters into bigpicture.js :

const sizeOpacity1 = 10; //Maximum font size with opacity = 1
const sizeOpacity0 = 300;  //Minimum font size with opacity = 0
josephernest commented 5 years ago

I mean it would be interesting to have an option such that if we do that in HTML:

<body>
<div id="bigpicture-container">
<div id="bigpicture" data-zoom="1" data-x="721" data-y="480">

then it is the default version (without opacity), and if we do this in the HTML:

<body>
<div id="bigpicture-container">
<div id="bigpicture" data-zoom="1" data-x="721" data-y="480"

data-opacitymode="1">

then it enables your code.