Advertisement
PlotnikovPhilipp

Untitled

Aug 8th, 2019
102
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 4.88 KB | None | 0 0
  1. function becomingBigger() {
  2. if(switchOfAnimation) {
  3. footer.firstElementChild.style.cssText = "-webkit-transform:scale(1.5);\
  4. -moz-transform:scale(1.5);\
  5. -ms-transform:scale(1.5);\
  6. -o-transform:scale(1.5);\
  7. transform:scale(1.5);";
  8. setTimeout(becomingSmaller, 21000);
  9. } else return;
  10. }
  11.  
  12. function becomingSmaller() {
  13. if(switchOfAnimation) {
  14. footer.firstElementChild.style.cssText = "-webkit-transform:scale(1);\
  15. -moz-transform:scale(1);\
  16. -ms-transform:scale(1);\
  17. -o-transform:scale(1);\
  18. transform:scale(1);";
  19. setTimeout(becomingBigger, 21000);
  20. } else return;
  21. }
  22.  
  23. //Анимируем header & main part of article & footer of article
  24. function animation() {
  25.  
  26. //Header
  27. if(!headerFlag && Math.abs(header.getBoundingClientRect().top / window.innerHeight) < 0.2) {
  28. header.firstElementChild.nextElementSibling.firstElementChild.lastElementChild.style.cssText = "-webkit-transform: translateX(101%);\
  29. -moz-transform: translateX(101%);\
  30. -ms-transform: translateX(101%);\
  31. -o-transform: translateX(101%);\
  32. transform: translateX(101%);";
  33. header.firstElementChild.nextElementSibling.firstElementChild.firstElementChild.style.opacity = "1";
  34. header.firstElementChild.nextElementSibling.lastElementChild.style.cssText = "opacity: 1;\
  35. -webkit-transform: translateY(0);\
  36. -moz-transform: translateY(0);\
  37. -ms-transform: translateY(0);\
  38. -o-transform: translateY(0);\
  39. transform: translateY(0);";
  40. headerFlag = true;
  41. }
  42.  
  43. //Main part of article
  44. if(!aboutUsFlag) {
  45. aboutUsFlag = true;
  46. }
  47.  
  48. //Footer of article
  49. if(!footerFlag && footer.getBoundingClientRect().top / window.innerHeight < 0.6 && footer.getBoundingClientRect().top >= 0) {
  50. footer.firstElementChild.nextElementSibling.lastElementChild.style.cssText = "-webkit-transform: translateX(101%);\
  51. -moz-transform: translateX(101%);\
  52. -ms-transform: translateX(101%);\
  53. -o-transform: translateX(101%);\
  54. transform: translateX(101%);";
  55. footer.firstElementChild.nextElementSibling.firstElementChild.style.opacity = "1";
  56. footer.lastElementChild.style.cssText = "opacity: 1;\
  57. -webkit-transform: translateY(0);\
  58. -moz-transform: translateY(0);\
  59. -ms-transform: translateY(0);\
  60. -o-transform: translateY(0);\
  61. transform: translateY(0);";
  62. footerFlag = true;
  63. }
  64.  
  65. if(!switchOfAnimation && footer.getBoundingClientRect().top / window.innerHeight < 0.6 && footer.getBoundingClientRect().top >= 0) {
  66. switchOfAnimation = true;
  67. becomingBigger();
  68. } else if((switchOfAnimation && footer.getBoundingClientRect().top / window.innerHeight > 0.6) || footer.getBoundingClientRect().top < 0) {
  69. switchOfAnimation = false;
  70. footer.firstElementChild.style.cssText = "-webkit-transform:scale(1);\
  71. -moz-transform:scale(1);\
  72. -ms-transform:scale(1);\
  73. -o-transform:scale(1);\
  74. transform:scale(1);";
  75. }
  76. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement