API tools faq
paste
Advertisement
EaterSun

Contoh Transisi Page 1-2

EaterSun
May 10th, 2025
192
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.06 KB | Source Code | 0 0
raw download clone embed print report
  1. index.html:
  2. <!DOCTYPE html>
  3. <html lang="id">
  4.  
  5. <head>
  6.     <meta charset="UTF-8" />
  7.     <title>Halaman 1</title>
  8.     <link rel="stylesheet" href="style.css" />
  9. </head>
  10.  
  11. <body>
  12.     <div class="container">
  13.         <h1>Halaman Pertama</h1>
  14.         <p>Ini adalah halaman pertama.</p>
  15.         <a href="#" onclick="showFloatingPage()">Buka Halaman Kedua</a>
  16.     </div>
  17.  
  18.     <!-- Halaman Kedua (mengambang & transparan) -->
  19.     <div id="floatingPage">
  20.         <div class="glass">
  21.             <iframe src="halaman2.html"></iframe>
  22.             <button onclick="closeFloatingPage()">Tutup</button>
  23.         </div>
  24.     </div>
  25.  
  26.     <script>
  27.         function showFloatingPage() {
  28.             document.getElementById("floatingPage").style.display = "flex";
  29.         }
  30.  
  31.         function closeFloatingPage() {
  32.             document.getElementById("floatingPage").style.display = "none";
  33.         }
  34.     </script>
  35. </body>
  36.  
  37. </html>
  38.  
  39. home.html:
  40. <!DOCTYPE html>
  41. <html lang="id">
  42.  
  43. <head>
  44.     <meta charset="UTF-8" />
  45.     <title>Halaman 2</title>
  46.     <style>
  47.         body {
  48.             font-family: Arial, sans-serif;
  49.             margin: 20px;
  50.             color: white;
  51.         }
  52.     </style>
  53. </head>
  54.  
  55. <body>
  56.     <h2>Halaman Kedua</h2>
  57.     <p>Ini adalah isi halaman kedua yang transparan seperti kaca.</p>
  58. </body>
  59.  
  60. </html>
  61.  
  62. style.css:
  63. /* Gaya dasar body */
  64. body {
  65.     font-family: Arial, sans-serif;
  66.     background: url('https://source.unsplash.com/1600x900/?technology') no-repeat center center fixed;
  67.     background-size: cover;
  68.     margin: 0;
  69.     padding: 20px;
  70. }
  71.  
  72. /* Kontainer halaman pertama */
  73. .container {
  74.     background: rgba(255, 255, 255, 0.8);
  75.     padding: 20px;
  76.     border-radius: 8px;
  77.     max-width: 600px;
  78.     margin: 0 auto;
  79.     box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  80. }
  81.  
  82. /* Halaman kedua (mengambang) */
  83. #floatingPage {
  84.     display: none;
  85.     position: fixed;
  86.     top: 0;
  87.     left: 0;
  88.     width: 100vw;
  89.     height: 100vh;
  90.     background: rgba(0, 0, 0, 0.3);
  91.     -webkit-backdrop-filter: blur(6px);
  92.     backdrop-filter: blur(6px);
  93.     z-index: 999;
  94.     justify-content: center;
  95.     align-items: center;
  96. }
  97.  
  98. /* Efek kaca transparan */
  99. .glass {
  100.     width: 80%;
  101.     height: 70%;
  102.     background: rgba(255, 255, 255, 0.1);
  103.     border-radius: 15px;
  104.     -webkit-backdrop-filter: blur(15px);
  105.     backdrop-filter: blur(15px);
  106.     border: 1px solid rgba(255, 255, 255, 0.2);
  107.     padding: 20px;
  108.     box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
  109.     display: flex;
  110.     flex-direction: column;
  111. }
  112.  
  113. /* iframe halaman kedua */
  114. iframe {
  115.     flex: 1;
  116.     border: none;
  117.     width: 100%;
  118.     border-radius: 10px;
  119.     background: transparent;
  120. }
  121.  
  122. /* Tombol tutup */
  123. button {
  124.     margin-top: 10px;
  125.     padding: 10px;
  126.     background: rgba(255, 255, 255, 0.2);
  127.     border: none;
  128.     color: white;
  129.     font-weight: bold;
  130.     border-radius: 8px;
  131.     cursor: pointer;
  132.     -webkit-backdrop-filter: blur(5px);
  133.     backdrop-filter: blur(5px);
  134.     transition: background 0.3s;
  135. }
  136.  
  137. button:hover {
  138.     background: rgba(255, 255, 255, 0.4);
  139. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!