Commit e07a80e
Changed files (3)
001.Vision
001.Vision/index.html
@@ -24,7 +24,11 @@
<label class="modal__close" for="modal"></label>
<h2>001.Vision</h2>
<p class="modal__p">
- Sneak effect using CSS and JS.
+ <ul>
+ <li>Sneak effect using CSS and JS.</li>
+ <li>Do you know who is bruce wayne?</li>
+ <span style="color:var(--lightGold)">Then close this box and try typing who he is.</span>
+ </ul>
</p>
</div>
</div>
@@ -32,33 +36,50 @@
<!-- 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,
+ Fk off mate sit amet, consectetur adipiscing elit. Suspendisse a mi in lorem rhoncus congue. Aenean porta
+ consectetur sollicitudin. Nulla erat turpis, venenatis in faucibus <span class="quote">It's not</span> , 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.
+ Ut ac massa sagittis, quam eu, luctus odio. Maecenas semper leo
+ at luctus tempor. Donec odio neque,
+ rhoncus in dolor quis, sodales ornare urna. Orci varius natoque <span class="quote">who I am </span> 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.
+ iaculis. Sed non semper nulla. 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. Praesent porttitor, turpis id ullamcorper venenatis, nisi orci pretium mauris, eu pretium
+ sapien Maecenas euismod dui Phasellus fringilla hendrerit purus, vitae rhoncus justo cursus eget. Donec at
+ rhoncus neque.
+ In a euismod lacus.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
+ ultrices, magna a 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>
+ elit, <span class="quote">underneath</span> in dignissim neque libero et est. Nunc posuere varius tortor ut
+ interdum. Nam a enim eget mi lobortis
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
+ sodales. Donec in ipsum ultricies, 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.
+ odio faucibus. <span class="quote">but what I do</span> Vivamus ullamcorper efficitur turpis in euismod. Nulla
+ at
+ est a nisi convallis aliquam.
+ Mauris semper orci a mauris pharetra, in fringilla sem ornare. Nulla at est a nisi convallis aliquam. Nulla
+ semms herb. Serchng forr bst wayy to doo.Mauris semper orci a mauris pharetra, ultricesin fringilla sem ornare.
+ Nulla at
+ est a nisi convallis aliquam. Nulla semms herb. Serchng forr bst wayy to doo.Nulla magna nisi,<span
+ class="quote">that defines
+ me.</span> pellentesque sit
+ amet eleifend eu, tristique suscipit nibh. Quisque iaculis sem at consequat
+ sodales. Donec in ipsum ultricies, augue. Proin rutrum
+ dictum turpis, ut lacinia nisl
</p>
<!-- Footer Section -->
001.Vision/script.js
@@ -3,6 +3,10 @@ const content = document.querySelector('.content');
let x, y, offsetX, offsetY, isDragging = false;
const padding = 100; // Padding in px
+let cheatcodes = [];
+const cheatkeys = ["b", "a", "t", "m", "n"];
+let cheatTimeout;
+
function updateClipPath() {
const rect = scope.getBoundingClientRect();
const insetTop = rect.top;
@@ -57,3 +61,33 @@ scope.onmousedown = (e) => {
window.onload = centerScope;
window.onresize = centerScope;
+
+
+// Cheat Code Section
+document.addEventListener("keydown", event => {
+ if (cheatkeys.includes(event.key.toLowerCase())) {
+ cheatcodes.push(event.key.toLowerCase());
+ clearTimeout(cheatTimeout);
+ cheatTimeout = setTimeout(() => {
+ cheatcodes = [];
+ }, 3000);
+
+ if (cheatcodes.length == 6) {
+ let cheatcode = cheatcodes.join("");
+ if (cheatcode === "batman") {
+ scope.style.transition = "width 0.5s ease-in, height 0.5s ease-in, top 0.5s ease-in, left 0.5s ease-in"
+ scope.style.top = 0
+ scope.style.left = 0
+ scope.style.width = "100%"
+ scope.style.height = "100%"
+ content.style.transition = "clip-path 0.5s ease-in"
+ content.style.clipPath = "inset(0px)"
+ }
+ cheatcodes = [];
+ }
+ } else {
+ cheatcodes = [];
+ }
+});
+
+
001.Vision/style.css
@@ -35,7 +35,15 @@ body{
font-spacing: 10px;
padding: 100px;
line-height: 2;
+ text-align: justify;
}
+.quote{
+ color : var(--gold);
+ opacity: 100%;
+ font-size: 20px;
+ text-decoration: underline;
+ text-underline-offset: 5px;
+}
\ No newline at end of file