របៀបបង្កើត​ Background slideshow

ជាការពិតការបង្កើត គេហៈទំព័រគឺវាមាន ភាពងាយស្រួលណាស់ តែអ្វីដែល សំខាន់ក្នុង ការបង្កើត គេហៈទំព័រ នោះគឺ ការធ្វើ អោយមានភាព ទាក់ទាញ​ទៅ ដល់អ្នក ដែលចូល មកកាន់គេហៈ ទំព័ររបស់យើង។ ចំពោះកា របង្កើត គេហៈទំព័រអោយ មាន ភាពស្រស់ស្អាតនោះ អ្នករចនា តែងប្រើនូវ កម្មវីធីមួយចំនួយដូចជា​ប្រើប្រាស់កម្មវិធី 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។

<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

អានបន្ត

ការប្រើប្រាស់ CSS3 Transitions

CSS3 Transitions គឺជាការបន្ថែមនូវ effect នៅពេលដែលយើងធ្វើការផ្លាស់ប្តូរពី style មួយទៅ style មួយទៀត ដោយយើងមិនចាំបាច់ប្រើ ចលនានៅក្នុង flash ឬ នៅក្នុង JavaScript ឡើយ។

Browser ដែលអាចប្រើ 

CSS3 Transitions នេះគឺដំណើរការជាមួយនឹង Internet Explorer 10, Firefox, Chrome, Opera និង Safari ប៉ុន្តែ Safari តម្រូវការប្រើ prefix –webkit-។

សំគាល់: Internet Explorer 9 និង ជំនាន់មុនៗ មិនអាចដំណើរការ property នេះទេ។ ចំនែកឯ Chrome 25 និង ជំនាន់មុនៗ តម្រូវការប្រើ prefix –webkit- ដូចនឹង Safari ដែរ។

របៀបប្រើ

CSS3 Transitions គឺជា effect ដែលបង្ហាញពីការផ្លាស់ប្តូររបស់ ធាតុ ពី style មួយទៅ style មួយទៀត ដូចនេះ ដើម្បីប្រើវា គឺយើងត្រូវ កំណត់ style ទាំងពីរនេះ គឺ style ទី១ និង style ទី២។

ឧទារហណ៍

ដូចក្នុងឧទាហរណ៍ខាងក្រោមនេះ គឺយើងនឹង បង្កើត effect នៃការប្តូរ ពណ៌ផ្ទៃនៅពេលយក mouse ដាក់ពីលើ នៃ ប៊ូតុងមួយដោយ ប្រើ CSS3 Transitions ដោយយើងគិតថា ពណ៌ផ្ទៃធម្មតាជា style ទី១ និង ពណ៌ផ្ទៃនៅពេលយក mouse ដាក់ពីលើជា style ទី២។

<!DOCTYPE html>

<html>

<head>

<style> 

div{

width:100px;

height:100px;

background:red;

transition:width 2s;

-webkit-transition:width 2s; /* Safari */

}

div:hover{

width:300px;

}

</style>

</head>

<body>

<p><b>Note:</b> This example does not work in Internet Explorer 9 and earlier versions.</p>

<div></div>

<p>Hover over the div element above, to see the transition effect.</p>

</body>

</html>

អានបន្ត