เรามักคิดว่าภาพพื้นหลังเป็นพื้นผิวหรือสิ่งที่ให้ความเปรียบต่างสำหรับเนื้อหาที่อ่านออกได้ กล่าวคือ ไม่ใช่เนื้อหาจริงๆ หากเป็นเนื้อหา คุณอาจเข้าถึง <img>
อย่างไรก็ตามการเข้าถึงและอะไรก็ตาม
แต่ก็มีบางครั้งที่ ตำแหน่ง or ขนาด ของภาพพื้นหลังอาจอยู่ระหว่างขั้วของเนื้อหาและการตกแต่ง บริบทคือราชาใช่ไหม หากเราเปลี่ยนตำแหน่งของภาพพื้นหลัง อาจสื่อบริบทหรือประสบการณ์ได้มากขึ้นเล็กน้อย
ยังไง? ลองดูตัวอย่างบางส่วนที่ฉันเห็นลอยอยู่รอบๆ
เมื่อเราเริ่มต้น ฉันจะเตือนว่าการสาธิตเหล่านี้มีเส้นบางๆ ระหว่างรูปภาพที่ใช้สำหรับตกแต่งและรูปภาพที่ใช้เป็นเนื้อหา ความแตกต่างนี้มีผลโดยนัยในการเข้าถึงโดยที่ไม่ประกาศพื้นหลังให้โปรแกรมอ่านหน้าจอทราบ ถ้าภาพของคุณเป็นภาพจริงๆจากนั้นอาจพิจารณา <img>
แท็กที่เหมาะสม alt
ข้อความ. และในขณะที่เรากำลังพูดถึงการช่วยสำหรับการเข้าถึง ก็เป็นความคิดที่ดีที่จะ พิจารณาการตั้งค่าการเคลื่อนไหวของผู้ใช้ เช่นกัน
แสดงให้ฉันเห็นมากขึ้น!
Chris Coyier มีการสาธิตเล็กๆ น้อยๆ จากเมื่อหลายปีก่อน
การสาธิตนี้ใช้งานได้จริงในหลายๆ ด้าน เพราะเป็นแนวทางที่เหมาะสมในการแสดงโฆษณาในเนื้อหา คุณมีสำนวนการขายและรูปภาพที่น่าดึงดูดเพื่อเสริม
ข้อจำกัดใหญ่สำหรับโฆษณาส่วนใหญ่ ผมขอพนันเลยก็คืออสังหาริมทรัพย์ที่มีอยู่อย่างจำกัด ฉันไม่รู้ว่าคุณเคยต้องวางโฆษณาลงบนหน้าเว็บหรือไม่ แต่ฉันเคยขอรูปภาพที่มีขนาดพิกเซลตรงตามข้อกำหนดของผู้ลงโฆษณา ดังนั้นเนื้อหาจึงพอดีกับพื้นที่
แต่การสาธิตของ Chris ช่วยบรรเทาปัญหาเรื่องพื้นที่ วางเมาส์เหนือรูปภาพและดูทั้งการเคลื่อนไหวและขนาด ผู้ใช้ได้รับจริง ข้อมูลเพิ่มเติม บริบทของผลิตภัณฑ์มากกว่าที่พวกเขาจะมีเมื่อรูปภาพอยู่ในตำแหน่งเดิม นั่นคือ win-win ใช่ไหม? ผู้ลงโฆษณาสามารถสร้างภาพที่สะดุดตาโดยไม่กระทบต่อบริบท ในขณะเดียวกัน ผู้ใช้จะได้รับคุณค่าเพิ่มขึ้นเล็กน้อยจากส่วนที่เปิดเผยใหม่ของรูปภาพ
หากคุณดูที่มาร์กอัปของการสาธิต คุณจะสังเกตเห็นว่ามันค่อนข้างเป็นอย่างที่คุณคาดหวัง นี่คือเวอร์ชันย่อ:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
เราอาจเล่นลิ้นเรื่องความหมายได้เล็กน้อย แต่นั่นไม่ใช่ประเด็น เรามีคอนเทนเนอร์ที่มีการเชื่อม <div>
สำหรับภาพพื้นหลังและอื่น ๆ <div>
เพื่อเก็บเนื้อหา
ส่วนสำคัญอยู่ที่:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
ไม่เลวใช่ไหม? เรากำหนดขนาดให้คอนเทนเนอร์และตั้งค่าภาพพื้นหลังที่ไม่ซ้ำและวางตำแหน่งที่ขอบล่างซ้าย
เคล็ดลับที่แท้จริงคือ JavaScript เราจะใช้มันเพื่อรับตำแหน่งเมาส์และออฟเซ็ตของคอนเทนเนอร์ จากนั้นแปลงค่านั้นเป็นสเกลที่เหมาะสมเพื่อตั้งค่า background-position
. ก่อนอื่น มาฟังการเคลื่อนไหวของเมาส์บน .container
ธาตุ:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
จากตรงนี้ เราสามารถใช้คอนเทนเนอร์ได้ offsetX
และ offsetY
คุณสมบัติ. แต่เราจะไม่ใช้ค่าเหล่านี้โดยตรง เนื่องจากค่าของพิกัด X นั้นน้อยกว่าที่เราต้องการ และพิกัด Y นั้นใหญ่กว่า เราจะต้องเล่นรอบเล็กน้อยเพื่อหาค่าคงที่ที่เราสามารถใช้เป็นตัวคูณ
มันค่อนข้างสัมผัสและรู้สึก แต่ฉันพบแล้ว 1.32
และ 0.455
ทำงานได้อย่างสมบูรณ์แบบสำหรับพิกัด X และ Y ตามลำดับ เราคูณค่าชดเชยด้วยค่าเหล่านั้น ต่อท้าย a px
หน่วยบนผลลัพธ์แล้วนำไปใช้กับ background-position
ค่า
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
สุดท้ายนี้ เรายังสามารถรีเซ็ตตำแหน่งพื้นหลังให้กลับไปเป็นต้นฉบับได้หากผู้ใช้ออกจากที่เก็บรูปภาพ
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
เนื่องจากเราใช้ CSS-Tricks ฉันจะเสนอว่าเราจะทำเวอร์ชันที่ถูกกว่านี้มากได้โดยใช้การเปลี่ยนโฮเวอร์เล็กน้อยในวานิลลา CSS:
วาดภาพให้ใหญ่ขึ้น
ไม่ต้องสงสัยเลยว่าคุณเคยไปที่ร้านขายเสื้อผ้าออนไลน์หรืออะไรก็ตาม แล้วเจอฟีเจอร์ ol' zoom-on-hover
รูปแบบนี้มีไว้เพื่อให้รู้สึกเหมือนอยู่ตลอดไป (Dylan Winn-Brown แบ่งปันแนวทางของเขา ย้อนกลับไปใน 2016) แต่นั่นเป็นเพียงข้อพิสูจน์ (ฉันหวังว่า) ถึงประโยชน์ของมัน ผู้ใช้จะได้รับบริบทมากขึ้นเมื่อซูมเข้าและเข้าใจได้ดีขึ้นเกี่ยวกับการเย็บของสเวตเตอร์หรือสิ่งที่คุณมี
มีสองส่วนด้วยกัน: the ภาชนะ และ แว่นขยาย. คอนเทนเนอร์เป็นสิ่งเดียวที่เราต้องการในมาร์กอัป เนื่องจากเราจะใส่องค์ประกอบแว่นขยายในระหว่างการโต้ตอบของผู้ใช้ ดู HTML ของเราสิ!
<div class="container"></div>
ใน CSS เราจะสร้าง width
และ height
ตัวแปรเก็บขนาดของแว่นขยายนั่นเอง แล้วเราจะให้สิ่งนั้น .container
รูปร่างบางอย่างและก background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
มีบางสิ่งที่เรารู้เกี่ยวกับแว่นขยายก่อนที่เราจะเห็นด้วยซ้ำ และเราสามารถกำหนดรูปแบบเหล่านั้นได้ล่วงหน้า โดยเฉพาะตัวแปรที่กำหนดไว้ก่อนหน้านี้สำหรับ .maginifier
's width
และ height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
มันเป็นสี่เหลี่ยมเล็ก ๆ ที่วางตำแหน่งอย่างสมบูรณ์ซึ่งใช้ เดียวกัน ไฟล์ภาพพื้นหลังเป็น .container
. โปรดทราบว่าที่นี่ใช้ฟังก์ชันการคำนวณเพื่อแปลงค่าที่ไม่มีหน่วยในตัวแปรเป็นพิกเซลเท่านั้น อย่าลังเลที่จะจัดการตามที่เห็นสมควรตราบเท่าที่กำจัดการซ้ำซ้อนในโค้ดของคุณ
ทีนี้มาดู JavaScript ที่ดึงข้อมูลทั้งหมดนี้มารวมกัน ก่อนอื่นเราต้องเข้าถึงตัวแปร CSS ที่กำหนดไว้ก่อนหน้านี้ เราจะใช้สิ่งนี้ในหลาย ๆ ที่ในภายหลัง จากนั้นเราต้องได้รับตำแหน่งเมาส์ภายในคอนเทนเนอร์เพราะนั่นคือค่าที่เราจะใช้สำหรับตำแหน่งพื้นหลังของแว่นขยาย
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
สิ่งที่เราต้องการคือ mousemove
ผู้ฟังเหตุการณ์บน .container
. จากนั้นเราจะใช้ event.pageX
or event.pageY
คุณสมบัติเพื่อรับพิกัด X หรือ Y ของเมาส์ แต่เพื่อให้ได้ แน่นอน ตำแหน่งสัมพัทธ์ของเมาส์บนองค์ประกอบ เราจำเป็นต้องลบตำแหน่งขององค์ประกอบหลักออกจากตำแหน่งเมาส์ที่เราได้รับจาก JavaScript ด้านบน วิธีที่ “ง่าย” ในการทำเช่นนี้คือการใช้ getBoundingClientRect()
ซึ่งจะส่งคืนขนาดขององค์ประกอบและตำแหน่งที่สัมพันธ์กับวิวพอร์ต
สังเกตว่าฉันพิจารณาการเลื่อนดูอย่างไร หากมีน้ำล้นให้ลบหน้าต่างออก pageX
และ pageY
การชดเชยจะทำให้เอฟเฟกต์ทำงานตามที่คาดไว้
ก่อนอื่นเราจะสร้างแว่นขยาย div ต่อไปเราจะสร้าง mousemove
ฟังก์ชันและเพิ่มลงในที่เก็บรูปภาพ ในฟังก์ชันนี้ เราจะให้แอตทริบิวต์ class แก่แว่นขยาย เราจะคำนวณตำแหน่งของเมาส์และให้แว่นขยายเป็นค่าด้านซ้ายและด้านบนที่เราคำนวณไว้ก่อนหน้านี้
ไปข้างหน้าและสร้าง magnifier
เมื่อเราได้ยิน mousemove
เหตุการณ์ใน .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
ตอนนี้เราต้องแน่ใจว่ามันมีชื่อคลาสที่เราสามารถกำหนดขอบเขตเป็น CSS ได้:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
วิดีโอตัวอย่างที่ฉันแสดงก่อนหน้านี้วางตำแหน่งแว่นขยายไว้นอกคอนเทนเนอร์ เราจะรักษาความเรียบง่ายนี้ไว้และวางทับไว้บนคอนเทนเนอร์แทนเมื่อเมาส์เคลื่อนที่ เราจะใช้ if
คำสั่งเพื่อกำหนดตำแหน่งของแว่นขยายก็ต่อเมื่อมีค่า X และ Y มากขึ้น or เท่ากัน เป็นศูนย์และ น้อยลง กว่าความกว้างหรือความสูงของคอนเทนเนอร์ ที่ควรให้มันอยู่ในขอบเขต อย่าลืมลบความกว้างและความสูงของแว่นขยายออกจากค่า X และ Y
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
สุดท้าย แต่ไม่ท้ายสุด… เราต้องเล่นกับภาพพื้นหลังของแว่นขยายสักหน่อย ประเด็นทั้งหมดคือผู้ใช้จะได้รับมุมมองที่ใหญ่ขึ้นของภาพพื้นหลังตามตำแหน่งที่โฮเวอร์เกิดขึ้น เรามากำหนดแว่นขยายที่เราสามารถใช้ขยายขนาดสิ่งต่างๆ ได้ จากนั้นเราจะกำหนดตัวแปรสำหรับความกว้างและความสูงของภาพพื้นหลัง เพื่อให้เรามีบางอย่างที่จะยึดมาตราส่วนนั้น และตั้งค่าทั้งหมดเหล่านั้นบน .magnifier
รูปแบบ:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
ลองนำพิกัด X และ Y ของภาพแว่นขยายมาใช้กับ .magnifier
ธาตุ background-position
. เช่นเดียวกับตำแหน่งแว่นขยายก่อนหน้านี้ เราจำเป็นต้องลบความกว้างและความสูงของแว่นขยายออกจากค่า X และ Y โดยใช้ตัวแปร CSS
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
ธาดา!
ทำให้เป็นภาพยนตร์
คุณเคยเห็น เอฟเฟกต์ Ken Burns? เป็นเรื่องคลาสสิกและไร้กาลเวลาที่รูปภาพมีขนาดใหญ่กว่าคอนเทนเนอร์ที่อยู่ จากนั้นสไลด์และสเกลก็ช้าราวกับทาก ภาพยนตร์สารคดีแทบทุกเรื่องในโลกนี้ดูเหมือนจะใช้สำหรับภาพนิ่ง หากคุณมี Apple TV แสดงว่าคุณเคยเห็นบนโปรแกรมรักษาหน้าจออย่างแน่นอน
มี มากมาย of ตัวอย่างมากกว่าที่ CodePen ถ้าคุณต้องการได้รับความคิดที่ดีกว่า
คุณจะเห็นว่ามีหลายวิธีในการดำเนินการนี้ บางคนใช้จาวาสคริปต์ อื่นๆ เป็น CSS 100% ฉันแน่ใจว่าวิธีการของ JavaScript นั้นดีสำหรับการใช้งานบางกรณี แต่ถ้าเป้าหมายเป็นเพียงการปรับขนาดรูปภาพอย่างละเอียด CSS ก็เหมาะสมอย่างยิ่ง
เราสามารถทำให้สิ่งต่าง ๆ เพิ่มขึ้นเล็กน้อยโดยใช้พื้นหลังหลายอันแทนที่จะเป็นแบบเดียว หรือถ้าเราจะขยายกฎให้ใช้องค์ประกอบแทนภาพพื้นหลัง เราสามารถใช้แอนิเมชั่นเดียวกันกับพื้นหลังทั้งหมดและใช้เส้นประ animation-delay
เพื่อทำให้เอฟเฟกต์ซวนเซ
มีหลายวิธีในการทำเช่นนี้แน่นอน! สามารถปรับให้เหมาะสมด้วยตัวแปร Sass และ/หรือ CSS เฮ็คบางทีคุณสามารถดึงมันออกมาด้วยซิงเกิ้ล <div>
ถ้าเป็นเช่นนั้นแบ่งปันในความคิดเห็น!
โบนัส: ทำให้มันสมจริง
ฉันไม่รู้ว่ามีอะไรเจ๋งกว่าของ Sarah Drasner ไหม ปากกา "สุขสันต์วันฮาโลวีน"… และนั่นมาจากปี 2016! เป็นตัวอย่างที่ดีในการเลเยอร์พื้นหลังและย้ายด้วยความเร็วที่แตกต่างกันเพื่อสร้างประสบการณ์ที่เกือบจะเหมือนภาพยนตร์ เจ๋งมาก!
GSAP เป็นตัวขับเคลื่อนหลักที่นั่น แต่ฉันคิดว่าเราสามารถสร้างเวอร์ชันที่สรุปแล้วซึ่งแปลแต่ละเลเยอร์พื้นหลังจากซ้ายไปขวาด้วยความเร็วที่แตกต่างกัน แน่นอนว่าไม่เจ๋งเท่า แต่แน่นอนว่าเป็นประสบการณ์พื้นฐาน ต้องทำให้แน่ใจว่าจุดเริ่มต้นและจุดสิ้นสุดของภาพพื้นหลังแต่ละภาพนั้นสอดคล้องกัน จึงจะทำซ้ำได้อย่างไม่มีสะดุดเมื่อภาพเคลื่อนไหวซ้ำ
แค่นี้ก่อน! ค่อนข้างเรียบร้อยที่เราสามารถใช้พื้นหลังได้มากกว่าพื้นผิวและความเปรียบต่าง ฉันมั่นใจมากว่ายังมีปฏิสัมพันธ์ที่ชาญฉลาดอีกมากมายที่เราสามารถนำไปใช้กับพื้นหลังได้ Temani Afif ทำอย่างนั้นกับ เอฟเฟ็กต์โฮเวอร์สำหรับลิงก์. คุณมีอะไรในใจ? แบ่งปันกับฉันในความคิดเห็น!
- เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
- เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
- ที่มา: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- เกี่ยวกับเรา
- ข้างบน
- แน่นอน
- อย่างแน่นอน
- เข้า
- การเข้าถึง
- ลงชื่อเข้าใช้
- จริง
- Ad
- โฆษณา
- ก่อน
- ทั้งหมด
- แล้ว
- และ
- ภาพเคลื่อนไหว
- ประกาศ
- อื่น
- Apple
- ใช้
- เข้าใกล้
- วิธีการ
- เหมาะสม
- รอบ
- สินทรัพย์
- กลับ
- พื้นหลัง
- background-image
- ภูมิหลัง
- ไม่ดี
- ฐาน
- ตาม
- baseline
- เป็นพื้น
- เพราะ
- ก่อน
- ดีกว่า
- ระหว่าง
- ใหญ่
- ที่ใหญ่กว่า
- บิต
- ชายแดน
- สร้าง
- พวง
- คำนวณ
- คำนวณ
- กรณี
- อย่างแน่นอน
- เปลี่ยนแปลง
- ราคาถูก
- ชั้น
- คลาสสิก
- เสื้อผ้า
- รหัส
- ประนีประนอม
- พิจารณา
- คงเส้นคงวา
- คงที่
- ภาชนะ
- เนื้อหา
- สิ่งแวดล้อม
- ตรงกันข้าม
- แปลง
- เย็น
- ประสานงาน
- ได้
- คอร์ส
- หน้าปก
- สร้าง
- CSS
- แดช หรือ Dash
- กำหนด
- การสาธิต
- DID
- ความแตกต่าง
- ต่าง
- มิติ
- โดยตรง
- แสดง
- เอกสาร
- สารคดี
- ไม่
- Dont
- สงสัย
- คนขับรถ
- หล่น
- ในระหว่าง
- แต่ละ
- ก่อน
- ขอบ
- ผล
- ผลกระทบ
- องค์ประกอบ
- การกำจัด
- ทำให้มั่นใจ
- ที่ดิน
- แม้
- เหตุการณ์
- เคย
- ทุกๆ
- เผง
- ตัวอย่าง
- ตัวอย่าง
- ออกจาก
- แสดง
- คาดหวัง
- ที่คาดหวัง
- ประสบการณ์
- พิเศษ
- หวือหวา
- ลักษณะ
- สองสาม
- เนื้อไม่มีมัน
- ฟิล์ม
- หา
- ปลาย
- ชื่อจริง
- พอดี
- ที่ลอย
- ตลอดไป
- พบ
- ฟรี
- ราคาเริ่มต้นที่
- ฟังก์ชัน
- ได้รับ
- ให้
- กระจก
- Go
- เป้าหมาย
- ไป
- ดี
- ยิ่งใหญ่
- ความสูง
- โปรดคลิกที่นี่เพื่ออ่านรายละเอียดเพิ่มเติม
- ถือ
- ความหวัง
- โฉบ
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- อย่างไรก็ตาม
- HTML
- HTTPS
- ฉันเป็น
- ความคิด
- ภาพ
- ภาพ
- ผลกระทบ
- สำคัญ
- in
- ในอื่น ๆ
- แทน
- ปฏิสัมพันธ์
- ปฏิสัมพันธ์
- ปัญหา
- IT
- ตัวเอง
- JavaScript
- เก็บ
- พระมหากษัตริย์
- ทราบ
- ที่มีขนาดใหญ่
- ชั้น
- ชั้น
- การ จำกัด
- ถูก จำกัด
- Line
- น้อย
- ดู
- หลัก
- ทำ
- ในขณะเดียวกัน
- มีคุณสมบัติตรงตาม
- อาจ
- ใจ
- ข้อมูลเพิ่มเติม
- มากที่สุด
- การเคลื่อนไหว
- ย้าย
- การเคลื่อนไหว
- ย้าย
- การย้าย
- หลาย
- ภูมิหลังที่หลากหลาย
- ชื่อ
- จำเป็นต้อง
- ถัดไป
- จำนวน
- เสนอ
- ชดเชย
- ONE
- ออนไลน์
- การปรับให้เหมาะสม
- เป็นต้นฉบับ
- อื่นๆ
- ผลิตภัณฑ์อื่นๆ
- ด้านนอก
- แบบแผน
- ชิ้น
- ขว้าง
- พิกเซล
- สถานที่
- สถานที่
- เพลโต
- เพลโตดาต้าอินเทลลิเจนซ์
- เพลโตดาต้า
- เล่น
- จุด
- ตำแหน่ง
- ตำแหน่ง
- ตำแหน่ง
- บวก
- ประยุกต์
- สวย
- ป้องกัน
- ก่อนหน้านี้
- อาจ
- ผลิตภัณฑ์
- เหมาะสม
- คุณสมบัติ
- คุณสมบัติ
- ให้
- ดึง
- มาถึง
- ผู้อ่าน
- จริง
- อสังหาริมทรัพย์
- ทำซ้ำ
- ผล
- รับคืน
- เปิดเผย
- ราก
- กฎระเบียบ
- วิ่ง
- ขาย
- เดียวกัน
- Sass
- ขนาด
- ตาชั่ง
- ขอบเขต
- จอภาพ
- โปรแกรมอ่านหน้าจอ
- การเลื่อน
- ได้อย่างลงตัว
- ดูเหมือนว่า
- อรรถศาสตร์
- ชุด
- หลาย
- รูปร่าง
- Share
- ที่ใช้ร่วมกัน
- น่า
- ง่าย
- ง่ายดาย
- เดียว
- ขนาด
- สไลด์
- ช้า
- มีขนาดเล็กกว่า
- So
- ของแข็ง
- บาง
- บางสิ่งบางอย่าง
- บางแห่ง
- ช่องว่าง
- เฉพาะ
- ความเร็ว
- เครื่องเทศ
- สี่เหลี่ยม
- เริ่มต้น
- ข้อความที่เริ่ม
- งบ
- จัดเก็บ
- สไตล์
- เหมาะสม
- ยิ่งใหญ่
- TAG
- เอา
- การ
- การพูดคุย
- จะ
- พื้นที่
- โลก
- สิ่ง
- สิ่ง
- ไม่มีเวลา
- ครั้ง
- ไปยัง
- ร่วมกัน
- โทน
- ด้านบน
- การเปลี่ยนแปลง
- จริง
- กลับ
- tv
- เป็นปกติ
- หน่วย
- ใช้
- ผู้ใช้งาน
- ความคุ้มค่า
- ความคุ้มค่า
- รุ่น
- วีดีโอ
- รายละเอียด
- นาฬิกา
- วิธี
- อะไร
- ที่
- ในขณะที่
- ทั้งหมด
- วิกิพีเดีย
- จะ
- ภายใน
- ไม่มี
- คำ
- งาน
- โลก
- จะ
- X
- ปี
- คุณ
- ของคุณ
- ลมทะเล
- เป็นศูนย์
- ซูมเข้า