mehrshaddarzi · February 13, 2025 06:51
diff --git a/gistfile1.txt b/gistfile1.txt
 <!DOCTYPE html>
 <html lang="fa">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>زوم با Transform Scale</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        #zoom-container {
            width: 100%;
            height: 100%;
            background-color: lightblue;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            transform-origin: 0 0; /* نقطه مرجع تغییر اندازه */
            transition: transform 0.1s ease; /* انیمیشن نرم برای زوم */
        }
    </style>
 </head>
 <body>
    <div id="zoom-container">
        این متن قابل زوم است!
    </div>

    <script>
        let initialDistance = null;
        const zoomContainer = document.getElementById('zoom-container');
        let currentScale = 1;

        // محاسبه فاصله بین دو نقطه لمسی
        function getDistance(touches) {
            return Math.hypot(
                touches[0].clientX - touches[1].clientX,
                touches[0].clientY - touches[1].clientY
            );
        }

        // مدیریت حرکت لمسی
        function handleTouchMove(event) {
            if (event.touches.length === 2) {
                event.preventDefault(); // جلوگیری از اسکرول پیش‌فرض

                if (initialDistance === null) {
                    // ذخیره فاصله اولیه بین دو انگشت
                    initialDistance = getDistance(event.touches);
                } else {
                    // محاسبه فاصله جدید و اعمال زوم
                    const newDistance = getDistance(event.touches);
                    const scale = newDistance / initialDistance;
                    currentScale *= scale;
                    zoomContainer.style.transform = `scale(${currentScale})`;
                    initialDistance = newDistance; // به‌روزرسانی فاصله برای حرکت بعدی
                }
            }
        }

        // ریست فاصله اولیه پس از برداشتن انگشت‌ها
        function handleTouchEnd() {
            initialDistance = null;
        }

        // افزودن رویدادهای لمسی
        zoomContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
        zoomContainer.addEventListener('touchend', handleTouchEnd);
    </script>
 </body>
 </html>


 <!DOCTYPE html>
 <html lang="fa">
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>اسکرول افقی با Touch</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            overflow: hidden;
            width: 100%;
            height: 100%;
        }
        #container {
            width: 100%;
            height: 100%;
            overflow: hidden;
            position: relative;
        }
        #scrollable-div {
            width: 300%; /* عرض بیشتر از صفحه برای اسکرول */
            height: 100%;
            display: flex;
            background-color: lightblue;
            transform: translateX(0); /* موقعیت اولیه */
            transition: transform 0.2s ease; /* انیمیشن نرم */
        }
        .item {
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 24px;
            border: 2px solid #ccc;
        }
    </style>
 </head>
 <body>
    <div id="container">
        <div id="scrollable-div">
            <div class="item" style="background-color: lightcoral;">صفحه 1</div>
            <div class="item" style="background-color: lightgreen;">صفحه 2</div>
            <div class="item" style="background-color: lightblue;">صفحه 3</div>
        </div>
    </div>

    <script>
        const scrollableDiv = document.getElementById('scrollable-div');
        let startX = 0;
        let currentX = 0;
        let isDragging = false;

        // شروع حرکت لمسی
        scrollableDiv.addEventListener('touchstart', (event) => {
            startX = event.touches[0].clientX; // موقعیت اولیه لمسی
            isDragging = true;
        });

        // حرکت لمسی
        scrollableDiv.addEventListener('touchmove', (event) => {
            if (!isDragging) return;
            event.preventDefault(); // جلوگیری از اسکرول پیش‌فرض

            const touchX = event.touches[0].clientX; // موقعیت فعلی لمسی
            const deltaX = touchX - startX; // تغییر موقعیت افقی
            currentX += deltaX;

            // محدودیت‌های اسکرول
            const maxScroll = scrollableDiv.offsetWidth - window.innerWidth;
            currentX = Math.max(-maxScroll, Math.min(0, currentX));

            scrollableDiv.style.transform = `translateX(${currentX}px)`; // اعمال تغییر موقعیت
            startX = touchX; // به‌روزرسانی موقعیت شروع
        });

        // پایان حرکت لمسی
        scrollableDiv.addEventListener('touchend', () => {
            isDragging = false;
        });
    </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html lang="fa">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
	<title>زوم با Transform Scale</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	}
	#zoom-container {
	width: 100%;
	height: 100%;
	background-color: lightblue;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	transform-origin: 0 0; /* نقطه مرجع تغییر اندازه */
	transition: transform 0.1s ease; /* انیمیشن نرم برای زوم */
	}
	</style>
	</head>
	<body>
	<div id="zoom-container">
	این متن قابل زوم است!
	</div>

	<script>
	let initialDistance = null;
	const zoomContainer = document.getElementById('zoom-container');
	let currentScale = 1;

	// محاسبه فاصله بین دو نقطه لمسی
	function getDistance(touches) {
	return Math.hypot(
	touches[0].clientX - touches[1].clientX,
	touches[0].clientY - touches[1].clientY
	);
	}

	// مدیریت حرکت لمسی
	function handleTouchMove(event) {
	if (event.touches.length === 2) {
	event.preventDefault(); // جلوگیری از اسکرول پیش‌فرض

	if (initialDistance === null) {
	// ذخیره فاصله اولیه بین دو انگشت
	initialDistance = getDistance(event.touches);
	} else {
	// محاسبه فاصله جدید و اعمال زوم
	const newDistance = getDistance(event.touches);
	const scale = newDistance / initialDistance;
	currentScale *= scale;
	zoomContainer.style.transform = `scale(${currentScale})`;
	initialDistance = newDistance; // به‌روزرسانی فاصله برای حرکت بعدی
	}
	}
	}

	// ریست فاصله اولیه پس از برداشتن انگشت‌ها
	function handleTouchEnd() {
	initialDistance = null;
	}

	// افزودن رویدادهای لمسی
	zoomContainer.addEventListener('touchmove', handleTouchMove, { passive: false });
	zoomContainer.addEventListener('touchend', handleTouchEnd);
	</script>
	</body>
	</html>


	<!DOCTYPE html>
	<html lang="fa">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>اسکرول افقی با Touch</title>
	<style>
	body, html {
	margin: 0;
	padding: 0;
	overflow: hidden;
	width: 100%;
	height: 100%;
	}
	#container {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	}
	#scrollable-div {
	width: 300%; /* عرض بیشتر از صفحه برای اسکرول */
	height: 100%;
	display: flex;
	background-color: lightblue;
	transform: translateX(0); /* موقعیت اولیه */
	transition: transform 0.2s ease; /* انیمیشن نرم */
	}
	.item {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 24px;
	border: 2px solid #ccc;
	}
	</style>
	</head>
	<body>
	<div id="container">
	<div id="scrollable-div">
	<div class="item" style="background-color: lightcoral;">صفحه 1</div>
	<div class="item" style="background-color: lightgreen;">صفحه 2</div>
	<div class="item" style="background-color: lightblue;">صفحه 3</div>
	</div>
	</div>

	<script>
	const scrollableDiv = document.getElementById('scrollable-div');
	let startX = 0;
	let currentX = 0;
	let isDragging = false;

	// شروع حرکت لمسی
	scrollableDiv.addEventListener('touchstart', (event) => {
	startX = event.touches[0].clientX; // موقعیت اولیه لمسی
	isDragging = true;
	});

	// حرکت لمسی
	scrollableDiv.addEventListener('touchmove', (event) => {
	if (!isDragging) return;
	event.preventDefault(); // جلوگیری از اسکرول پیش‌فرض

	const touchX = event.touches[0].clientX; // موقعیت فعلی لمسی
	const deltaX = touchX - startX; // تغییر موقعیت افقی
	currentX += deltaX;

	// محدودیت‌های اسکرول
	const maxScroll = scrollableDiv.offsetWidth - window.innerWidth;
	currentX = Math.max(-maxScroll, Math.min(0, currentX));

	scrollableDiv.style.transform = `translateX(${currentX}px)`; // اعمال تغییر موقعیت
	startX = touchX; // به‌روزرسانی موقعیت شروع
	});

	// پایان حرکت لمسی
	scrollableDiv.addEventListener('touchend', () => {
	isDragging = false;
	});
	</script>
	</body>
	</html>