Supporting each other

Community forums

Welcome, Guest
Username: Password: Remember me
This is the place for questions about learning design and pedagogy; how to use different page types for different purposes.
  • Page:
  • 1

TOPIC: Adding Animation to Title Pages

Adding Animation to Title Pages 7 months 2 weeks ago #6312

  • drlara
  • drlara's Avatar Topic Author
  • Offline
  • Fresh Boarder
  • Fresh Boarder
  • Posts: 15
  • Thank you received: 9
A subtle animation could be used in Title Pages to visually attract learners' attention.
It looks like Xerte doesn't provide any animation features, so I thought about sharing the CSS and JS code I used to create a subtle fading animation effect (see attached images). Having the Title Page selected, I added a "Styles" block, from the "Optional Properties" column, and entered the following code:
@keyframes fadeIn {
0% {opacity: 0; transform: scale(.3); }
100% {opacity: 1; transform: scale(1); }
}
.fadeIn {
animation: fadeIn 5s;
-webkit-animation: fadeIn 5s;
}


Then, added a "Script" block and pasted the following line:
$("#pageContents").addClass("fadeIn");

This code should work in any Title Page of XOT projects.
More elaborated animations could also be created, for instance, to display a pedagogical agent or avatar entering from the left.
Attachments:
The following user(s) said Thank You: ymoore, xlearn

Please Log in or Create an account to join the conversation.

  • Page:
  • 1
Moderators: ingdon
Time to create page: 0.039 seconds
Copyright © 2020 The Xerte Project.
Xerte logo Apereo logo OSI Logo

Search