เทคนิค CSS

สำหรับนักพัฒนาเว็บเมื่อต้องการสร้างเอฟเฟกต์การเลื่อนพารัลแลกซ์จะมีเทคนิคต่างๆ หนึ่งในเทคนิคดังกล่าวคือการใช้Cascaded Styling Sheets(CSS).

CSS อธิบายว่าองค์ประกอบ HTML แสดงบนหน้าจออย่างไร หนึ่งสามารถสร้างไฟล์ CSS และสามารถใช้สำหรับเว็บไซต์ที่สมบูรณ์ การเพิ่มไฟล์ CSS นั้นง่ายกว่าการเพิ่มสไตล์ให้กับองค์ประกอบ HTML แต่ละรายการและจัดการในส่วนต่างๆของหน้าเว็บ

Note- วิธีการบางอย่างที่กล่าวถึงด้านล่างในบทนี้เป็นวิธีการเฉพาะสำหรับคอมพิวเตอร์เดสก์ท็อปไม่ใช่สำหรับอุปกรณ์พกพา จะกล่าวถึงในขั้นตอนเมื่อเทคนิคเฉพาะไม่เหมาะสำหรับอุปกรณ์พกพา

เมื่อพิจารณาจาก CSS offloads ในรูปวาดพิเศษทั้งหมดในรูปแบบวัตถุเอกสาร (DOM) มีการใช้ประโยชน์จากการเร่งฮาร์ดแวร์มากขึ้นและเอฟเฟกต์ที่ราบรื่นโดยไม่ทำให้ CPU เป็นภาระ

วิธีตำแหน่งสัมบูรณ์

วิธีนี้มักใช้เพื่อสร้างเอฟเฟกต์พารัลแลกซ์เนื่องจากมีน้ำหนักค่อนข้างเบาเมื่อเทียบกับตัวเลือกอื่น ๆ ตำแหน่งของภาพพื้นหลังจะคงที่โดยสัมพันธ์กับเนื้อหาอื่น ๆ บนหน้าจอ ในตัวอย่างที่กล่าวถึงด้านล่างคุณจะเห็นวิธีการใช้ความมหัศจรรย์ของ CSS

ในส่วนนี้เราจะพูดถึงสองวิธีสำหรับวิธีตำแหน่งสัมบูรณ์ -

พื้นหลังเดี่ยว
พื้นหลังหลายแบบ

วิธีพื้นหลังเดียว

ในวิธีนี้เราจะสร้างไฟล์สองไฟล์ในโฟลเดอร์เดียวกัน ปฏิบัติตามขั้นตอนด้านล่างเพื่อจุดประสงค์เดียวกัน -

Step 1

เราต้องสร้างไฟล์สองไฟล์ในโฟลเดอร์เดียวกัน: ไฟล์แรกที่มีมาร์กอัป HTML และไฟล์ที่สองด้วยโค้ด CSS

Step 2

ตอนนี้ให้เรากำหนดมาร์กอัป HTML ของเรา สังเกตรหัสที่ระบุด้านล่าง -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   <body>  
      <div class = "BgContainer">  
         <div class = "Parallax">  
            <h1> Welcome! </h1>   
         </div>  
         <div class = "FgContainer">  
            <div class = "MainContent">  
               <p>
                  Here we will go ahead with some content which will really vary 
                  according to the content on your site. I am just typing out this 
                  content as it is sometimes good to engage user than the usual lorem 
                  ipsum text!
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
                  <br/>
                  <br/>  
                  
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do 
                  eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
                  ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut 
                  aliquip ex ea commodo consequat. Duis aute irure dolor in 
                  reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla 
                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in 
                  culpa qui officia deserunt mollit anim id est laborum.  
               </p>  
            </div>  
         </div>  
      </div>  
   </body> 
   
</html>

Step 3

เปิดแผ่นจดบันทึก คัดลอกและวางข้อมูลโค้ดด้านบน

เมื่อคุณบันทึกไฟล์ภายใต้ Save as typeเลือก All Files. ป้อนชื่อไฟล์ของคุณตามต้องการ แต่ต้องตามด้วยนามสกุล -.html ดังแสดงในภาพหน้าจอด้านล่าง

Step 4

เมื่อบันทึกไฟล์แล้วให้สร้างไฟล์อื่นใน notepad และวางรหัสที่ระบุด้านล่าง -

