Prototype: Adding Functionality and Animation | Web Design Project Documentation


This is a series of web development logs for a local meditation group called Mantra Meditation. The series consists of:

  1. User research
  2. Site requirements
  3. Conceptual design
  4. Visual design
  5. Prototype: Constructing and Styling
  6. Prototype: Adding Functionality and Animation
  7. 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.

Link: Prototype

 

Title Animation with CSS3

Title animation gif

Title animation gif

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.

Ref: innerHeight()

Ref: innerWidth()

 

Add Smooth Scrolling Function

Smooth scrolling

Smooth scrolling

Applied smooth scrolling to the page.

Code was simply copy and pasted from w3schools’ sample code.

Ref: w3schools

 

Create pre-next Buttons for Testimonial 

Pre next buttons

Pre next buttons

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

Button appears

Button appears

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: w3schools

Ref: jQuery Scroll Top

 

Contact Form

Contact form

Contact form is just about working.

It seems some emails (often sent from mobile) go into junk mail.

No validation process is applied yet.

Ref: php.net

Ref: w3school


About Aiko Ohakoda

I'm a graphic designer and front-end developer. Love kawaii stuff and yummy cakes. Can't live without coffee or soy sauce.