Lancelot's Useful Gadgets

__TOC__
Dialogues
Source Code:User:Lancelot_Chen/Dialogue
*Image: The image of your character
*Image-Link: The page it leads to if the image is clicked on
*Name: Name of your character
*Text: What your character say
 {{User:Lancelot_Chen/Dialogue|Image=Example.png|Name=Character Name|Text=Test|Image-Link=Level 100}}
Pro Tip: You can make use of Lancelot's Animation Pack below to make everything in your dialogue move and become cooler! Use your imagination!
Lancelot's Animation Pack
Basics for Animations
I'm not going to explain the stuff in css like @keyframes to you cuz that's a waste of time, what actually matters is the following properties when it comes to handling animations:
*animation-duration
-uses "s (seconds)" as its unit. It controls how long the animation lasts to reach the final result. For instance, let's say you set the animation-duration of fade-in to 5s, then it will take 5 seconds for the text to gradually appear from nothingness to full opacity.
Demonstration:
 This text fades in in 5 seconds.
Result:
This text fades in in 5 seconds. (And repeats, only for showcasing, it does not repeat in the actual case.)
*animation-delay
-uses "s (seconds)" as its unit. It controls how long the animation waits before executing. For instance, let's say you set the animation-delay of fade-in to 3s, then it wait 5 seconds before playing the animation. Take the former as an example
Demonstration:
 This text fades in in 5 seconds.
Result:
This text waits for 3 seconds, before fading in in 5 seconds. (The delay only works for ONCE, after the animation is played once the delay does not take place again.)
*"
-Tells your device what animations you wanna run for the elements included within the tag. Other attributes like "style" and "id" are also common. You don't need to know what "class" do, you just have to know that by inserting "class" to any tags, be it , , , etc., you can then add '="" ' and add the animation name within the '""'. Here's a demonstration as the above paragraph is confusing.
 This text has the animation "fade-In" assigned
 This text has the animation "fade-In" assigned, but included in a different tag.
*animation-iteration-count:
-This property tells your computer how many times you want the animation to play before it ends. Valid inputs include "1", "2".... "99999", "infinite" etc. You can insert any positive integer, or just set it to infinite so that the animation will loop forever.
Demonstration:
 The fade-In animation is looped infinitely
*animation-timing-function:
-The property which controls how your animation runs, here's the full list of available timing functions:
Common CSS Timing Functions
# linear
#* The animation progresses at a constant speed.
# ease
#* Starts slowly, speeds up in the middle, and slows down at the end (default).
# ease-in
#* Starts slowly and speeds up.
# ease-out
#* Speeds up and then slows down towards the end.
# ease-in-out
#* Starts slowly, speeds up in the middle, and slows down again at the end.
Demonstration:
 The fade-In animation is looped infinitely
Result:
The left-right animation is in ease-in-out mode!
*Using Multiple animations on the same element
-You can stack up all the simple animations to create a monstrous combination of perfection! Here's an example.
Demonstration:
 Two animations on this text???
Two animations on this text???
To do this, you have to add a property in div style with the following formate
 animation: [animation name] [how many seconds it lasts (animation duration)] [timing function (e.g. ease-in-out)] [how many times the animation repeats (animation iteration count, e.g. infinite, 1, 2 etc.)], fadeIn 4s ease-in-out infinite
To make the animation work, you will need to fetch the EXACT name of the animation, which can be found after "@keyframes".
Source Code: Click here to access the source code for animation names.
Animations
Add this to the top of your page:
 {{CSS|User:Lancelot_Chen/Animations.css}}
Now you have Lancelot's Animation Pack installed on your page!
With it, you have the following animations that you can use!
Plain Fading Animations
*fade-in
-Makes text appear from nothingness (Still takes up space)
 This text fades in gradually
Result:
This text fades in gradually (And repeats, only for showcasing, it does not repeat in the actual case.)
*fade-out
-Makes text disappear into nothingness (Still takes up space)
 This text fades out gradually.
Result:
This text fades out gradually. (And repeats, only for showcasing, it does not repeat in the actual case.)
*fade-up
-Makes element fade-in, with an upward displacement of 100px. (This animation does NOT work on or , etc.!)
 [[File:Example.png]]
Result:
*fade-up-text
-Makes element fade-in, with an upward displacement of 10px, specifically used to make a pop-up effect for small text.
 This text fades up
Result:
This text fades up
*fade-in-left
-Makes text display from left to right, similar to a typewriter!
-Works best when text is aligned left or center, and only works on a single line of text. You need to include your text in multiple boxes by line to achieve the best effect.
 Here is the fade-in-left animation
 Here is the fade-in-left animation with 2 seconds delay
 Here is the fade-in-left animation with 4 seconds delay
Result:
This text fades in from left
This text fades in from left
This text fades in from left
Sliding Intro Animations
*slide-in-left
-Make any elements slide in from the left side of the screen, initially invisible.
 This text slides in from left
Result:
This text slides in from left
*slide-in-right
-Make any elements slide in from the right side of the screen, initially invisible. (Add property text-align:right for better effect)
 This text slides in from right
Result:
This text slides in from top
*slide-in-right
-Make any elements slide in from the top of the screen, initially invisible. (Set height to lower value such that the text does not cover the content above when sliding)
 This text slides in from top
This text slides in from top
*slide-in-bottom
-Make any elements slide in from the bottom of the screen, initially invisible. (Set height to lower value such that the text does not cover the content below when sliding)
 This text slides in from bottom
Result:
This text slides in from bottom
Motion Animations
*rotate-left
-Make any elements rotate-nonstop to the left, the speed of rotation can be adjusted with animation-duration, larger value= slower rotation.
 This block spins!
Result:
This block spins!
*rotate-right
-Make any elements rotate-nonstop to the right, the speed of rotation can be adjusted with animation-duration, larger value= slower rotation.
 This block spins!
Result:
This block spins!
*camera-shake
-Designed to make a camera-shake motion for large elements, possibly for large background images to make them look more dynamic. You can make the movement less vigorous by increasing the animation-duration.
 [[File:Example.png|600px]]
Result:
*left-right
-Make an element which is initially on the left edge of the page move to the right.
 This text MOVES from left to right
Result:
This text MOVES from left to right
*right-left
-Make an element which is initially on the right edge of the page move to the left.
 This text MOVES from left to right
Result:
This text MOVES from right to left
Category:Tutorial
Category:WIkitext
Category:CSS
Category:Templates