Advertisement
Guest User

Untitled

a guest
Nov 18th, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.50 KB | None | 0 0
  1. <html lang="en">
  2. <head>
  3. <meta charset="UTF-8">
  4. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  5. <meta http-equiv="X-UA-Compatible" content="ie=edge">
  6. <title>Document</title>
  7. <style>
  8. body {
  9. margin: 0;
  10. }
  11. #app > main {
  12. width: 100vw;
  13. height: 100vh;
  14. overflow-y: auto;
  15. overflow-x: auto;
  16. display: flex;
  17. align-items: center;
  18. justify-content: center;
  19. backdrop-filter: blur(30px);
  20. perspective: 200px;
  21. }
  22. #background-under {
  23. position: fixed;
  24. top: -30vh;
  25. bottom: -30vh;
  26. left: -30vw;
  27. right: -30vw;
  28. background: url("https://discord.freeappsw.space/images/bg14.jpg");
  29. background-size: cover;
  30. background-position-x: center;
  31. background-position-y: center;
  32. z-index: -3;
  33. }
  34. .c {
  35. padding: 50px;
  36. background-color: #aaaa;
  37. transform: rotate3d(1, 1, 0, 45deg);
  38. }
  39. </style>
  40. </head>
  41. <body>
  42. <div id="app">
  43. <div id="background-under" v-bind:style="{filter: z, top:top+'vh', bottom:bottom + 'vh', right:right + 'vw', left:left+'vw'}"></div>
  44. <main @mousemove="mm">
  45. <div class="c" v-bind:style="{transform: rot}">
  46. <h1>Logowanie</h1>
  47. <form action="/">
  48. <input type="text">
  49. <input type="password">
  50. </form>
  51. </div>
  52. </main>
  53. </div>
  54. <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  55. <script>
  56. var app = new Vue({
  57. el: '#app',
  58.  
  59. computed: {
  60. rot() {
  61. let rx = this.y / window.innerHeight;
  62. rx = rx * 2;
  63. rx = rx - 1;
  64. rx *= -0.5;
  65.  
  66. let ry = this.x / window.innerWidth;
  67. ry = ry * 2;
  68. ry = ry - 1;
  69. ry *= 0.5;
  70. return "rotateX(" + rx + "rad) rotateY(" + ry + "rad)";
  71. console.log(rx);
  72. },
  73. z() {
  74. return "hue-rotate(" + ((this.x / (window.innerWidth) * 120) + (this.y / (window.innerHeight) * 120)) + "deg)";
  75. }
  76. },
  77. data: {
  78. x: 0,
  79. y: 0,
  80. top: -10,
  81. left: -10,
  82. right: -10,
  83. bottom: -10,
  84. tActive: false
  85. },
  86. methods: {
  87. mm(event) {
  88. this.x = event.pageX;
  89. this.y = event.pageY;
  90. let iw = window.innerWidth;
  91. let ih = window.innerHeight;
  92.  
  93. // calculate top
  94. let top = (-10) - ((((ih / 2) - this.y) / ih) * 10);
  95. let bottom = (-10) + ((((ih / 2) - this.y) / ih) * 10);
  96. this.top = top;
  97. this.bottom = bottom;
  98.  
  99. let left = (-10) - ((((iw / 2) - this.x) / iw) * 10);
  100. let right = (-10) + ((((iw / 2) - this.x) / iw) * 10);
  101. this.left = left;
  102. this.right = right;
  103. }
  104. }
  105. })
  106. </script>
  107. </body>
  108. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement