Advertisement
Guest User

Untitled

a guest
Feb 20th, 2019
79
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var canv = document.createElement('canvas');
  2. document.getElementById('main').appendChild(canv);
  3. canv.style.position = "fixed"
  4. canv.style.left = 0
  5. canv.style.top = 0
  6. canv.style.zIndex = -1000
  7. let frames = 15
  8. let tiltForMyRes= 450/940*window.innerHeight
  9. let state = {
  10.     currentFrame: 0,
  11.     scrolled: document.getElementsByClassName('current-menu-ancestor')[1],
  12.     def: document.getElementsByClassName('current-menu-ancestor')[0],
  13.     isScrolled: false,
  14.     sidebarTop:219 , //document.getElementsByClassName('fusion-sidebar-inner-content')[0].getBoundingClientRect().y,
  15.     scrolledOffsetX : 0,
  16.     defaultOffsetX:  document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
  17. }
  18.  
  19. function redraw() {
  20.     if (state.def.getBoundingClientRect().x === 0) redrawAfterScroll()
  21.     else redrawDefault()
  22. }
  23.  
  24.  
  25. function redrawAfterScroll() {
  26.  
  27.     let tilt = tiltForMyRes
  28.     let height = 65
  29.     let br = state.scrolled.getBoundingClientRect()
  30.  
  31.     state.scrolledOffsetX = br.x
  32.     let offsetX = br.x
  33.  
  34.     if (state.currentFrame === frames) state.currentFrame = 0
  35.     if (state.isScrolled === false) state.currentFrame++
  36.     if (state.currentFrame !== 0 && state.currentFrame < frames) {
  37.         tilt = state.currentFrame / frames * tiltForMyRes
  38.         height = state.sidebarTop - (state.sidebarTop - 65) / frames * state.currentFrame
  39.         offsetX = state.defaultOffsetX + (br.x - state.defaultOffsetX) / frames * state.currentFrame
  40.         state.currentFrame++
  41.     }
  42.  
  43.     state.isScrolled = true
  44.  
  45.     canv.width = window.innerWidth
  46.     canv.height = window.innerHeight
  47.     let ctx = canv.getContext('2d')
  48.     ctx.fillStyle = 'white'
  49.     ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
  50.     ctx.fillStyle = '#F47321';
  51.     ctx.beginPath();
  52.     ctx.moveTo(offsetX, height);
  53.     let min = offsetX - tilt
  54.     if (min < 0) min = 0
  55.     ctx.lineTo(min, window.innerHeight);
  56.     ctx.lineTo(window.innerWidth, window.innerHeight);
  57.     ctx.lineTo(window.innerWidth, height);
  58.     ctx.closePath();
  59.     ctx.fill();
  60. }
  61.  
  62. function redrawDefault() {
  63.  
  64.     let br = state.def.getBoundingClientRect()
  65.     let height = state.sidebarTop
  66.     let offsetX = document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
  67.     let tilt = 0
  68.  
  69.     if (state.currentFrame === frames) state.currentFrame = 0
  70.     if (state.isScrolled === true) state.currentFrame++
  71.     if (state.currentFrame !== 0 && state.currentFrame < frames) {
  72.         tilt = tiltForMyRes - state.currentFrame / frames * tiltForMyRes
  73.         height = 83 + (state.sidebarTop - 83) / frames * state.currentFrame
  74.         let homeOffset = document.querySelectorAll('[href="https://elicaelevator.com/"]')[1].getBoundingClientRect().x
  75.         offsetX = state.scrolledOffsetX - (state.scrolledOffsetX - homeOffset) / frames * state.currentFrame
  76.         state.currentFrame++
  77.     }
  78.  
  79.     state.isScrolled = false
  80.  
  81.  
  82.     canv.width = window.innerWidth
  83.     canv.height = window.innerHeight
  84.     let ctx = canv.getContext('2d')
  85.     ctx.fillStyle = 'white'
  86.     ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
  87.     ctx.fillStyle = '#F47321';
  88.     ctx.beginPath();
  89.     ctx.moveTo(offsetX, height);
  90.     let min = offsetX - tilt
  91.     if (min < 0) min = 0
  92.     ctx.lineTo(min, window.innerHeight);
  93.     ctx.lineTo(window.innerWidth, window.innerHeight);
  94.     ctx.lineTo(window.innerWidth, height);
  95.     ctx.closePath();
  96.     ctx.fill();
  97. }
  98.  
  99. setInterval(redraw, 30)
  100. window.onresize = ()=> tiltForMyRes = 450/940*window.innerHeight
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement