0

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 flipInX

Click

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

  • Are you using a third party page builder like Elementor or the Block editor? – Valentin Genev Sep 15 at 20:38
0

Login 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

  • That would do the job, but it's not advisable to put this kind of additions to the styles in the theme's stylesheet if the theme is developed by a third party. Maybe it's a good idea to mention child themes in this anwer. Also, we can see that an animation library is used in the shared pen; maybe it's a good idea to mention how to enqueue a stylesheet as well. Cheers! – Valentin Genev Sep 17 at 9:20
  • Furthermore, we're not sure the person has admin level of access, maybe you should explore the HTML Block as an option. – Valentin Genev Sep 17 at 9:30

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.