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

មេរៀនទី៩: ងាយ​បង្កើត 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