Анимация блоков при прокрутке
Magic CSS - это набор простых анимаций для включения в ваш веб-проект или приложение
Подключаем библиотеки
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha512-HaoDYc3PGduguBWOSToNc0AWGHBi2Y432Ssp3wNIdlOzrunCtB2qq6FrhtPbo+PlbvRbyi86dr5VQx61eg/daQ==" crossorigin="anonymous"></script> <script> SmoothScroll({ animationTime: 700, stepSize: 70, touchpadSupport: true, accelerationDelta: 20, accelerationMax: 2, pulseAlgorithm: true, pulseScale: 4, pulseNormalize: 1, keyboardSupport: true, arrowScroll: 75, }) </script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<link rel="stylesheet" href="https://ozonbanner.ru/upload/magic.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ozonbanner.ru/upload/wow.min.js"></script>
<script>
new WOW().init();
</script>
GitHub Package Registry - Package url
npm install @minimac/magic.css
NPM - Package url
npm i magic.css
YARN - Package url
yarn add magic.css
Include the file magic.css or include the minified version magic.min.css
<link rel="stylesheet" href="yourpath/magic.css">
or
<link rel="stylesheet" href="yourpath/magic.min.css">
This is a sample code for on hover effect with JavaScript. First, Include the class magictime
and then a desired animation class.
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
If you want to load the animation after certain time, you can use this example:
//set timer to 5 seconds, after that, load the magic animation
function myFunction() {
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
}
setTimeout(myFunction, 5000);
If you want to load the animation after certain time but with an infinite loop, you can use this example:
//set timer to 3 seconds, after that, load the magic animation and repeat forever
function myFunction() {
const selector = document.querySelector('.yourdiv')
selector.classList.add('magictime', 'puffIn')
}
setInterval(myFunction, 3000);
This is a sample code for on hover effect with jQuery. First, Include the class magictime
and then the desired animation class.
$('.yourdiv').hover(function () {
$(this).addClass('magictime puffIn');
});
If you want to load the animation after certain time, you can use this example:
//set timer to 5 seconds, after that, load the magic animation
setTimeout(function(){
$('.yourdiv').addClass('magictime puffIn');
}, 5000);
If you want to load the animation after certain time but with infinite loop, you can use this example:
//set timer to 3 seconds, after that, load the magic animation and repeat forever
setInterval(function(){
$('.yourdiv').toggleClass('magictime puffIn');
}, 3000 );
You can change the time of the animation by setting the class magictime
for example:
.magictime {
-webkit-animation-duration: 3s;
animation-duration: 3s;
}
Default CSS timing is:
.magictime {
-webkit-animation-duration: 1s;
animation-duration: 1s;
}
If you want to assign the timing to a specific animation, you can use the following code (use 2 class):
.magictime.magic {
-webkit-animation-duration: 10s;
animation-duration: 10s;
}