Proudly raised in Hong Kong; I am an individual that has been fortunate enough to have had a global experience in my life after studying / working in London, Hong Kong, Beijing, Spain and Australia. I have recently finished a career in Architecture where I designed projects that reflected my desire for a balance between practical and aesthetic design. However I entered the architectural field to explore the large carbon footprint of construction and energy use. Now, I am currently an aspiring software engineer that is undertaking an accelerated boot-camp to enter the field but I still aim to work promoting and achieving sustainable goals.
Frisbee on Tuesdays in Victoria Park! Everyone's welcome!
Photography was a hobby I started during my architecture career.
In the last few years I have picked up road and trail running.
I love high adrenaline sports! Abseiling, camping, mountain climbing and the like.
DOTA 2, League of Legends, Tabletop Simulator, Heroes of Newerth, Heroes of the Storm
During my tenure in WilkinsonEyre, I worked alongside Grant Associates and a host of other interdisciplinary practices to develop the architectural design for the upcoming Sentosa-Brani masterplan.
The masterplan will roll out over the next three decades and will split the island into five distinct character zones: Vibrant Cluster, Island Heart, Waterfront, Ridgeline and Beachfront.
Create two classes, one hidden and one active. The hidden class should style the element to be hidden (such as opacity: 0) and also style the location to where you want it to come from (such as transform: translateY(50px)). The active class should style the item in its final location with it unhidden.Then use javascript to change between the classes on scroll:
function scrollEffect(){
const hiddenClass = document.getElementsByClassName ("hidden-class")[0];
let distanceToTopOfScreen = hiddenClass.getBoundingClientRect() .top;
let screenHeight = window.innerHeight;
if (distanceToTopOfScreen < screenHeight / 2){
hiddenClass.classList.add("active-class");
}
}
window.addEventListener('scroll', scrollEffect);
In fact the same technique can be applied across a variety of effects. Just set the classes that show the effect in the beginning and end state and use Javascript to change between them.