/* -------------------------------------------- -------------------------------------------- Hello guys! It has been a long long while since I've made my last code on the web design series! And I'm back with a fresh new design! This is my first ever code made with React.js! I'm learning it and found it so interesting since it has some really cool and facinating features! I would definately like to work again with React! However, this code is dedicated to my best ever pet, I mean a cute little dog 😜! I'm really sorry to make late but umm who cares? I made it duh! -- Arb -- 15 - 11 - 2019 -------------------------------------------- -------------------------------------------- */ alert('Happy day after birthday my dog man (Raj) 😂 ! Wish you a very good life! This code is dedicated to him!'); window.onscroll = () => { let ws = window.pageYOffset; let elems = document.getElementsByClassName('advice'); for (let i = 0; i < elems.length; i++){ if (ws > elems[i].offsetTop - elems[i].offsetHeight*2){ elems[i].style.opacity = '1'; elems[i].style.transform = 'translateX(0px)'; } else { elems[i].style.opacity = '0'; elems[i].style.transform = 'translateX(-20%)'; } } let elems1 = document.getElementsByClassName('tes-div'); for (let i = 0; i < elems1.length; i++){ if (ws > elems1[i].offsetTop - elems[i].offsetHeight*2){ elems1[i].style.opacity = '1'; elems1[i].style.transform = 'translateX(0px)'; } else { elems1[i].style.opacity = '0'; elems1[i].style.transform = 'translateX(-20%)'; } } } window.addEventListener('load', () => { load.style.display = 'none'; anime({ targets : '.header-nav', translateY : [-60, 0], opacity : [0, 1], easing : 'easeInOutExpo' }); anime({ targets : '.menu-h p', translateY : [20, 0], opacity : [0, 1], rotate : [-360, 0], delay : 500, easing : 'easeInOutExpo' }); anime({ targets : '.h-title', translateY : [20, 0], opacity : [0, 1], delay : 500, easing : 'easeInOutExpo' }); anime({ targets : '.tag-h', translateY : [20, 0], opacity : [0, 1], delay : 300, easing : 'easeInOutExpo' }); /*anime({ targets : '.part-1', translateY : [-120, 0], opacity : [0, 1] });*/ anime({ targets : '.part-2', translateY : [120, 0], opacity : [0, 1], easing : 'easeInOutExpo' }); anime({ targets : '.item', translateX : [-120, 0], scale : [0, 1], //rotate : [-45, 0], opacity : [0, 1], delay : (el, i, l) => { return i * 200; }, easing : 'easeInOutExpo' }); anime({ targets : '.advice', translateY : [120, 0], scale : [0, 1], opacity : [0, 1], easing : 'easeInOutExpo' }); anime({ targets : '.ttl', translateY : [10, 0], opacity : [0, 1], easing : 'easeInOutExpo', delay : 800 }); anime({ targets : '.ttl-tag', translateY : [10, 0], opacity : [0, 1], easing : 'easeInOutExpo', delay : 1000 }); });

GREEN LIFE [ REACT UX/UI DESIGN ]