បង្កើតជីវចលសំរាប់អក្សរ ឬរូបភាពជាមួយ Animate.CSS

ដើម្បីធ្វើអោយវេបសាយអោយរស់រវើក និងមានភាពទាក់ទាញ ការបង្កើតជីវចលសំរាប់អក្សរ រូបភាព ឬផ្នែកណាមួយនៅក្នុងវេបសាយ គឺជារឿងចាំបាច់។ អត្ថបទនេះបង្ហាញពីរបៀបបង្កើតជីវចលជាមួយនឹង Animate.CSS។

Animate.CSS គឺជាកម្មវិធី CSS យោងមួយដែលគេអាចយកមកប្រើដើម្បីជួយកំណត់ជីវចលសំរាប់អក្សរឬរូបភាព នៅផ្នែកណាមួយក្នុងវេបសាយ។

 

 

រូបភាពខាងក្រោមគឺឈ្មោះជីវចលដែលអាចប្រើ ហើយមានទាំងអស់មានចំនួន ៧៥។

របៀបប្រើ Animate.CSS នៅក្នុងវេបសាយ

១) បញ្ជូលកូដ ទៅក្នុង HTML Head

<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
</head>

អ្នកអាចទាញយក animate.css ពី ទំព័រនេះ

២)កំណត់នៅក្នុង HTML ដោយផ្ទាល់

<body>
<h1 class=”animated infinite rollIn”>សួស្តី</h1>
</body>

infinite មានន័យថាកំណត់អោយធ្វើចលនារហូត។ បើចង់អោយធ្វើចលនាតែម្តង សូមលុប infinite ចេញ។

៣)កំណត់តាមរយៈ Javascript

<html>
<meta charset="UTF-8">
<head>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
 <script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js'></script>
</head>
<body>
 <div id="test">សួស្តី</div>
 <script>
 $( document ).ready(function() {
 $('#test').addClass('animated infinite bounceOutLeft');
 });
 </script>
</body>
</html>

 

ចែករំលែក​អត្ថបទនេះទៅកាន់៖

Exit mobile version