Advertisement
nicolaslagios

htr js test

Jan 12th, 2023 (edited)
1,244
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 3.28 KB | Source Code | 0 0
  1. let imageContainer = document.querySelector('.hero.container-fluid');
  2. let imageContainer2 = document.querySelector('#rings-bottom');
  3. let dropdownn = document.querySelector('.jump-menu-container.animate__animated.animate__fadeIn');
  4.  
  5. // create new image element
  6. let eikona = document.createElement("img");
  7. eikona.id = "eikona";
  8. //eikona.style.clipPath = "polygon(0 0, 100% 0, 100% 100%, 0 100%)";
  9. eikona.src = "https://i.postimg.cc/gjWv3Bpt/hero-new-img.png";
  10. eikona.style.height = "auto";
  11. eikona.style.position = "absolute";
  12. eikona.style.right = "0";
  13. eikona.style.zIndex = "2";
  14.  
  15. // animation
  16. eikona.style.animation = "float 6s ease-in-out infinite";
  17. //eikona.style.boxShadow = "0 5px 15px 0px rgba(0,0,0,0.6)";
  18. eikona.style.transform = "translatey(0px)";
  19.  
  20. // css
  21. let keyframes = `
  22.     @keyframes float {
  23.         0% {
  24.         /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
  25.         transform: translatey(0px);
  26.         }
  27.         50% {
  28.         /*box-shadow: 0 25px 15px 0px rgba(0,0,0,0.2);*/
  29.         transform: translatey(-20px);
  30.         }
  31.         100% {
  32.         /*box-shadow: 0 5px 15px 0px rgba(0,0,0,0.6);*/
  33.         transform: translatey(0px);
  34.         }
  35.     }
  36.     @media only screen and (min-width: 1930px){
  37.         #eikona {
  38.             top: 270px;
  39.             width: 45%;
  40.         }
  41.     }
  42.     @media only screen and (max-width: 1920px){
  43.         #eikona {
  44.             top: 283px;
  45.             width: 45%;
  46.         }
  47.     }
  48.     @media only screen and (max-width: 1600px){
  49.         #eikona {
  50.             top: 300px;
  51.             width: 45%;
  52.         }
  53.     }
  54.     @media only screen and (max-width: 1440px){
  55.         #eikona {
  56.             top: 335px;
  57.             width: 45%;
  58.         }
  59.     }
  60.     @media only screen and (max-width: 1366px){
  61.         #eikona {
  62.             top: 368px;
  63.             width: 45%;
  64.         }
  65.     }
  66.     @media only screen and (max-width: 1280px){
  67.         #eikona {
  68.             top: 390px;
  69.             width: 45%;
  70.         }
  71.     }
  72.     @media only screen and (max-width: 1100px){
  73.         #eikona {
  74.             top: 464px;
  75.             width: 45%;
  76.         }
  77.     }
  78.     @media only screen and (max-width: 990px){
  79.         #eikona {
  80.             top: 520px;
  81.             width: 45%;
  82.         }
  83.     }
  84.     @media only screen and (max-width: 900px){
  85.         #eikona {
  86.             top: 550px;
  87.             width: 45%;
  88.         }
  89.     }
  90.     @media only screen and (max-width: 830px){
  91.         #eikona {
  92.             top: 567px;
  93.             width: 45%;
  94.         }
  95.     }
  96.     @media only screen and (max-width: 768px){
  97.         #eikona {
  98.             top: 250px;
  99.             width: 45%;
  100.         }
  101.     }
  102.     @media only screen and (max-width: 600px){
  103.         #eikona {
  104.             top: 230px;
  105.             width: 60%;
  106.         }
  107.     }
  108. `
  109.  
  110. let style = document.createElement("style");
  111. style.innerHTML = keyframes;
  112. document.head.appendChild(style);
  113.  
  114. imageContainer.appendChild(eikona);
  115.  
  116. // hide the old backgrounds
  117. imageContainer.style.backgroundImage = "none";
  118. imageContainer2.style.backgroundImage = "none";
  119. dropdownn.style.zIndex = "3";
  120. document.querySelector("body > div.dots-bg > div > div > div > div.center-vertical.col-md-6 > div.jump-menu-container.animate__animated.animate__fadeIn > span > span.selection > span").style.backgroundColor = "#ffffff00";
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement