I. Cú pháp
Bấm vào đây
HTML Code:[ANCHOR=#testmoc]Bấm vào đây[/ANCHOR]
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
Cú bấm vừa nãy đã đưa bạn tới đây
Cú pháp và cách sử dụng kết hợp của MOC và ANCHOR rất đơn giản. Đặt thẻ MOC xung quanh phần bạn muốn trỏ tới và cho nó một id riêng biệt trong toàn topic (kể cả ở các post khác nhau).HTML Code:[MOC=testmoc]Cú bấm vừa nãy đã đưa bạn tới đây[/MOC]
Đặt thẻ ANCHOR với #id vừa nãy bạn đặt.HTML Code:[MOC=id]Nội dung trong MOC, có thể là text, ảnh, box[/MOC]
Vậy là xong! Không phức tạp hay cần nhớ nhiều, nhưng ứng dụng của nó thì thú vị vô cùng. Mục lục của bài này là một ví dụ.HTML Code:[ANCHOR=#id]Link này trỏ tới MOC vừa nãy, dù ở post khác cũng tới được[/ANCHOR]
II. Làm giả tab
Bạn không rành cách dùng tabstyle, hoặc muốn tùy biến cái tab theo kiểu khác? Dùng tab tuy ngắn hơn, nhưng dùng bộ đôi MOC/ANCHOR kết hợp với thuộc tính
của box để làm giả tab cũng là một lựa chọn không tồi.HTML Code:overflow: hidden;
Nguyên tắc:
_ Tạo ra 1 box bao ngoài với kích thước xác định, có thuộc tính overflow: hidden;.
_ Bên trong tạo các box nhỏ với kích thước bằng hoặc nhỏ hơn không đáng kể so với box ngoài.
_ Số lượng các box nhỏ = số lượng tab muốn tạo, trong mỗi box nhỏ là nội dung từng tab.
_ Đặt thẻ MOC xung quanh các box nhỏ này.
_ Tạo thanh tiêu đề tab với ANCHOR.
Minh họa:
Ví dụ:
Ex1CodeHTML Code:[margin=500][BOX=;width:500px;height:300px;overflow:hidden;border-left:10px double #FF0000;border-right:10px double #FF0000;||||] [MOC=id1][BOX=;width:500px;height:300px;||||][CENTER][COLOR="#FF0000"]Đây là nội dung của box trong thứ nhất.[/COLOR][/CENTER][/BOX][/MOC] [MOC=id2][BOX=;width:500px;height:300px;||||][CENTER][COLOR="#FF0000"]Đây là nội dung của box trong thứ hai.[/COLOR][/CENTER][/BOX][/MOC] [/BOX] [BOX=;width:500px;||||][limit=250][CENTER][ANCHOR=#id1]Tab 1[/ANCHOR][/CENTER][/limit][limit=250][CENTER][ANCHOR=#id2]Tab 2[/ANCHOR][/CENTER][/limit][clear][/clear][/BOX][/margin]
Kết hợp với font2:
Đây là nội dung tab 3
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.
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.
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.
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.
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.
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.
Đây là nội dung tab 4
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.
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.
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.
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.
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.
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.
Ex2CodeHTML Code:[BOX=#FBCFCF; width:100%; height: 500px; overflow: hidden; display:block; margin:auto; line-height: 25px; color:#755C3B;||||][limit=300][BOX=#755C3B; height: 500px; overflow:hidden; color:#FCFBE3; ||||][ANCHOR=#id3][font2=tab|] Tab 3[/font2][/ANCHOR][ANCHOR=#id4][font2=tab|] Tab 4[/font2][/ANCHOR][/BOX][/limit][BOX=; height: 500px; overflow:hidden; color:#755C3B;||||][MOC=id3][BOX=; height: 500px; overflow:scroll; display:block; margin:auto; padding:20px;||||]Đây là nội dung tab 3 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. 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. 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. 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. 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. 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. [/BOX][/MOC] [MOC=id4][BOX=; height: 500px; overflow:scroll; padding:20px;||||]Đây là nội dung tab 4 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. 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. 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. 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. 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. 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. [/BOX][/MOC] [/BOX][clear][/clear][/BOX] [BOX=; display: none ||||][font2=tab|ff=uvn-banhmi&s=30&cl=FCFBE3&w=300&h=125&bd=2-solid-FCFBE3&al=center][/font2][font2=tab|cl=755C3B&bg=FBCFCF&stt=hover][/font2][font2=tab|cl=755C3B&bg=FCFBE3&stt=active][/font2][/BOX]
III. Đánh lừa thị giác
Ảnh động mà ta nhìn thấy thường là sự kết hợp của nhiều ảnh tĩnh có sự dịch chuyển hợp lý so với nhau, và chạy liên tục nhiều ảnh với tốc độ đủ nhanh. Thông qua việc tương tự với làm giả tab, ta có thể thay khung hình trước mắt người xem để có vẻ như chuyển động đang xảy ra.
Và còn có thể tạo ra những thứ thú vị hơn nữa.
//game over 1 - fell to hole
//game over 2 - no way to win
//win
//start point - B1
//A1
//C1
//C2
//B2
//B3 box on A4
//C3
//B3 box on A3
//C4
//B4
//A4
//A3
//B3 box on B2
//B2 box on B1
//A3 box on B2
//B4 box on B2
//C3 box on B2
//A4 box on B2
//C4 box on B2
//C2 box on B2
//C1 box on B2
//B1 box on B2
//A1 box on B2
BBCode by Fuuka Adachi
.............
//vị trí thứ 2 của background (lùi sang 50px so với vị trí mặc định)
//vị trí thứ 3 của background (lùi sang 100px so với vị trí mặc định)
//vị trí thứ 4 của background (lùi sang 150px so với vị trí mặc định)
//vị trí thứ 5 của background (lùi sang 200px so với vị trí mặc định)
//vị trí thứ 6 của background (lùi sang 250px so với vị trí mặc định)
//vị trí thứ 7 của background (lùi sang 300px so với vị trí mặc định)
//vị trí thứ 8 của background (lùi sang 350px so với vị trí mặc định)
//vị trí thứ 9 của background (lùi sang 400px so với vị trí mặc định)
//vị trí thứ 10 của background (lùi sang 450px so với vị trí mặc định)
//vị trí thứ 11 của background (lùi sang 500px so với vị trí mặc định)
//vị trí thứ 12 của background (lùi sang 550px so với vị trí mặc định)
//vị trí thứ 13 của background (lùi sang 600px so với vị trí mặc định)
//vị trí thứ 14 của background (lùi sang 650px so với vị trí mặc định)
//vị trí thứ 15 của background (lùi sang 700px so với vị trí mặc định)
//dog house (tương tác tại bgpos15)
//buydogfood (tương tác 2 tại bgpos15)
Ra ngoài^
Woof woof woof!
Woof!
Woof woof!
Woof woof!
Woof!
Woof woof!
Woof woof woof!
Woof woof!
Cám ơn bạn! Giờ thì các em chó đã no bụng.
//vị trí thứ 16 của background (lùi sang 750px so với vị trí mặc định)
//vị trí thứ 17 của background (lùi sang 800px so với vị trí mặc định)
//vị trí thứ 18 của background (lùi sang 850px so với vị trí mặc định)
//vị trí thứ 19 của background (lùi sang 900px so với vị trí mặc định)
//vị trí thứ 20 của background (lùi sang 950px so với vị trí mặc định)
//vị trí thứ 21 của background (lùi sang 1000px so với vị trí mặc định)
//vị trí thứ 22 của background (lùi sang 1050px so với vị trí mặc định)
//vị trí thứ 23 của background (lùi sang 1100px so với vị trí mặc định)
//vị trí thứ 24 của background (lùi sang 1150px so với vị trí mặc định)
//vị trí thứ 25 của background (lùi sang 1200px so với vị trí mặc định)
//vị trí thứ 26 của background (lùi sang 1250px so với vị trí mặc định)
//vị trí thứ 27 của background (lùi sang 1300px so với vị trí mặc định)
//vị trí thứ 28 của background (lùi sang 1350px so với vị trí mặc định)
//vị trí thứ 29 của background (lùi sang 1400px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 30 của background (lùi sang 1450px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 31 của background (lùi sang 1500px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 32 của background (lùi sang 1550px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 33 của background (lùi sang 1600px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 34 của background (lùi sang 1650px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//vị trí thứ 35 của background (lùi sang 1700px so với vị trí mặc định)
Every Sha-la-la-la
Every Wo-wo-wo
Still shines
Every shing-a-ling-a-ling
That they're starting to sing
So fine
All my best memories
Come back clearly to me
Some can even make me cry
Just like before
It's yesterday once more ~
//------ đang sửa tới đây -------
//------ đã chán, tạm dừng -------
//------ nếu làm tiếp, phải thêm nhà kho, chim, mèo, nhà, nyancat và kết thúc bằng việc nhảy ùm vào bể bơi + xuất hiện cầu vồng -------
//vị trí thứ 2 của sprite (cách lề 50 px), sprpos1 là vị trí mặc định
//vị trí thứ 3 của sprite (cách lề 100px)
//vị trí thứ 4 của sprite (cách lề 150px)
//vị trí thứ 5 của sprite (cách lề 200px)
//vị trí thứ 6 của sprite (cách lề 250px)
//vị trí thứ 7 của sprite (cách lề 300px)
.............................................<
: lùi lại^
: tương tác>
: tiến lên
Đánh dấu