Home-theater-designers
คุณต้องการให้เว็บไซต์ของคุณดูยอดเยี่ยม --- แต่ทักษะการพัฒนาเว็บของคุณยังขาดอยู่
อย่าสิ้นหวัง! คุณไม่จำเป็นต้องรู้ CSS หรือ PHP เพื่อสร้างไซต์แฟนซีพร้อมเอฟเฟกต์สุดเจ๋ง แท็ก HTML ง่ายๆ และรู้วิธีคัดลอกและวางจะช่วยได้
เพื่อให้คุณเริ่มต้นใช้งานเอฟเฟกต์ HTML เจ๋งๆ ได้ เราได้รวบรวมเทมเพลตโค้ดเอฟเฟกต์ HTML ฟรีเหล่านี้ พวกเขาจะปรับปรุงการทำงานและประสบการณ์ผู้ใช้ของไซต์ของคุณ โดยไม่ทำลายธนาคาร แม้ว่าส่วนใหญ่จะเป็น HTML โค้ดเจ๋งๆ เหล่านี้อาจมี CSS และ PHP อยู่บ้าง
1. เอฟเฟกต์พารัลแลกซ์สุดเจ๋งด้วย HTML
คุณอาจเคยเห็น Parallax Effect ที่ใช้บนเว็บไซต์ที่มีโฆษณาออนไลน์ ในขณะที่คุณเลื่อนลงบทความ ภาพพื้นหลังดูเหมือนจะเลื่อน ด้วยความเร็วที่ต่างกัน หรือมีโฆษณาปรากฏขึ้น
หรือบางทีภาพพื้นหลังอาจเปลี่ยนไปเมื่อคุณเยี่ยมชมส่วนต่างๆ ของไซต์ เป็นเอฟเฟกต์สุดเจ๋งที่เพิ่มความลึกของภาพให้กับเนื้อหาและเหมาะอย่างยิ่งแม้ว่าคุณจะไม่ทำก็ตาม เข้าใจโค้ด HTML พื้นฐาน .
คุณสามารถเล่นกับเอฟเฟกต์และคัดลอกรหัสสำหรับa เอฟเฟกต์การเลื่อนพารัลแลกซ์อย่างง่ายจาก W3Schools .
ในเวอร์ชันที่ซับซ้อนที่สุด เอฟเฟกต์นี้คือการรวมกันของ HTML, CSS และ JS
ไปข้างหน้าและดึงรหัสสำหรับด้านบน เอฟเฟกต์พารัลแลกซ์ส่วนหัว/ส่วนท้ายจาก CodePen .
2. รหัสกล่องความคิดเห็น HTML ที่เลื่อนได้
นี่เป็นองค์ประกอบ HTML ที่เรียบง่ายแต่มีประโยชน์ ซึ่งช่วยให้คุณบรรจุตัวอย่างข้อความขนาดยาวให้อยู่ในรูปแบบกะทัดรัดได้ วิธีนี้จะไม่ใช้พื้นที่ทั้งหมดบนหน้า
คุณสามารถเล่นกับสีและขนาดของกล่องข้อความเพื่อให้ตรงกับความต้องการของคุณ
ป้อนข้อมูล:
Putting some text in this box will let you see how large it can stretch to - eventually the scrollbars should show, enabling you to scroll through the text. That's it! :) หากคุณต้องการอะไรที่แปลกใหม่กว่านี้ คุณสามารถดึงรหัสสำหรับ กล่องความคิดเห็นที่ปรับแต่งได้จาก Quackit .
พวกเขามีเทมเพลตหลายแบบ แต่คุณยังสามารถใช้ตัวแก้ไขเพื่อเปลี่ยนและทดสอบ (รัน) โค้ดที่คุณกำหนดเองได้ด้วยตนเอง
3. เคล็ดลับ HTML สุดเจ๋ง: ข้อความที่เน้นสี
ด้วยวิธีง่ายๆแท็ก HTML คุณสามารถเพิ่มเอฟเฟกต์เจ๋ง ๆ ให้กับข้อความหรือรูปภาพของคุณได้ โปรดทราบว่าไม่ใช่ทั้งหมดที่ทำงานข้ามเบราว์เซอร์ ที่กล่าวถึงในที่นี้ใช้งานได้กับ Google Chrome, Microsoft Edge และ Mozilla Firefox
เอฟเฟกต์ข้อความ HTML นี้เน้นข้อความระหว่างแท็ก
ป้อนข้อมูล:
Your highlighted text here.การสาธิตเอาต์พุต:
4. เพิ่มภาพพื้นหลังให้กับข้อความ
ในทำนองเดียวกัน คุณสามารถเปลี่ยนสีของข้อความหรือเพิ่มรูปภาพพื้นหลังได้ อันนี้ดูดีถ้าขนาดตัวอักษรของข้อความใหญ่กว่า
ป้อนข้อมูล:
MakeUseOf presents...เอฟเฟกต์เดียวกันนี้ทำได้โดยการเพิ่มองค์ประกอบสไตล์และฟอนต์ให้กับข้อความใน a แท็ก
เปลี่ยนตำแหน่งสำรอง iphone windows 10
การสาธิตเอาต์พุต:
5. เคล็ดลับ HTML ที่มีประโยชน์ในการเพิ่มคำแนะนำเครื่องมือชื่อเรื่อง
คำแนะนำเครื่องมือชื่อเรื่องจะปรากฏขึ้นเมื่อคุณเลื่อนเมาส์ไปวางเหนือข้อความหรือรูปภาพ 'ที่มีการปรับแต่ง' คุณเคยเห็นสิ่งเหล่านี้ใช้บนเว็บไซต์ในรูปภาพ ข้อความที่เชื่อมโยง หรือแม้แต่รายการเมนูในแอปเดสก์ท็อป ใช้โค้ด HTML นี้เพื่อเพิ่มคำแนะนำเครื่องมือให้กับข้อความธรรมดาบนหน้าเว็บของคุณ
ป้อนข้อมูล:
Move your mouse over me!การสาธิตเอาต์พุต:
6. เคล็ดลับ HTML ที่เจ๋งที่สุด: ข้อความเลื่อนหรือล้ม
เมื่อคุณค้นหา 'marquee html' บน Google คุณจะค้นพบไข่อีสเตอร์ตัวน้อย ดูจำนวนผลการค้นหาแบบเลื่อนที่ด้านบน? นั่นคือเอฟเฟกต์ที่สร้างขึ้นโดยแท็กปะรำที่ล้าสมัยในขณะนี้ แม้ว่าเอฟเฟกต์ข้อความ HTML สุดเจ๋งนี้เลิกใช้แล้ว แต่เบราว์เซอร์ส่วนใหญ่ยังคงรองรับ
ป้อนข้อมูล:
I wanna scroll with it, baby!การสาธิตเอาต์พุต:
คุณสามารถ เพิ่มคุณสมบัติเพิ่มเติม เพื่อควบคุมลักษณะการเลื่อน สีพื้นหลัง ทิศทาง ความสูง และอื่นๆ ดูแลอย่างไรก็ตาม; ผลกระทบเหล่านี้อาจเกิดการระคายเคืองได้หากใช้มากเกินไป
สำหรับเอฟเฟกต์ข้อความที่ตกลงมา มุ่งหน้าสู่ Quackit อีกครั้ง และคัดลอกโค้ดปะรำที่ปรับแต่งได้สูง
7. สร้างเมนูสวิตช์สุดเจ๋งด้วย HTML
เทคนิค HTML ที่เจ๋งที่สุดคือเอฟเฟกต์ HTML แบบไดนามิก อย่างไรก็ตาม มักใช้สคริปต์ นี่คือเอฟเฟกต์หนึ่งสำหรับเมนูที่คุณเห็นว่าเนียนมาก
มันซับซ้อนกว่าแท็ก HTML ทั่วไปเล็กน้อยเพราะใช้งานได้กับสไตล์ชีตและสคริปต์ ข้อดีคือคุณไม่จำเป็นต้องอัปโหลดไฟล์ CSS หรือสคริปต์เพื่อให้ทำงานได้ เพียงวางโค้ดต่อไปนี้ลงในส่วนของเว็บไซต์ของคุณ
ป้อนข้อมูล:
.menutitle{
cursor:pointer;
margin-bottom: 5px;
background-color:#ECECFF;
color:#000000;
width:140px;
padding:2px;
text-align:center;
font-weight:bold;
/*/*/border:1px solid #000000;/* */
}.submenu{
margin-bottom: 0.5em;
}
/***********************************************
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/var persistmenu='yes' //'yes' or 'no'. Make sure each SPAN content contains an incrementing ID starting at 1 (id='sub1', id='sub2', etc)
var persisttype='sitewide' //enter 'sitewide' for menu to persist across site, 'local' for this page onlyif (document.getElementById){ //DynamicDrive.com change
document.write('n')
document.write('.submenu{display: none;}n')
document.write('n')
}function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById('masterdiv').getElementsByTagName('span'); //DynamicDrive.com change
if(el.style.display != 'block'){ //DynamicDrive.com change
for (var i=0; i if (ar[i].className=='submenu') //DynamicDrive.com change
ar[i].style.display = 'none';
}
el.style.display = 'block';
}else{
el.style.display = 'none';
}
}
}function get_cookie(Name) {
var search = Name + '='
var returnvalue = '';
if (document.cookie.length > 0) {
offset = document.cookie.indexOf(search)
if (offset != -1) {
offset += search.length
end = document.cookie.indexOf(';', offset);
if (end == -1) end = document.cookie.length;
returnvalue=unescape(document.cookie.substring(offset, end))
}
}
return returnvalue;
}function onloadfunction(){
if (persistmenu=='yes'){
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=get_cookie(cookiename)
if (cookievalue!='')
document.getElementById(cookievalue).style.display='block'
}
}function savemenustate(){
var inc=1, blockid=''
while (document.getElementById('sub'+inc)){
if (document.getElementById('sub'+inc).style.display=='block'){
blockid='sub'+inc
break
}
inc++
}
var cookiename=(persisttype=='sitewide')? 'switchmenu' : window.location.pathname
var cookievalue=(persisttype=='sitewide')? blockid+';path=/' : blockid
document.cookie=cookiename+'='+cookievalue
}if (window.addEventListener)
window.addEventListener('load', onloadfunction, false)
else if (window.attachEvent)
window.attachEvent('onload', onloadfunction)
else if (document.getElementById)
window.onload=onloadfunctionif (persistmenu=='yes' && document.getElementById)
window.onunload=savemenustate
And this code goes wherever you want the dynamic menu to appear.
Topics
- Browsers/Addons
- Web Apps
- How-To Tips
- Cool Software
...and more!
Staff Writers
- Karl Gechlik
- Tina
- Varun Kashyap
...and more!
Miscellaneous
- About
- Contact
- Archives
- Disclaimer
การสาธิตเอาต์พุต:
ขออภัย เราไม่สามารถแสดงผลนี้ที่นี่ แต่ที่มาที่ไปคือ ไดนามิกไดรฟ์ มีสำเนาการทำงานของเอฟเฟกต์ HTML แบบไดนามิกนี้
8. รับสเปรดชีต HTML ด้วย Tableizer
หากคุณต้องการแสดงสเปรดชีตบนไซต์ของคุณ ให้ Tableizer! แปลงข้อมูลของคุณเป็นตาราง HTML เพียงวางข้อมูลดิบจาก Excel, Google Doc หรือสเปรดชีตอื่น ๆ ลงในเครื่องมือแปลงที่ tableizer.journalistopia.com . ปรับแต่ง ตัวเลือกตาราง จากนั้นคลิก Tableize It เพื่อรับเอาต์พุต HTML
นี่อาจเป็นหนึ่งในโค้ด HTML ที่เจ๋งที่สุดสำหรับเว็บไซต์ของคุณ เช่น Tableize It! ทำงานหนักทั้งหมด
คลิก คัดลอก HTML ไปยังคลิปบอร์ด เพื่อคัดลอกโค้ด HTML และเพิ่มลงในเว็บไซต์ของคุณ พิจารณาแก้ไขสีพื้นหลังเพื่อให้ดูเท่ขึ้นมาก
วิธีการกู้คืนไฟล์ที่ถูกลบบน Android
แม้ว่านี่จะไม่ใช่เอฟเฟกต์ HTML แต่ก็ค่อนข้างสะดวก
โค้ด HTML และเอฟเฟกต์สุดเจ๋งสำหรับเว็บไซต์ของคุณ
พลังของ HTML, CSS และ JavaScript นำเสนอตัวเลือกที่ไม่จำกัดสำหรับเอฟเฟกต์ที่น่าทึ่งบนเว็บไซต์ของคุณ ต้องการมากขึ้น?
- HTML Goodies ให้คุณยิ่งใหญ่ไอเดียแท็ก
- ไดนามิกไดรฟ์ มีสคริปต์ HTML แบบไดนามิกที่น่าทึ่งมากมาย
- Quackit เสนอรหัส HTML ที่ยอดเยี่ยม
เราได้แสดงรหัส HTML เจ๋งๆ แปดรหัสที่คุณสามารถคัดลอกเพื่อปรับปรุงเว็บไซต์ของคุณได้ แม้ว่าจะแตกต่างกัน แต่ก็ใช้งานได้ง่ายตราบเท่าที่คุณรู้เทคนิคการเข้ารหัส HTML พื้นฐาน
แบ่งปัน แบ่งปัน ทวีต อีเมล 17 ตัวอย่างโค้ด HTML ง่ายๆ ที่คุณเรียนรู้ได้ใน 10 นาทีต้องการสร้างหน้าเว็บพื้นฐานหรือไม่? เรียนรู้ตัวอย่าง HTML เหล่านี้และลองใช้ในโปรแกรมแก้ไขข้อความเพื่อดูว่ามีลักษณะอย่างไรในเบราว์เซอร์ของคุณ
อ่านต่อไป หัวข้อที่เกี่ยวข้อง- การเขียนโปรแกรม
- HTML
- การพัฒนาเว็บ
- เครื่องมือของผู้ดูแลเว็บ
รองบรรณาธิการด้านความปลอดภัย, Linux, DIY, การเขียนโปรแกรม และผู้ผลิตพอดคาสต์ที่มีประโยชน์มาก โดยมีประสบการณ์อย่างกว้างขวางในการสนับสนุนเดสก์ท็อปและซอฟต์แวร์ Christian เป็นผู้สนับสนุนนิตยสาร Linux Format เป็นนักประดิษฐ์ Raspberry Pi คนรักเลโก้และแฟนเกมย้อนยุค
เพิ่มเติมจาก Christian Cawleyสมัครรับจดหมายข่าวของเรา
เข้าร่วมจดหมายข่าวของเราสำหรับเคล็ดลับทางเทคนิค บทวิจารณ์ eBook ฟรี และดีลพิเศษ!
คลิกที่นี่เพื่อสมัครสมาชิก