This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:
- User research
- Site requirements
- Conceptual design
- Visual design
- Prototype: Constructing and Styling
- Prototype: Adding Functionality and Animation
- Test and evaluation
This page is documentation for 6. Prototype: Adding Animation and Functionality
In this article, I will list animation and functions i applied and show how they work.
Title Animation with CSS3
I applied fade in and slide down to in animation to h1 title.
Animation-fill-mode is set to forwards to keep state of element the same as when animation ends.
Ref: CSS Animations
Apply jQuery to Navigation Bar
Enabling open and close navigation tab.
Condition (height > width) is set In order to make it work only for portrait. It only works when height is larger than width.
Add Smooth Scrolling Function
Applied smooth scrolling to the page.
Code was simply copy and pasted from w3schools’ sample code.
Create pre-next Buttons for Testimonial
jQuery on click event is applied to previous(<) and next(>) buttons for testimonials by using jQuery.
This function is to create a slider for testimonials.
Fade in Go to Top Button
Go to top button appears when a user scroll down.
Once it appears, will stay its position.
This function is only available to PC.
Ref: jQuery Scroll Top
Contact form is just about working.
It seems some emails (often sent from mobile) go into junk mail.
No validation process is applied yet.