for eg if i want to add this code from this site
html Tutorial
Animated
rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInXClick
rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX
Activate
css div { width: 120px; height: 100px; display: block; background: green; text-align: center; line-height: 100px; margin: 10px; float:left; color: white; border-radius:10px; }
.animated { animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; }
js $(document).ready(function() {
animationClick('.rollOut1','rollOut'); animationClick('.bounce1','bounce'); animationClick('.flash1','flash'); animationClick('.pulse1','pulse'); animationClick('.rubberBand1','rubberBand'); animationClick('.shake1','shake'); animationClick('.tada1','tada'); animationClick('.swing1','swing'); animationClick('.wobble1','wobble'); animationClick('.bounceIn1','bounceIn'); animationClick('.bounceInDown1','bounceInDown'); animationClick('.bounceInLeft1','bounceInLeft'); animationClick('.bounceInRight1','bounceInRight'); animationClick('.bounceInUp1','bounceInUp'); animationClick('.bounceOut1','bounceOut'); animationClick('.bounceOutDown1','bounceOutDown'); animationClick('.bounceOutLeft1','bounceOutLeft'); animationClick('.bounceOutRight1','bounceOutRight'); animationClick('.bounceOutUp1','bounceOutUp'); animationClick('.fadeIn1','fadeIn'); animationClick('.fadeInDown1','fadeInDown'); animationClick('.fadeInDownBig1','fadeInDownBig'); animationClick('.fadeInLeft1','fadeInLeft'); animationClick('.fadeInLeftBig1','fadeInLeftBig'); animationClick('.fadeInRight1','fadeInRight'); animationClick('.fadeInRightBig1','fadeInRightBig'); animationClick('.fadeInUp1','fadeInUp'); animationClick('.fadeInUpBig1','fadeInUpBig'); animationClick('.fadeOut1','fadeOut');
animationClick('.fadeOutDown1','fadeOutDown'); animationClick('.fadeOutDownBig1','fadeOutDownBig'); animationClick('.fadeOutLeft1','fadeOutLeft'); animationClick('.fadeOutLeftBig1','fadeOutLeftBig'); animationClick('.fadeOutRight1','fadeOutRight'); animationClick('.fadeOutRightBig1','fadeOutRightBig'); animationClick('.fadeOutUp1','fadeOutUp'); animationClick('.fadeOutUpBig1','fadeOutUpBig'); animationClick('.flipInX1','flipInX');
function animationHover(element, animation){ element = $(element); element.hover( function() { element.addClass('animated ' + animation); }, function(){ //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };
function animationClick(element, animation){ element = $(element); element.click( function() { element.addClass('animated ' + animation); //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };
});
wer and how to add i hv used codesnippets and custo html css js plugin to do but dont know how to call in wordpress page i need multiple times to call this animation
for eg if i want to add this code from this site https://codepen.io/tamak/pen/ApLcq
html Tutorial
Animated
rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInXClick
rollOut bounce flash pulse rubberBand swing shake tada wobble bounceIn bounceInDown bounceInLeft bounceInRight bounceInUp bounceOut bounceOutDown bounceOutLeft bounceOutRight bounceOutUp fadeIn fadeInDown fadeInDownBig fadeInLeft fadeInLeftBig fadeInRight fadeInRightBig fadeInUp fadeInUpBig fadeOut fadeOutDown fadeOutDownBig fadeOutLeft fadeOutLeftBig fadeOutRight fadeOutRightBig fadeOutUp fadeOutUpBig flipInX
Activate
css div { width: 120px; height: 100px; display: block; background: green; text-align: center; line-height: 100px; margin: 10px; float:left; color: white; border-radius:10px; }
.animated { animation-duration: 3s; animation-fill-mode: both; animation-iteration-count: infinite; }
js $(document).ready(function() {
animationClick('.rollOut1','rollOut'); animationClick('.bounce1','bounce'); animationClick('.flash1','flash'); animationClick('.pulse1','pulse'); animationClick('.rubberBand1','rubberBand'); animationClick('.shake1','shake'); animationClick('.tada1','tada'); animationClick('.swing1','swing'); animationClick('.wobble1','wobble'); animationClick('.bounceIn1','bounceIn'); animationClick('.bounceInDown1','bounceInDown'); animationClick('.bounceInLeft1','bounceInLeft'); animationClick('.bounceInRight1','bounceInRight'); animationClick('.bounceInUp1','bounceInUp'); animationClick('.bounceOut1','bounceOut'); animationClick('.bounceOutDown1','bounceOutDown'); animationClick('.bounceOutLeft1','bounceOutLeft'); animationClick('.bounceOutRight1','bounceOutRight'); animationClick('.bounceOutUp1','bounceOutUp'); animationClick('.fadeIn1','fadeIn'); animationClick('.fadeInDown1','fadeInDown'); animationClick('.fadeInDownBig1','fadeInDownBig'); animationClick('.fadeInLeft1','fadeInLeft'); animationClick('.fadeInLeftBig1','fadeInLeftBig'); animationClick('.fadeInRight1','fadeInRight'); animationClick('.fadeInRightBig1','fadeInRightBig'); animationClick('.fadeInUp1','fadeInUp'); animationClick('.fadeInUpBig1','fadeInUpBig'); animationClick('.fadeOut1','fadeOut');
animationClick('.fadeOutDown1','fadeOutDown'); animationClick('.fadeOutDownBig1','fadeOutDownBig'); animationClick('.fadeOutLeft1','fadeOutLeft'); animationClick('.fadeOutLeftBig1','fadeOutLeftBig'); animationClick('.fadeOutRight1','fadeOutRight'); animationClick('.fadeOutRightBig1','fadeOutRightBig'); animationClick('.fadeOutUp1','fadeOutUp'); animationClick('.fadeOutUpBig1','fadeOutUpBig'); animationClick('.flipInX1','flipInX');
function animationHover(element, animation){ element = $(element); element.hover( function() { element.addClass('animated ' + animation); }, function(){ //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };
function animationClick(element, animation){ element = $(element); element.click( function() { element.addClass('animated ' + animation); //wait for animation to finish before removing classes window.setTimeout( function(){ element.removeClass('animated ' + animation); }, 2000); } ); };
});
wer and how to add i hv used codesnippets and custo html css js plugin to do but dont know how to call in wordpress page i need multiple times to call this animation
Share Improve this question asked Sep 15, 2019 at 19:48 Anand GuruAnand Guru 1 1- Are you using a third party page builder like Elementor or the Block editor? – Valentin Genev Commented Sep 15, 2019 at 20:38
1 Answer
Reset to default 0Login to wordpress then Appearance->Theme Editor
Add your CSS to style.css file
and place your Javascript code somewhere in footer.php file with $ replaced with jQuery
and on page edit option place css classes where you want to give css to