ជាការពិតការបង្កើត គេហៈទំព័រគឺវាមាន ភាពងាយស្រួលណាស់ តែអ្វីដែល សំខាន់ក្នុង ការបង្កើត គេហៈទំព័រ នោះគឺ ការធ្វើ អោយមានភាព ទាក់ទាញទៅ ដល់អ្នក ដែលចូល មកកាន់គេហៈ ទំព័ររបស់យើង។ ចំពោះកា របង្កើត គេហៈទំព័រអោយ មាន ភាពស្រស់ស្អាតនោះ អ្នករចនា តែងប្រើនូវ កម្មវីធីមួយចំនួយដូចជាប្រើប្រាស់កម្មវិធី Adobe flash ភាសាកូដ jquery Javascript ឬកម្មវិធីជាច្រើនផ្សេងទៀង តាមអ្វីដែលយើងចេះឥឡូវនេះ ខ្ញុំនឹងបង្កាញអ្នក ទាំងអស់គ្នាអំ ពីរវិធបង្កើត Background Slideshow ក្នុងវែបសាយ ដោយប្រើ Backstretch jQuery Plugin ដែលអាច ដំណើរការបាន ផងដែរ លើទូរស័ព្ទ 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។
$.backstretch([...]) កូដនេះមាននាទីហៅ Plugin Backstretch ក្នុងនោះខ្ញុំបានប្រើរូបភាពចំនួន៤ ដើម្បីអោយធ្វើ Slideshow នៅក្នុងមាន Properties ២ ដែលខ្ញុំបានប្រើ គឹ ៖
<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
.jpg)
0 comments:
Post a Comment