Блог

Главная - Вопросы по программированию - Как сделать так, чтобы стрелка вверх плавно исчезала, когда она касается изображения целевой страницы?

Как сделать так, чтобы стрелка вверх плавно исчезала, когда она касается изображения целевой страницы?

#javascript #html #css #web #frontend

Вопрос:

Пожалуйста, помогите, ребята ! У меня есть стрелка, которая выводит меня на целевую страницу, когда я нажимаю на нее. Я хочу, чтобы он плавно исчез, как только коснется изображения целевой страницы. Я хочу заняться CSS.

Это исходный код:

 <!-- Start Bottom to scroll you up  -->

<div class="scrollUp">

  <a href="#header" id="button">
    <i class="fas fa-arrow-up"></i>
  </a>


  <style>
      /* To style a button that helps to scroll up */
      @keyframes mymove{
          100%{transform: translate(0px, -10px);

          }
      }
      #button {
          position: fixed;
          right: 2%;
          bottom: 2%;
          height: 60px;
          width: 60px;
          color: #10cab7;
          font-size: 35px;
          animation: mymove 2s infinite;
          z-index: 1;
          background-color: #2d2c2d;
          text-align: center;
          padding-top: 12px ;
          border-radius: 50%;
      }
      #button:hover{
          cursor: pointer;
          color: #38f8e5;
          transition: all 0.3s;
      }
  </style>
  
</div>
<!-- End Bottom to scroll you up  -->

Ответ №1:

вы можете использовать свойство перехода css для плавного перемещения. https://www.w3schools.com/css/css3_transitions.asp

Эта ссылка отсылает вас к учебнику w3schools по свойству перехода. Надеюсь, эта ссылка окажется полезной.

Комментарии:

1. На самом деле я хочу, чтобы он плавно исчезал, КОГДА он касается рисунка на целевой странице. Что использовать в этом случае ?

2. Да, вы можете использовать js, как при нажатии, а затем установить «нет отображения». Переход позаботится о плавном исчезновении

3. Я понимаю, о чем вы говорите. Извините, что я, возможно, неправильно объяснил. У меня есть посадочная фотография, которая занимает большую часть страницы. Кроме того, у меня есть стрелка вверх, которая не видна, когда я прокручиваю изображение на посадке, потому что z-индекс изображения больше, чем у стрелки. Независимо от того, нажимаю я на стрелку или нет, я хочу, чтобы она исчезла, когда я прокручиваю изображение. Также появляется таким же образом снова, когда я прокручиваю вниз. Ты понял, к чему я клоню ?

4. Затем, используя js, вы можете проверить вот так. Img.addEventListener(’прокрутка’,()=>{button.style.display=’нет’});. Переход уже должен присутствовать в CSS кнопки. И обратное должно быть прямо противоположным.

Метки: , ,