មេរៀនទី៩: ងាយបង្កើត Background វ៉ិបសាយ
គន្លឹះទាក់ទងនឹងការអភិវឌ្ឍន៍គេហទំព័រ ដើម្បីឲ្យមើលទៅឃើញស្រស់ស្អាត និងទាក់ទាញ
អត្ថបទដំបូងរបស់ខ្ញុំនេះ គឺ វិធីបង្កើត Background Slideshow ក្នុងវែបសាយ ដោយប្រើ Backstretch jQuery Plugin ដែលអាចដំណើរការបានផងដែរលើទូរស័ព្ទ ហើយខ្ញុំក៏បានប្រើវានៅក្នុងវែបសាយ Saramoni.com ។
មើលឧទាហរណ៍ក្នុង វែបសាយរបស់ខ្ញុំ ឬទាញយកទីនេះ Source Code
HTML
Background Slideshow with Backstretch
Text here...
STYLESHEET
.box {
width: 940px;
background: rgba(0, 0, 0, .9);
margin: 50px auto;
border-radius: 10px;
}
.box-content {
padding: 20px;
}
.box h1,
.box p {
color: #fff;
}
@media (max-width: 950px) {
body {
padding: 15px;
}
.box {
width: 100%;
margin: 0;
padding: 0;
}
}
ក្នុងកូដ CSS នេះគឺធម្មតាទេ តែខ្ញុំបានបន្ថែមទួនាទី Responsive
(@media query) បន្តិចដើម្បីអោយវាដំណើរការជាមួយ Smart Phone។JAVSASCRIP
ចំនុច ក ខ្ញុំបានដា់កូដខាងលើននេះហើយ ដែលវាអាចដំណើរការបានដោយពឹផ្អែកលើ jQuery libraries និង Backstretch jQuery Plugin។
$.backstretch([...]) កូដនេះមាននាទីហៅ Plugin Backstretch ក្នុងនោះខ្ញុំបានប្រើរូបភាពចំនួន៤ ដើម្បីអោយធ្វើ Slideshow នៅក្នុងមាន Properties ២ ដែលខ្ញុំបានប្រើ គឹ ៖
- fade: 750 មានន័យថាវានឹងធ្វើ effect រយៈពេល ៧៥០ms
- duration: 4000 មានន័យថាវានឹងប្ដូររូបភាពក្នុងរយៈពេល 4s
Post a Comment