Companion code for slc-frontend-dev 2018/11/06

Image object-fit and object-position utilities

getBoundingClientRect() async and without browser re-layout using intersection observer

When the user hovers over the links both on the navigation bar and text, there is a background effect that will resize itself according to the element's size and follow around the page wherever the cursor is going

Be notified when the client rect of an element changes.

Spacy Ball is a fun and addictive game. Here the challenge is to escape from the red colour ball. The game will end when pokemon ball hits the red colour ball.

My Art Gallaxy -is a drawing application where user can draw their own painting using brush tool in associate with eraser tool.Only applicaple for larger screen above 800px in screen size

stripe-submenus-react-app

Page assistant

implemented image lazyload

Clicking a small image, add it to the carousel dynamically

Using basic HTML, CSS & JavaScript.

A handy study in scroll animations using vanilla jQuery, JavaScript, and CSS, where text reveals an element at a certain point on user scroll for a neat fade-in effect with the use of document and window object methods.

navbar-react-app

Work easily with an element's position and dimensions

Infinity Scroll using Vanilla JavaScript getBoundingClientRect method