Prototyping 2: Animation and Functionality | MMB Project Log 6

Web DevelopmentProject Log, Website

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

Posted by Aiko Ohakoda