មេរៀនទី៩: បង្កើត Background វ៉ិបសាយ

ងាយ​ស្រួល​ទេ​បង្កើត Background Slideshow ក្នុង​វែបសាយ​
​គន្លឹះ​ទាក់​ទង​នឹង​ការ​អភិវឌ្ឍន៍​​គេហទំព័រ ដើម្បី​ឲ្យ​មើល​ទៅ​ឃើញ​ស្រស់​ស្អាត និង​ទាក់ទាញ
1អត្ថបទ​ដំបូង​របស់​ខ្ញុំ​នេះ​ គឺ​ វិធី​បង្កើត​ Background Slideshow ក្នុង​វែបសាយ​​​​​ ដោយ​ប្រើ Backstretch jQuery Plugin ដែល​អាច​ដំណើរការ​បាន​ផង​ដែរ​​លើ​ទូរស័ព្ទ​ ហើយ​​ខ្ញុំ​​ក៏​បាន​​ប្រើ​វា​​​នៅ​ក្នុង​វែបសាយ Saramoni.com ។
មើល​ឧទាហរណ៍ក្នុង វែបសាយ​របស់​ខ្ញុំ ឬទាញ​យក​ទីនេះ Source Code

HTML

<!doctype html>
<html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>Background Slideshow with Backstretch</title>
   <link rel="stylesheet" href="css/normalize.css">
   <link rel="stylesheet" href="css/style.css">
 </head>
 <body>
   <div class="box">
     <div class="box-content">
       Text here...
     </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
    <script src="js/jquery.backstretch.min.js"></script>
    <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>
</body>
</html>

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

 <script>
      $(function() {
       $.backstretch([
        "img/slide_01.jpg",
        "img/slide_02.jpg",
        "img/slide_03.jpg",
        "img/slide_04.jpg"
       ], {
       fade: 750,
       duration: 4000
      });
    });
   </script>
ចំនុច ក ខ្ញុំ​បាន​ដា់កូដ​ខាង​លើននេះ​ហើយ ដែល​វា​អាច​ដំណើរការ​បានដោយ​ពឹ​ផ្អែកលើ jQuery libraries និង Backstretch jQuery Plugin។

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="js/jquery.backstretch.min.js"></script>

$.backstretch([...]) កូដ​នេះ​មាន​នាទី​ហៅ​ Plugin Backstretch ក្នុង​នោះ​ខ្ញុំ​បាន​ប្រើ​រូប​ភាព​ចំនួន​៤ ដើម្បី​អោយ​ធ្វើ​ Slideshow នៅ​ក្នុងមាន​ Properties ២ ដែល​ខ្ញុំ​បាន​ប្រើ គឹ ៖
  • fade: 750 មាន​ន័យ​ថា​​វានឹង​ធ្វើ effect រយៈពេល ៧៥០ms
  • duration: 4000 មានន័យ​ថា​វា​នឹង​ប្ដូរ​រូបភាព​ក្នុងរយៈពេល 4s

 

Post a Comment