Skip to content

Instantly share code, notes, and snippets.

@gnat

gnat/index.html

Last active July 7, 2024 01:55
Show Gist options
  • Save gnat/f094e947b3a785e1ed6b7def979132ae to your computer and use it in GitHub Desktop.
Save gnat/f094e947b3a785e1ed6b7def979132ae to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. gnat revised this gist Feb 25, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -43,7 +43,7 @@
    let topY = mouseY - e.bounds.y
    let center = { x: leftX - e.bounds.width / 2, y: topY - e.bounds.height / 2 }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 2}0deg)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    </script>
  2. gnat revised this gist Feb 25, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -21,7 +21,7 @@
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
    me:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
    me div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    me > div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    </style>
    <script>
    me().on('mouseenter', (ev) => {
  3. gnat revised this gist Feb 25, 2024. 1 changed file with 2 additions and 2 deletions.
    4 changes: 2 additions & 2 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,13 +15,13 @@
    <div></div>
    <style>
    me {
    position: relative; width: 300px; height: 400px; padding: 1em;
    position: relative; width: 300px; height: 400px; padding: 1em;
    font-weight: bold; text-align: right; text-shadow: 0 0 4px #000; color: #ddd;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
    me:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    me div { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    </style>
    <script>
    me().on('mouseenter', (ev) => {
  4. gnat revised this gist Feb 25, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,7 +15,7 @@
    <div></div>
    <style>
    me {
    width: 300px; height: 400px; padding: 1em; position: relative;
    position: relative; width: 300px; height: 400px; padding: 1em;
    font-weight: bold; text-align: right; text-shadow: 0 0 4px #000; color: #ddd;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
  5. gnat revised this gist Feb 25, 2024. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@
    <style>
    me {
    width: 300px; height: 400px; padding: 1em; position: relative;
    color: #ddd; font-weight: bold; text-align: right; text-shadow: 0 0 4px #000;
    font-weight: bold; text-align: right; text-shadow: 0 0 4px #000; color: #ddd;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
  6. gnat revised this gist Feb 25, 2024. 1 changed file with 3 additions and 7 deletions.
    10 changes: 3 additions & 7 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -15,10 +15,9 @@
    <div></div>
    <style>
    me {
    font-weight: bold; padding: 1em; text-align: right; color: #ddd; text-shadow: 0 0 4px #000;
    width: 300px; height: 400px;
    width: 300px; height: 400px; padding: 1em; position: relative;
    color: #ddd; font-weight: bold; text-align: right; text-shadow: 0 0 4px #000;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
    position: relative;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
    me:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
    @@ -42,10 +41,7 @@
    let mouseY = ev.clientY
    let leftX = mouseX - e.bounds.x
    let topY = mouseY - e.bounds.y
    let center = {
    x: leftX - e.bounds.width / 2,
    y: topY - e.bounds.height / 2
    }
    let center = { x: leftX - e.bounds.width / 2, y: topY - e.bounds.height / 2 }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
  7. gnat revised this gist Feb 25, 2024. 1 changed file with 11 additions and 11 deletions.
    22 changes: 11 additions & 11 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -25,6 +25,17 @@
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    </style>
    <script>
    me().on('mouseenter', (ev) => {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', e.rotateToMouse)
    })
    me().on('mouseleave', (ev) => {
    let e = me(ev)
    e.off('mousemove', e.rotateToMouse)
    e.style.transform = ''
    e.style.background = ''
    })
    me().rotateToMouse = (ev) => {
    let e = me(ev)
    let mouseX = ev.clientX
    @@ -39,17 +50,6 @@
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    me().on('mouseenter', (ev) => {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', e.rotateToMouse)
    })
    me().on('mouseleave', (ev) => {
    let e = me(ev)
    e.off('mousemove', e.rotateToMouse)
    e.style.transform = ''
    e.style.background = ''
    })
    </script>
    </div>
    </body>
  8. gnat revised this gist Feb 25, 2024. 1 changed file with 16 additions and 18 deletions.
    34 changes: 16 additions & 18 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -9,22 +9,6 @@
    html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(#666, #222); }
    </style>
    <script>
    function rotateToMouse(ev) {
    let e = me(ev)
    let mouseX = ev.clientX
    let mouseY = ev.clientY
    let leftX = mouseX - e.bounds.x
    let topY = mouseY - e.bounds.y
    let center = {
    x: leftX - e.bounds.width / 2,
    y: topY - e.bounds.height / 2
    }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    </script>

    <div>
    3D Card
    @@ -41,14 +25,28 @@
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    </style>
    <script>
    me().rotateToMouse = (ev) => {
    let e = me(ev)
    let mouseX = ev.clientX
    let mouseY = ev.clientY
    let leftX = mouseX - e.bounds.x
    let topY = mouseY - e.bounds.y
    let center = {
    x: leftX - e.bounds.width / 2,
    y: topY - e.bounds.height / 2
    }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    me().on('mouseenter', (ev) => {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', rotateToMouse)
    e.on('mousemove', e.rotateToMouse)
    })
    me().on('mouseleave', (ev) => {
    let e = me(ev)
    e.off('mousemove', rotateToMouse)
    e.off('mousemove', e.rotateToMouse)
    e.style.transform = ''
    e.style.background = ''
    })
  9. gnat revised this gist Feb 25, 2024. 1 changed file with 3 additions and 3 deletions.
    6 changes: 3 additions & 3 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -22,13 +22,13 @@
    }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('.glow', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    me('div', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    </script>

    <div class="card">
    <div>
    3D Card
    <div class="glow"></div>
    <div></div>
    <style>
    me {
    font-weight: bold; padding: 1em; text-align: right; color: #ddd; text-shadow: 0 0 4px #000;
  10. gnat revised this gist Feb 25, 2024. 1 changed file with 5 additions and 4 deletions.
    9 changes: 5 additions & 4 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -46,10 +46,11 @@
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', rotateToMouse)
    })
    me().on('mouseleave', (e) => {
    me(e).off('mousemove', rotateToMouse)
    me(e).style.transform = ''
    me(e).style.background = ''
    me().on('mouseleave', (ev) => {
    let e = me(ev)
    e.off('mousemove', rotateToMouse)
    e.style.transform = ''
    e.style.background = ''
    })
    </script>
    </div>
  11. gnat revised this gist Feb 25, 2024. 1 changed file with 0 additions and 8 deletions.
    8 changes: 0 additions & 8 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -53,13 +53,5 @@
    })
    </script>
    </div>

    <div>
    🌐 <a href="https://github.com/gnat/surreal">surreal</a> + 🌐 <a href="https://github.com/gnat/css-scope-inline">css-scope-inline</a>
    <style>
    me { position: absolute; bottom: 10vh; color: #aaa; margin-top: 100px; text-shadow: 0 0 4px #000; }
    me a { color: #aaa; text-decoration: none; border-bottom: 2px dashed; }
    </style>
    </div>
    </body>
    </html>
  12. gnat revised this gist Feb 25, 2024. 1 changed file with 13 additions and 6 deletions.
    19 changes: 13 additions & 6 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -7,7 +7,7 @@
    <style>
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(white, #efefef); }
    body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(#666, #222); }
    </style>
    <script>
    function rotateToMouse(ev) {
    @@ -21,25 +21,24 @@
    y: topY - e.bounds.height / 2
    }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 2}0deg)`
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 3}0deg)`
    me('.glow', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    </script>


    <div class="card">
    3D Card
    <div class="glow"></div>
    <style>
    me {
    font-weight: bold; padding: 1em; text-align: right; color: #ddd;
    font-weight: bold; padding: 1em; text-align: right; color: #ddd; text-shadow: 0 0 4px #000;
    width: 300px; height: 400px;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background-image: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png); background-size: cover;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png) center; background-size: cover;
    position: relative;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
    me:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); }
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; border-radius: 10px; background-image: radial-gradient(circle at 90% -20%, #ffffff33, #0000000f); }
    </style>
    <script>
    me().on('mouseenter', (ev) => {
    @@ -54,5 +53,13 @@
    })
    </script>
    </div>

    <div>
    🌐 <a href="https://github.com/gnat/surreal">surreal</a> + 🌐 <a href="https://github.com/gnat/css-scope-inline">css-scope-inline</a>
    <style>
    me { position: absolute; bottom: 10vh; color: #aaa; margin-top: 100px; text-shadow: 0 0 4px #000; }
    me a { color: #aaa; text-decoration: none; border-bottom: 2px dashed; }
    </style>
    </div>
    </body>
    </html>
  13. gnat created this gist Feb 25, 2024.
    58 changes: 58 additions & 0 deletions index.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,58 @@
    <html>
    <head>
    <script src="https://gnat.github.io/css-scope-inline/script.js"></script>
    <script src="https://gnat.github.io/surreal/surreal.js"></script>
    </head>
    <body>
    <style>
    * { box-sizing: border-box; }
    html, body { width: 100%; height: 100%; display: flex; justify-content: center; align-items: center; }
    body { font-family: system-ui, sans-serif; perspective: 1500px; background: linear-gradient(white, #efefef); }
    </style>
    <script>
    function rotateToMouse(ev) {
    let e = me(ev)
    let mouseX = ev.clientX
    let mouseY = ev.clientY
    let leftX = mouseX - e.bounds.x
    let topY = mouseY - e.bounds.y
    let center = {
    x: leftX - e.bounds.width / 2,
    y: topY - e.bounds.height / 2
    }
    let distance = Math.sqrt(center.x**2 + center.y**2)
    e.style.transform = `scale3d(1.07, 1.07, 1.0) rotate3d(${center.y / 100}, ${-center.x / 100}, 0, ${Math.log(distance)* 2}0deg)`
    me('.glow', e).style.backgroundImage = `radial-gradient(circle at ${center.x * 2 + e.bounds.width/2}px ${center.y * 2 + e.bounds.height/2}px, #ffffff55, #0000000f)`
    }
    </script>


    <div class="card">
    3D Card
    <div class="glow"></div>
    <style>
    me {
    font-weight: bold; padding: 1em; text-align: right; color: #ddd;
    width: 300px; height: 400px;
    box-shadow: 0 1px 5px #00000099; border-radius: 10px; background-image: url(https://i.postimg.cc/MHKFqnq6/1679116297740936.png); background-size: cover;
    position: relative;
    transition-duration: 300ms; transition-property: transform, box-shadow; transition-timing-function: ease-out; transform: rotate3d(0);
    }
    me:hover { transition-duration: 150ms; box-shadow: 0 5px 20px 5px #00000044; }
    me .glow { position: absolute; width: 100%; height: 100%; left: 0; top: 0; background-image: radial-gradient(circle at 50% -20%, #ffffff22, #0000000f); }
    </style>
    <script>
    me().on('mouseenter', (ev) => {
    let e = me(ev)
    e.bounds = e.getBoundingClientRect()
    e.on('mousemove', rotateToMouse)
    })
    me().on('mouseleave', (e) => {
    me(e).off('mousemove', rotateToMouse)
    me(e).style.transform = ''
    me(e).style.background = ''
    })
    </script>
    </div>
    </body>
    </html>