Discover that in order to use custom CSS inside an Axure Share plugin, you need to create a widget style, and use that as the CSS class name when writing the code for the plugin. Use this method to add a custom animation to a button in Axure.
- [Instructor] Whenever you want to add custom CSS…or JavaScript to your prototype,…the Axure Share site has a plug-ins feature…that makes this pretty easy to do.…I've got a prototype here with a product page.…And when I click on one of these buttons to add…an item to the cart,…a view cart button is appearing here.…What I'd like to do now is add some CSS animation…to this view cart button when it shows up.…The CSS I'll be using for this example is something…I created with Bounce.js.…On the Bouncejs.com site.…When I click on the play animation button here…you can see it's kind of a nice bounce effect.…
I've included the actual CSS snippet I'll be using…in the exercise files.…But you can also try out bounce.js for yourself…and create any CSS animation you like.…I'll click here to export the CSS…and then copy all of this here.…Now that I've got my CSS copied,…the next step is to head over to Axure Share…and add a new plug-in to my prototype.…I've already got my h+sport prototype uploaded here.…So I'll hover over the options menu and…
Author
Shauna Bybee
Released
9/26/2018- Using variables in Axure
- String methods in Axure
- Truncating text strings
- Formatting dates and times
- Setting up a looping animation
- Setting up a responsive background image
- Positioning widgets in the browser
- Repeater and item properties
- Adding custom HTML, CSS, and JavaScript
- Troubleshooting
Skill Level Advanced
Duration
Views
-
Introduction
-
1. Widget Properties
-
Axure variables overview2m 55s
-
Widget properties4m 43s
-
This and Target3m 26s
-
X and Y coordinates2m 54s
-
Width and height2m 3s
-
Example: Creating a slider6m 21s
-
Centering widgets4m 10s
-
Widget text3m 21s
-
-
2. Strings
-
String methods in Axure2m 22s
-
String length4m 59s
-
Searching strings3m 41s
-
Truncating text strings2m 55s
-
-
3. Dates and Times
-
Now and GenDate3m 12s
-
Formatting dates3m 5s
-
Using the current time2m 33s
-
Formatting time4m 11s
-
Adjusting dates2m 27s
-
-
4. Window Properties
-
Window width and height4m 1s
-
Window scroll properties4m 40s
-
Creating a sticky header4m 40s
-
Parallax scrolling4m 23s
-
-
5. Repeater and Item Properties
-
Example: Calculating a total5m 37s
-
Item.index1m 13s
-
6. Global Variables
-
Global variables2m 14s
-
-
7. Adding Custom HTML, CSS, and JavaScript
-
Using plugins on Axure Share2m 49s
-
-
8. When Things Go Wrong
-
Conclusion
-
Next steps40s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Example: Adding CSS animation