Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var canv = document.createElement('canvas');
- document.getElementById('main').appendChild(canv);
- canv.style.position = "fixed"
- canv.style.left = 0
- canv.style.top = 0
- canv.style.zIndex = -1000
- let frames = 15
- let tiltForMyRes= 450/940*window.innerHeight
- let state = {
- currentFrame: 0,
- scrolled: document.getElementsByClassName('current-menu-ancestor')[1],
- def: document.getElementsByClassName('current-menu-ancestor')[0],
- isScrolled: false,
- sidebarTop:219 , //document.getElementsByClassName('fusion-sidebar-inner-content')[0].getBoundingClientRect().y,
- scrolledOffsetX : 0,
- defaultOffsetX: document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
- }
- function redraw() {
- if (state.def.getBoundingClientRect().x === 0) redrawAfterScroll()
- else redrawDefault()
- }
- function redrawAfterScroll() {
- let tilt = tiltForMyRes
- let height = 65
- let br = state.scrolled.getBoundingClientRect()
- state.scrolledOffsetX = br.x
- let offsetX = br.x
- if (state.currentFrame === frames) state.currentFrame = 0
- if (state.isScrolled === false) state.currentFrame++
- if (state.currentFrame !== 0 && state.currentFrame < frames) {
- tilt = state.currentFrame / frames * tiltForMyRes
- height = state.sidebarTop - (state.sidebarTop - 65) / frames * state.currentFrame
- offsetX = state.defaultOffsetX + (br.x - state.defaultOffsetX) / frames * state.currentFrame
- state.currentFrame++
- }
- state.isScrolled = true
- canv.width = window.innerWidth
- canv.height = window.innerHeight
- let ctx = canv.getContext('2d')
- ctx.fillStyle = 'white'
- ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
- ctx.fillStyle = '#F47321';
- ctx.beginPath();
- ctx.moveTo(offsetX, height);
- let min = offsetX - tilt
- if (min < 0) min = 0
- ctx.lineTo(min, window.innerHeight);
- ctx.lineTo(window.innerWidth, window.innerHeight);
- ctx.lineTo(window.innerWidth, height);
- ctx.closePath();
- ctx.fill();
- }
- function redrawDefault() {
- let br = state.def.getBoundingClientRect()
- let height = state.sidebarTop
- let offsetX = document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
- let tilt = 0
- if (state.currentFrame === frames) state.currentFrame = 0
- if (state.isScrolled === true) state.currentFrame++
- if (state.currentFrame !== 0 && state.currentFrame < frames) {
- tilt = tiltForMyRes - state.currentFrame / frames * tiltForMyRes
- height = 83 + (state.sidebarTop - 83) / frames * state.currentFrame
- let homeOffset = document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
- offsetX = state.scrolledOffsetX - (state.scrolledOffsetX - homeOffset) / frames * state.currentFrame
- state.currentFrame++
- }
- state.isScrolled = false
- canv.width = window.innerWidth
- canv.height = window.innerHeight
- let ctx = canv.getContext('2d')
- ctx.fillStyle = 'white'
- ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
- ctx.fillStyle = '#F47321';
- ctx.beginPath();
- ctx.moveTo(offsetX, height);
- let min = offsetX - tilt
- if (min < 0) min = 0
- ctx.lineTo(min, window.innerHeight);
- ctx.lineTo(window.innerWidth, window.innerHeight);
- ctx.lineTo(window.innerWidth, height);
- ctx.closePath();
- ctx.fill();
- }
- setInterval(redraw, 30)
- window.onresize = ()=> tiltForMyRes = 450/940*window.innerHeight
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement