diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/animation.js | 6 | ||||
| -rw-r--r-- | src/config.js | 16 |
2 files changed, 16 insertions, 6 deletions
diff --git a/src/animation.js b/src/animation.js index 5d9b5f5..85c6dd7 100644 --- a/src/animation.js +++ b/src/animation.js @@ -4,7 +4,11 @@ export default class Animation { static calculateFinalState(element) { let finals = {} - const margin = config.margin; + let margin = config.margin; + if (window.innerWidth <= config.zeroMarginBreakpoint) { + margin = 0 + } + const nw = element.naturalWidth; const nh = element.naturalHeight; const ratio = nw / nh; diff --git a/src/config.js b/src/config.js index c306d8f..2a64db1 100644 --- a/src/config.js +++ b/src/config.js @@ -1,9 +1,15 @@ const config = { - selector: '[data-libra]', - margin: 50, - offset: { x: 0, y: 0 }, - transitionDuration: 200, // milliseconds - imageCursor: 'zoom-in', + selector: '[data-libra]', + margin: 50, + + // in small screens, it's best to not use margins + // otherwise, the zoomed image gets even smaller + // define on screen smaller than what size, margin is set to 0 + zeroMarginBreakpoint: 768, + + offset: { x: 0, y: 0 }, + transitionDuration: 200, // milliseconds + imageCursor: 'zoom-in', }; function deepMerge(target, source) { |