0.833 kb JS library to zoom page based on window width.
Download and include viewRatio.min.js
<script src="viewRatio.min.js"></script>
Name | Takes | Optional | Defaults To |
---|---|---|---|
width | Int |
-- | |
zoomRatio | Float undefined |
✔️ | 1 |
maxWidth | Int undefined |
✔️ | INF |
minWidth | Int undefined |
✔️ | 0 |
.enable()
Enables .scale()
method
.disable()
Disables .scale()
method
.scale()
Scales based on choices & winWidth
.resetScale()
Removes scale
.scaleTo( $customRatio )
Scales to specified ratio
// CREATE VIEW RATIO OBJECT
var $viewRatio = viewRatio({
maxWidth: 1920, // STOP ZOOMING IF WIDTH IS BIGGER THAN 1920px
minWidth: 480, // STOP ZOOMING IF WIDTH IS SMALLER THAN 480px
width: 1920, // ZOOM WILL BE BASED ON THIS WIDTH
zoomRatio: 0.5, // ZOOM WILL BE 0.5 SLOWER
zoomRatio: 2 // ZOOM WILL BE 2x FASTER
});
// INITAL ZOOM
$viewRatio.scale();
// FIRE SCALE EVENT ON WINDOW RESIZE
window.addEventListener('resize', $viewRatio.scale, false);
First of all making something like this was hard due to cross browser support and it still has some problems so its in development stage for now .
- Edge & IE shows scrollbars on both sides
- Using
fixed
position in scaled element causes element to be not fixed. ( See Issue )