Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <meta http-equiv="X-UA-Compatible" content="ie=edge">
- <title>Document</title>
- <style>
- body {
- margin: 0;
- }
- #app > main {
- width: 100vw;
- height: 100vh;
- overflow-y: auto;
- overflow-x: auto;
- display: flex;
- align-items: center;
- justify-content: center;
- backdrop-filter: blur(30px);
- perspective: 200px;
- }
- #background-under {
- position: fixed;
- top: -30vh;
- bottom: -30vh;
- left: -30vw;
- right: -30vw;
- background: url("https://discord.freeappsw.space/images/bg14.jpg");
- background-size: cover;
- background-position-x: center;
- background-position-y: center;
- z-index: -3;
- }
- .c {
- padding: 50px;
- background-color: #aaaa;
- transform: rotate3d(1, 1, 0, 45deg);
- }
- </style>
- </head>
- <body>
- <div id="app">
- <div id="background-under" v-bind:style="{filter: z, top:top+'vh', bottom:bottom + 'vh', right:right + 'vw', left:left+'vw'}"></div>
- <main @mousemove="mm">
- <div class="c" v-bind:style="{transform: rot}">
- <h1>Logowanie</h1>
- <form action="/">
- <input type="text">
- <input type="password">
- </form>
- </div>
- </main>
- </div>
- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- <script>
- var app = new Vue({
- el: '#app',
- computed: {
- rot() {
- let rx = this.y / window.innerHeight;
- rx = rx * 2;
- rx = rx - 1;
- rx *= -0.5;
- let ry = this.x / window.innerWidth;
- ry = ry * 2;
- ry = ry - 1;
- ry *= 0.5;
- return "rotateX(" + rx + "rad) rotateY(" + ry + "rad)";
- console.log(rx);
- },
- z() {
- return "hue-rotate(" + ((this.x / (window.innerWidth) * 120) + (this.y / (window.innerHeight) * 120)) + "deg)";
- }
- },
- data: {
- x: 0,
- y: 0,
- top: -10,
- left: -10,
- right: -10,
- bottom: -10,
- tActive: false
- },
- methods: {
- mm(event) {
- this.x = event.pageX;
- this.y = event.pageY;
- let iw = window.innerWidth;
- let ih = window.innerHeight;
- // calculate top
- let top = (-10) - ((((ih / 2) - this.y) / ih) * 10);
- let bottom = (-10) + ((((ih / 2) - this.y) / ih) * 10);
- this.top = top;
- this.bottom = bottom;
- let left = (-10) - ((((iw / 2) - this.x) / iw) * 10);
- let right = (-10) + ((((iw / 2) - this.x) / iw) * 10);
- this.left = left;
- this.right = right;
- }
- }
- })
- </script>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement