Last active
July 14, 2019 16:05
-
-
Save theuves/37222a47447efaa200fd2ab9317fc711 to your computer and use it in GitHub Desktop.
Testing a zoom effect for touchscreen devices.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <style> | |
| .container { | |
| width: 100%; | |
| overflow: hidden; | |
| } | |
| .image { | |
| width: 100%; | |
| /*transform: scale(3);*/ | |
| } | |
| </style> | |
| <body> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum error minus quae eos voluptatibus provident veniam commodi odio illum veritatis, eligendi, nemo eum dolorum. Neque voluptatum, unde nemo odio nam porro. Asperiores commodi aut ratione, eum quo rerum vitae iste libero labore. Debitis non itaque aliquam, rem commodi possimus dicta labore, ex repudiandae amet molestiae veritatis, accusantium. Cum, modi, magnam.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum error minus quae eos voluptatibus provident veniam commodi odio illum veritatis, eligendi, nemo eum dolorum. Neque voluptatum, unde nemo odio nam porro. Asperiores commodi aut ratione, eum quo rerum vitae iste libero labore. Debitis non itaque aliquam, rem commodi possimus dicta labore, ex repudiandae amet molestiae veritatis, accusantium. Cum, modi, magnam.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum error minus quae eos voluptatibus provident veniam commodi odio illum veritatis, eligendi, nemo eum dolorum. Neque voluptatum, unde nemo odio nam porro. Asperiores commodi aut ratione, eum quo rerum vitae iste libero labore. Debitis non itaque aliquam, rem commodi possimus dicta labore, ex repudiandae amet molestiae veritatis, accusantium. Cum, modi, magnam.</p> | |
| <div id="container" class="container"> | |
| <img class="image" src="me.jpg" /> | |
| </div> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum error minus quae eos voluptatibus provident veniam commodi odio illum veritatis, eligendi, nemo eum dolorum. Neque voluptatum, unde nemo odio nam porro. Asperiores commodi aut ratione, eum quo rerum vitae iste libero labore. Debitis non itaque aliquam, rem commodi possimus dicta labore, ex repudiandae amet molestiae veritatis, accusantium. Cum, modi, magnam.</p> | |
| <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum error minus quae eos voluptatibus provident veniam commodi odio illum veritatis, eligendi, nemo eum dolorum. Neque voluptatum, unde nemo odio nam porro. Asperiores commodi aut ratione, eum quo rerum vitae iste libero labore. Debitis non itaque aliquam, rem commodi possimus dicta labore, ex repudiandae amet molestiae veritatis, accusantium. Cum, modi, magnam.</p> | |
| </body> | |
| <script> | |
| const container = document.querySelector('#container'); | |
| const image = document.querySelector('.image'); | |
| function getOrigin() { | |
| const originValue = image.style.transformOrigin; | |
| if (!originValue) return {x: 50, y: 50}; | |
| const [x, y] = image.style.transformOrigin | |
| .split(/\s+/) | |
| .map((value) => value.replace(/%$/, '')) | |
| .map(Number); | |
| return {x, y}; | |
| } | |
| function setOrigin(x, y) { | |
| x = x || getOrigin().x; | |
| y = y || getOrigin().y; | |
| image.style.transformOrigin = `${x}% ${y}%`; | |
| } | |
| function isValidOrigin(value) { | |
| return value >= 0 && value <= 100; | |
| } | |
| function onTouchMove(initialAxios) { | |
| return function (event) { | |
| event.preventDefault(); | |
| const currentOrigin = getOrigin(); | |
| // x | |
| const currentX = event.touches[0].pageX - container.offsetLeft; | |
| const movementX = Math.abs(currentX - initialAxios.x) / container.offsetWidth * 100; | |
| const newOriginX = 100 - parseInt((100 - currentOrigin.x) + movementX * ((currentX - initialAxios.x) < 0 ? -1 : 1)); | |
| // y | |
| const currentY = event.touches[0].pageY - container.offsetTop; | |
| const movementY = Math.abs(currentY - initialAxios.y) / container.offsetHeight * 100; | |
| const newOriginY = 100 - parseInt((100 - currentOrigin.y) + movementY * ((currentY - initialAxios.y) < 0 ? -1 : 1)); | |
| if (newOriginX >= 0 && newOriginX <= 100) { | |
| setOrigin(newOriginX, null); | |
| } | |
| if (newOriginY >= 0 && newOriginY <= 100) { | |
| setOrigin(newOriginX >= 0 && newOriginX <= 100 ? newOriginX : null, newOriginY); | |
| } | |
| } | |
| } | |
| let eventFunction = function () {}; | |
| container.addEventListener('touchstart', function (event) { | |
| event.preventDefault(); | |
| alert(1) | |
| const initialAxios = { | |
| x: event.touches[0].pageX - container.offsetLeft, | |
| y: event.touches[0].pageY - container.offsetTop | |
| } | |
| eventFunction = onTouchMove(initialAxios); | |
| container.addEventListener('touchmove', eventFunction); | |
| }); | |
| window.addEventListener('touchend', function () { | |
| container.removeEventListener('touchmove', eventFunction); | |
| }) | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment