User generated animation effects

This forum is for general questions about extensions for Joomla! 3.x.

Moderators: pe7er, General Support Moderators

Forum rules
Forum Rules
Absolute Beginner's Guide to Joomla! <-- please read before posting, this means YOU.
Forum Post Assistant - If you are serious about wanting help, you will use this tool to help you post.
Windows Defender SmartScreen Issues <-- please read this if using Windows 10.
Post Reply
JohnSmithers
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 223
Joined: Mon Feb 11, 2013 9:22 am

User generated animation effects

Post by JohnSmithers » Tue May 19, 2020 10:36 am

Are there any extension which allow users to play with animated effects on the front end?

Like this: https://www.[youtube].com/watch?v=puiBYkN3bOE

I'm not looking for animated headers, or image gallery extensions. Just an extension which gives users an interactive animated experience.

?

 
venci
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 105
Joined: Sat Nov 17, 2012 6:10 am

Re: User generated animation effects

Post by venci » Tue May 19, 2020 12:07 pm

Hi,
The code to achieve this effect can be downloaded from this site:
https://www.jqueryscript.net/animation/ ... ks-js.html
Just adapt it to your needs
Note: For Joomla you should use jQuery rather than $

JohnSmithers
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 223
Joined: Mon Feb 11, 2013 9:22 am

Re: User generated animation effects

Post by JohnSmithers » Tue May 19, 2020 1:14 pm

Yeah I saw that, which takes me into an area I'm only beginning to explore :-)

First principles (please correct as I update, whoever is reading)

https://docs.joomla.org/Adding_JavaScript

JohnSmithers
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 223
Joined: Mon Feb 11, 2013 9:22 am

Re: User generated animation effects

Post by JohnSmithers » Tue May 19, 2020 4:12 pm

Okay, so I created a module. I placed the code (below) using codemirror.

The script is in the correct folder. Nothing is displaying.

Where have I went wrong?

Code: Select all

<?php
JHTML::script('jquery.fireworks.js', 'templates/foundation/js/');
?>

<div class="demo">
<script>
  jQuery('.demo').fireworks({
	  sound: true, // sound effect
	  opacity: 0.9,
	  width: '100%',
	  height: '100%'
	});

  </script>
  
  <script src="/templates/foundation/js/jquery.fireworks.js"></script>


	</div>

SharkyKZ
Joomla! Ace
Joomla! Ace
Posts: 1713
Joined: Fri Jul 05, 2013 10:35 am
Location: Parts Unknown

Re: User generated animation effects

Post by SharkyKZ » Tue May 19, 2020 5:14 pm

It's not clear where you're placing the code. If it's in a PHP file, you don't need this line (you're already loading the script with JHtml::script()):

Code: Select all

<script src="/templates/foundation/js/jquery.fireworks.js"></script>
And if you're placing this inside content (e.g. article or custom HTML module), you don't need this (this is PHP code):

Code: Select all

<?php
JHTML::script('jquery.fireworks.js', 'templates/foundation/js/');
?>
The path to the file should be without leading slash:

Code: Select all

<script src="templates/foundation/js/jquery.fireworks.js"></script>
To make it all work either load the file before the code snippet or change the snippet to run after the page has loaded like so:

Code: Select all

jQuery(document).ready(function() {
	jQuery('.demo').fireworks({
		sound: true, // sound effect
		opacity: 0.9,
		width: '100%',
		height: '100%'
	});
 });

JohnSmithers
Joomla! Enthusiast
Joomla! Enthusiast
Posts: 223
Joined: Mon Feb 11, 2013 9:22 am

Re: User generated animation effects

Post by JohnSmithers » Tue May 19, 2020 6:15 pm

That's great SharkyKZ :-)
so clear and easy to follow. Very much appreciated. Still have some gremlins like containing it within the module limits on the site, but that's something I can now explore.

Looking for a lot more of these visual toys, but there seems to be little around, in code snippets or joomla extensions. Given facebook's exploration of user interaction it would be great if more of these were to become available :-)

 

Post Reply

Return to “Extensions for Joomla! 3.x”