Commit 9f24a6f
Changed files (4)
001.Vision
001.Vision/index.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+ <meta charset="UTF-8">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+ rel="stylesheet">
+ <link rel="stylesheet" href="./style.css">
+ <link rel="stylesheet" href="../assets/common.css">
+ <link rel="shortcut icon" href="../assets/favicon.png" type="image/png">
+ <script src="../assets/common.js"></script>
+ <title>001. Vision</title>
+</head>
+
+<body>
+ <!-- Modal Section -->
+ <input class="modal-state" id="modal" type="checkbox" />
+ <div class="modal">
+ <label class="modal__bg" for="modal"></label>
+ <div class="modal__inner">
+ <label class="modal__close" for="modal"></label>
+ <h2>001.Vision</h2>
+ <p class="modal__p">
+ Sneak effect using CSS and JS.
+ </p>
+ </div>
+ </div>
+
+ <!-- Main Content -->
+ <div id="scope"></div>
+ <p class="content">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse a mi in lorem rhoncus congue. Aenean porta
+ consectetur sollicitudin. Nulla erat turpis, venenatis in faucibus blandit, laoreet non augue. Proin fermentum
+ augue eu cursus mollis. Sed hendrerit mi sed sollicitudin vulputate. Vestibulum sit amet aliquet velit. Fusce
+ venenatis tortor nec lacus vehicula vestibulum. Donec vitae suscipit est.
+ <br>
+ Ut ac massa sagittis, vulputate quam eu, luctus odio. Maecenas semper leo at luctus tempor. Donec odio neque,
+ rhoncus in dolor quis, sodales ornare urna. Orci varius natoque penatibus et magnis dis parturient montes,
+ nascetur ridiculus mus. Nullam id semper mauris. Donec tempor nisl in libero aliquet, quis luctus quam
+ sollicitudin. Morbi blandit id dui sodales finibus. Duis ultrices sapien et nisi pharetra, nec ultrices odio
+ iaculis. Sed non semper nulla. Vestibulum rutrum sem dolor, sed suscipit justo efficitur a. Integer aliquet in
+ augue sed rhoncus. Maecenas rutrum porttitor tellus eget imperdiet. Nunc sed diam quis ipsum volutpat fringilla.
+ Morbi pretium posuere neque, ut pretium velit scelerisque id. Duis malesuada egestas vehicula.
+ <br>
+ Praesent porttitor, turpis id ullamcorper venenatis, nisi orci pretium mauris, eu pretium sapien mi a nunc.
+ Phasellus fringilla hendrerit purus, vitae rhoncus justo cursus eget. Donec at rhoncus neque. In a euismod
+ lacus. Maecenas euismod dui et sem egestas consequat. In consequat libero ex, ut commodo neque mollis sodales.
+ Sed tempor, elit laoreet pretium mattis, sem ante semper eros, finibus viverra risus dui nec odio. Integer
+ ultrices, magna a rutrum finibus, justo nunc porttitor turpis, ut dignissim nisl lacus et ipsum. Mauris id lorem
+ viverra, finibus augue vel, dictum erat. Quisque condimentum, lacus ac porttitor commodo, lorem urna euismod
+ elit, in dignissim neque libero et est. Nunc posuere varius tortor ut interdum. Nam a enim eget mi lobortis
+ <br>
+ laoreet. Praesent at cursus magna. Etiam sed lacus nec tellus efficitur facilisis scelerisque id ligula.
+ Nulla magna nisi, pellentesque sit amet eleifend eu, tristique suscipit nibh. Quisque iaculis sem at consequat
+ sodales. Donec in ipsum ultricies, pulvinar nibh ac, ultrices augue. Proin rutrum dictum turpis, ut lacinia nisl
+ accumsan quis. Suspendisse vulputate rhoncus nisi. Phasellus dignissim ligula nec odio egestas, vitae ultricies
+ odio faucibus. Vivamus ullamcorper efficitur turpis in euismod. Mauris semper orci a mauris pharetra, in
+ fringilla sem ornare. Nulla at est a nisi convallis aliquam.
+ </p>
+
+ <!-- Footer Section -->
+ <div class="footer">
+ <label for="modal">(i)</label>
+ <a class="arrow" href="../"></a>
+ </div>
+ <script src="./script.js"></script>
+</body>
+
+</html>
\ No newline at end of file
001.Vision/script.js
@@ -0,0 +1,59 @@
+const scope = document.getElementById("scope");
+const content = document.querySelector('.content');
+let x, y, offsetX, offsetY, isDragging = false;
+const padding = 100; // Padding in px
+
+function updateClipPath() {
+ const rect = scope.getBoundingClientRect();
+ const insetTop = rect.top;
+ const insetRight = window.innerWidth - rect.right - padding;
+ const insetBottom = window.innerHeight - rect.bottom - padding;
+ const insetLeft = rect.left;
+ content.style.clipPath = `inset(${Math.max(0, insetTop)}px ${Math.max(0, insetRight)}px ${Math.max(0, insetBottom)}px ${Math.max(0, insetLeft)}px)`;
+}
+
+function centerScope() {
+ const scopeWidth = scope.offsetWidth;
+ const scopeHeight = scope.offsetHeight;
+ const centerX = (window.innerWidth - scopeWidth) / 2;
+ const centerY = (window.innerHeight - scopeHeight) / 2;
+ scope.style.left = `${centerX}px`;
+ scope.style.top = `${centerY}px`;
+ updateClipPath();
+}
+
+document.addEventListener("mousemove", (e) => {
+ x = e.clientX;
+ y = e.clientY;
+ if (isDragging) {
+ const newX = x - offsetX;
+ const newY = y - offsetY;
+
+ const maxX = window.innerWidth - scope.offsetWidth;
+ const maxY = window.innerHeight - scope.offsetHeight;
+
+ const finalX = Math.min(Math.max(0, newX), maxX);
+ const finalY = Math.min(Math.max(0, newY), maxY);
+
+ scope.style.left = `${finalX}px`;
+ scope.style.top = `${finalY}px`;
+
+ updateClipPath();
+ }
+});
+
+document.onmouseup = () => {
+ isDragging = false;
+ scope.style.cursor = "grab";
+};
+
+scope.onmousedown = (e) => {
+ e.preventDefault();
+ isDragging = true;
+ offsetX = e.clientX - scope.getBoundingClientRect().left;
+ offsetY = e.clientY - scope.getBoundingClientRect().top;
+ scope.style.cursor = "grabbing";
+};
+
+window.onload = centerScope;
+window.onresize = centerScope;
001.Vision/style.css
@@ -0,0 +1,41 @@
+*{
+ margin: 0;
+ padding:0;
+}
+
+body{
+ justify-content: start !important;
+ align-items: start !important;
+}
+
+ #scope {
+ height: 300px;
+ width: 300px;
+ border: solid 0.5px rgb(212, 175, 55);
+ position: absolute;
+ cursor: grab;
+ left: 0px;
+ top: 0px;
+ clip-path: inset(0px 0px 0px 0px);
+ }
+
+ .content {
+ opacity: 70%;
+ position: absolute;
+ width: calc(100% - 100px);
+ height: calc(100% - 100px);
+ padding: 50px;
+ box-sizing: border-box;
+ pointer-events: none;
+ clip-path: inset(100vh 100vw 100vh 100vw);
+ font-family: "Source Code Pro", monospace;
+ font-optical-sizing: auto;
+ font-weight: 500px;
+ font-style: normal;
+ font-spacing: 10px;
+ padding: 100px;
+ line-height: 2;
+}
+
+
+
\ No newline at end of file
index.html
@@ -13,6 +13,7 @@
.101.
</h1>
<div class="flex flex-col text-white gap-x-[200px] gap-y-2 p-10">
+ <a href="./001.Vision/" class="opacity-75 hover:opacity-100 hover:text-yellow-400">001.Vision</a>
</div>
</body>
</html>
\ No newline at end of file