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