GSUnit.com

Web design & Development

2D Animations jscript
Author: Sam Ruos
Simple viewport control: Using Javascript & JQuery
Knowing your perimeter of your viewport. That was my approach before I put my simple idea into practice, and the idea was to just move a DIV element around/across certain boundary within the internet browser.

Wouldn't you like to have control over your DIV elements' movements? There are known issues where javascript and jquery don't seem to work as expected with browsers like FireFox and Safari.

Open your console and take a peek at the codes to how simple my approach is and let me know your views.

innerWidth: | innerHeight :

Horizontal_factor (x/y):

Vertical_factor (y/x):

Mouse X: | Mouse Y:

Mouse X-1: | Mouse Y-1:

Mouse-click count:

sessionStorage_setItem_menu_01:

body height: | body width :

body top: | body left :

body offset top: | body offset left :

viewport H-Y: | viewport W-X :

viewport offset H-Y: | viewport offset W-X :

diagonLength:

offset top: | offset left :

boundary top: | boundary left :

bottom:

right:

postion top: | position left :

postion bottom: | position right :

central point top: | central point left :

radius:

Object height : | Object width :

Object offset (height) : | Object offset (width) :

Object offset (Rect top) : | offset (Rect left) :

Object offset (Rect bottom) :

Object offset (Rect right) :

offset (prev pos top) : | offset (prev pos left) :

center_point_top: | pos_center_point_left:

Object Circular Parim top: | Object Circular Parim left:

Object height : | Object width:

Object offset (height): | Object offset (width):

Object (Rect top): | Object (Rect left):

Object offset (Rect bottom):

Object offset (Rect right):

offset (prev pos top): | offset (prev pos left):

Dynamic object circular parim LengthH: | LengthW:

Dynamic_test:

Dynamic_test_signal:

Click on object (move within viewport) with trails

Designed to:

Move automatically and complete its course with one left-click. By default, the object is moved following the path from previous example. With the exception of trails following behind.

Case study:

When moving diagonally, the object doesn't land exactly right on the corner without having to slide into position relating to x/y axes ie. it's sliding vertically into position (at least 1/2 of the object size).

I might need to play with pi/cos/sin... perhaps?