html, body {  
   font-size: 18px;  
   line-height: 28px;  
}  

h1 {  
   letter-spacing: -15px;  
   color: white;  
   text-align: center;  
   font-size: 200px;  
   font-weight: 800;  
   line-height: 200px;
}    

BgContainer {  
   perspective: 1px;  
   transform-style: preserve-3d;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: scroll;  
}  

FgContainer {  
   position: relative;  
   display: block;  
   background-color: white;  
   z-index: 1;  
} 
 
MainContent {  
   max-width: 750px;  
   margin: 0 auto;  
   padding: 75px 0;  
} 
 
p {  
   margin: 75px 0;  
} 
 
.Parallax {  
   display: flex;  
   flex: 1 0 auto;  
   position: relative;  
   z-index: -1;  
   height: 100vh;  
   justify-content: center;  
   align-items: center;  
   transform: translateZ(-1px) scale(2);  
   background: url(https://cdn.pixabay.com/photo/2017/02/07/09/02/background-2045380_640.jpg);  
   background-color: rgb(250,228, 216);
}

ดังที่คุณเห็นในขั้นตอนสุดท้ายเมื่อคุณบันทึกไฟล์ภายใต้ Save as พิมพ์เลือก All Files. ป้อนชื่อไฟล์ของคุณตามต้องการและเพิ่มนามสกุล.css ไปเลย

การวิเคราะห์รหัส

ให้เราเข้าใจว่าส่วนใดของโค้ดที่รับผิดชอบต่อเอฟเฟกต์พารัลแลกซ์ งานที่สำคัญที่สุดสำหรับพารัลแลกซ์ทำโดยใช้มุมมองและกฎการเปลี่ยนแปลง เอ่ยถึงline 15ในข้อมูลโค้ดด้านบน มุมมองถูกสร้างขึ้นสำหรับBgContainerอันดับแรก. สิ่งนี้เริ่มต้นแพลตฟอร์มสำหรับกฎการเปลี่ยนแปลง

ใน Parallax ตู้คอนเทนเนอร์เริ่มต้นที่บรรทัดที่ 40 transform กฎในบรรทัดที่ 48 พุช BgContainer div เป็นพื้นหลังโดยใช้การแปล (-1px)

คุณสามารถแก้ไขค่าสำหรับพารามิเตอร์การแปลและมาตราส่วนเพื่อแก้ไขความลึกของพารัลแลกซ์

เมื่อคุณเปิดไฟล์ html เอฟเฟกต์พารัลแลกซ์จะมองเห็นได้ดังที่แสดงด้านล่าง -

Note - สำหรับบทช่วยสอนที่เหลือจะถือว่าผู้อ่านสามารถสร้างไฟล์ HTML และ CSS ได้ตามโครงสร้างโฟลเดอร์ที่ให้ไว้ในวิธีการข้างต้น

วิธีการหลายพื้นหลัง

ในวิธีนี้เราจะมีภาพต่างๆปรากฏขึ้นเมื่อผู้ใช้เลื่อนหน้าลง มีภาพด้วยดินสอซึ่งใช้ในการผสมสีที่แตกต่างกันเพื่อแสดงเอฟเฟกต์นี้

สังเกตโค้ดต่อไปนี้สำหรับหน้า HTML ที่แสดงด้านล่าง -

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <h1>Multiple Background Example</h1>  
      <div class = "parallax">  
         <div class = "bg__First">First</div>  
         <div class = "bg__Second">Second</div>  
         <div class = "bg__Third">Third</div>  
         <div class = "bg__Fourth">Fourth</div>  
      </div>  
   </body>
   
</html>

เช่นเดียวกับตัวอย่างก่อนหน้านี้เราจะใช้ styles.cssเก็บไว้ในตำแหน่งเดียวกับไฟล์ HTML นี้ เรามี div ที่แตกต่างกันสามชื่อที่เรียกว่า First, Second, Third และ Fourth

โค้ด CSS สำหรับการเลื่อนพารัลแลกซ์มีให้ด้านล่าง -

body, html {
   height : 100%;  
   font-family : sans-serif;  
}  

.parallax [class*="bg__"] {  
   position : relative;  
   height : 50vh;  
   text-indent : -9999px;  
   background-attachment : fixed;  
   background-position   : top center;  
   background-size       : cover;  
}  
.parallax [class*="bg__"]:nth-child( 2n) {  
   box-shadow : inset 0 0 1em #111;
}  
.parallax .bg__First, .bg__Fourth {  
   height : 100vh;  
}  
.parallax .bg__First {  
   background-image : url("parallax0.png");  
}  
.parallax .bg__Second {  
   background-image : url("parallax1.png");  
}  
.parallax .bg__Third {  
   background-image : url("parallax2.png");    
}  
.parallax .bg__Fourth {  
   background-image : url("parallax1.png");   
}

ที่นี่เราสร้างเอฟเฟกต์พารัลแลกซ์จากบรรทัดที่ 7 คุณสมบัติที่สำคัญที่นี่คือ background-attachment:fixed.

เมื่อใช้คุณสมบัตินี้ภาพแรกที่มีดินสอสีจะยังคงอยู่ที่ด้านบนเสมอ เมื่อคุณเลื่อนลงภาพต่างๆตามที่อธิบายไว้ในบรรทัด 28 จะเริ่มปรากฏขึ้น

ด้วยเหตุนี้คุณจะสามารถเห็นเอฟเฟกต์พารัลแลกซ์ดังแสดงใน gif ด้านล่าง ภาพต่อไปนี้เป็นภาพหน้าจอของตัวอย่างที่เราพิจารณาสำหรับพื้นหลังหลาย ๆ ภาพ

Parallax CSS บริสุทธิ์

ให้เรารวมความรู้จากสองวิธีก่อนหน้านี้และสร้างเอฟเฟกต์ Pure CSS Parallax ขั้นสูง

ความแตกต่างจะเป็นวิธีที่เราจัดเรียงไฟล์ image องค์ประกอบและ z-transformทรัพย์สิน. คำอธิบายคุณสมบัติจะอยู่หลังโค้ด CSS

สร้างไฟล์ HTML ด้วยรหัสต่อไปนี้โดยใช้วิธีการปกติจาก Notepad

<html>  
   <head>  
      <link rel = "stylesheet" href = "styles.css">  
   </head>  
   
   <body>  
      <div class = "wrapParallax">  
         <div class = "parallax_one">  
            <img src = "https://cdn.pixabay.com/photo/2018/06/16/15/36/water-lily-3478924_640.jpg" alt = "">  
         </div>  
         <div class = "parallax_two">  
            <h1>Pure CSS Parllax Advanced Level</h1>  
         </div>  
         <div class = "parallax_three">  
            <img src = "https://cdn.pixabay.com/photo/2016/11/29/04/19/beach-1867285_640.jpg" alt = "">  
         </div>  
      </div>  
   </body>
   
</html>

สำหรับไฟล์ CSS รหัสจะได้รับด้านล่าง -

body, html {  
   padding: 0;  
   margin: 0;  
}  

h1 {  
   color: blue;  
   text-align: center;  
   padding: 20px;  
   text-shadow: 0px 0px 10px #fffff;  
}  

img {  
   width:100vw;  
   height:100vh;  
}  

.wrapParallax {
   perspective: 100px;  
   height: 100vh;  
   overflow-x: hidden;  
   overflow-y: auto;  
}  

.parallax {  
   position: absolute;  
   top: 0;  
   bottom: 0;  
   right: 0;  
   left: 0;  
}  

.parallax_one {  
   transform: translateZ(-100px) scale(2)  
}  

.parallax_two {  
   z-index: 10;  
   transform: translateZ(-200px) scale(3)  
}  

.parallax_three {  
   margin-top: 100vh;  
}

การวิเคราะห์รหัส

เราได้แก้ไขตำแหน่งของชั้นแรกใน line 26 โดยใช้ position:absoluteทรัพย์สิน. ตำแหน่งยังฮาร์ดโค้ดเป็น 0

ใน parallax_twoซึ่งเป็นเลเยอร์ที่มีหัวเรื่องเราได้นำไปใช้ z-index: 10เพื่อให้เอฟเฟกต์ลอยไปยังหัวเรื่อง เลเยอร์parallax_three ถูกย้ายไปที่ด้านล่างโดยการให้คุณสมบัติขอบด้านบน

ดังนั้นเราสามารถยกระดับความซับซ้อนในเอฟเฟกต์ Parallax ของเราได้

สังเกตผลดังแสดงในรูปด้านล่าง