تست - فراغیب

تفاوت با ویرایش جدیدتر ←

دیداریویکی‌متن

نسخهٔ ‏۱ اوت ۲۰۲۶، ساعت ۰۹:۴۸

</html -->

<!DOCTYPE html> اسکرول متن روی پس‌زمینه ثابت

متن اسکرول شونده

این یک نمونه متن طولانی است تا بتوانید حالت اسکرول شدن را مشاهده کنید.

همانطور که می‌بینید، متن‌ها به راحتی بالا و پایین می‌روند، اما تصویر پس‌زمینه در جای خود ثابت مانده است و حرکت نمی‌کند.

استفاده از background-attachment: fixed; کلید اصلی این افکت است.

این تکنیک در طراحی‌های مدرن برای ایجاد عمق (Parallax Effect) بسیار کاربرد دارد.

متن بیشتر برای تست اسکرول...

لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. همان لورم ایپسوم است.

بخش انتهایی متن برای اطمینان از اسکرول کامل.

تمام شد! امیدوارم این کد برای پروژه شما مفید باشد.

@@ خط ۱: / خط ۱: @@
+<!-- html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>پس‌زمینه ثابت با متن اسکرولی</title>
+    <style>
+        /* تنظیمات پایه برای حذف فاصله‌های اضافی */
+        body, html {
+            margin: 0;
+            padding: 0;
+            height: 100%;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+        }
+        /* بخش اصلی که پس‌زمینه در آن قرار دارد */
+        .background-container {
+            /* آدرس عکس خود را در قسمت url جایگزین کنید */
+            background-image: url('https://dl.faraghaib.ir/m/104/m104denizdoor1.jpg');
+            /* نکته اصلی اینجاست: این خط باعث ثابت ماندن عکس می‌شود */
+            background-attachment: fixed;
+            /* تنظیمات برای اینکه عکس کل صفحه را پر کند و وسط باشد */
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+            min-height: 100vh;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            padding: 50px 20px;
+        }
+        /* استایل کادر یا محتوایی که روی عکس قرار می‌گیرد */
+        .content-box {
+            background-color: rgba(255, 255, 255, 0.85); /* رنگ سفید با کمی شفافیت */
+            padding: 40px;
+            border-radius: 15px;
+            max-width: 800px;
+            width: 100%;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+            line-height: 1.8;
+            text-align: justify;
+        }
+        h1 {
+            color: #fff;
+            text-align: center;
+        }
+        p {
+            color: #fff;
+            font-size: 1.1rem;
+        }
+    </style>
+</head>
+<body>
+        <div class="content-box">
+          <div class="background-container">
+            <h1>عنوان متن شما</h1>
+            <p>
+                این یک متن نمونه است. همانطور که می‌بینید، وقتی صفحه را به سمت پایین اسکرول می‌کنید،
+                تصویر پس‌زمینه در جای خود ثابت می‌ماند و فقط این کادر سفید و متن‌های داخل آن حرکت می‌کنند.
+            </p>
+            <p>
+                این تکنیک در طراحی وب بسیار محبوب است زیرا حس عمق (Parallax effect) ایجاد می‌کند
+                و باعث می‌شود طراحی سایت شما حرفه‌ای‌تر به نظر برسد.
+            </p>
+            <!-- تکرار متن برای ایجاد اسکرول -->
+</html -->
 <!DOCTYPE html>
-<html lang="en">
+<html lang="fa" dir="rtl">
 <head>
-  <title>Bootstrap Example</title>
+    <meta charset="UTF-8">
-  <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>اسکرول متن روی پس‌زمینه ثابت</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
-  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+        /* استایل بدنه برای نمایش بهتر */
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            height: 100vh;
+            margin: 0;
+            background-color: #f0f0f0;
+            font-family: Tahoma, Arial, sans-serif;
+        }
+        /* کادر اصلی */
+        .scroll-container {
+            width: 400px;
+            height: 300px;
+            border: 5px solid #333;
+            border-radius: 15px;
+            overflow-y: auto; /* اجازه اسکرول عمودی */
+            position: relative;
+            /* تنظیمات تصویر پس‌زمینه */
+            background-image: url('https://picsum.photos/800/600'); /* آدرس عکس خود را اینجا قرار دهید */
+            background-size: cover;
+            background-position: center;
+            /* نکته اصلی اینجاست: این خط باعث می‌شود عکس ثابت بماند */
+            background-attachment: fixed;
+            /* برای خوانایی بهتر متن روی عکس، یک لایه نیمه‌شفاف اضافه می‌کنیم */
+            box-shadow: 0 10px 30px rgba(0,0,0,0.3);
+        }
+        /* ایجاد یک لایه تیره روی عکس برای خوانایی متن (اختیاری) */
+        .scroll-container::before {
+            content: "";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.4); /* رنگ سیاه با شفافیت ۴۰ درصد */
+            z-index: 1;
+        }
+        /* استایل متن داخل کادر */
+        .content {
+            position: relative;
+            z-index: 2; /* قرارگیری متن روی لایه تیره */
+            padding: 20px;
+            color: white;
+            line-height: 1.8;
+            font-size: 18px;
+            text-align: justify;
+        }
+        /* زیباسازی نوار اسکرول (برای مرورگرهای Webkit) */
+        .scroll-container::-webkit-scrollbar {
+            width: 8px;
+        }
+        .scroll-container::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .scroll-container::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+    </style>
 </head>
 <body>
-<div class="container mt-3">
+    <div class="scroll-container">
-  <h2>Horizontal Direction</h2>
+        <div class="content">
-  <p>Use .flex-row to make the flex items appear side by side (default):</p>
+            <h2>متن اسکرول شونده</h2>
-  <div class="d-flex flex-row bg-secondary mb-3">
+            <p>این یک نمونه متن طولانی است تا بتوانید حالت اسکرول شدن را مشاهده کنید.</p>
-    <div class="p-2 bg-info">Flex item 1</div>
+            <p>همانطور که می‌بینید، متن‌ها به راحتی بالا و پایین می‌روند، اما تصویر پس‌زمینه در جای خود ثابت مانده است و حرکت نمی‌کند.</p>
-    <div class="p-2 bg-warning">Flex item 2</div>
+            <p>استفاده از <code>background-attachment: fixed;</code> کلید اصلی این افکت است.</p>
-    <div class="p-2 bg-primary">Flex item 3</div>
+            <p>این تکنیک در طراحی‌های مدرن برای ایجاد عمق (Parallax Effect) بسیار کاربرد دارد.</p>
-  </div>
+            <p>متن بیشتر برای تست اسکرول...</p>
-  <p>Use .flex-row-reverse to right-align the direction:</p>
+            <p>لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. همان لورم ایپسوم است.</p>
-  <div class="d-flex flex-row-reverse bg-secondary">
+            <p>بخش انتهایی متن برای اطمینان از اسکرول کامل.</p>
-    <div class="p-2 bg-info">Flex item 1</div>
+            <p>تمام شد! امیدوارم این کد برای پروژه شما مفید باشد.</p>
-    <div class="p-2 bg-warning">Flex item 2</div>
+        </div>
-    <div class="p-2 bg-primary">Flex item 3</div>
+    </div>
-  </div>
-</div>
 </body>
 </html>