Изменение размера изображения при прокрутке

Я пытаюсь создать веб-сайт и вставить логотип, который будет менять свой размер при прокрутке пользователем. Сейчас я не могу найти формулу, позволяющую применить это к различным мониторам (я могу только вручную ввести коэффициент, подходящий для моего монитора).

Вот что я написал на данный момент:

$(window).scroll(function() {
            var scroll = window.scrollY
            /*
            var testDiv = document.getElementById("trade"); //this element is the limit to where the picture should be resized (should be same as clients height)
            var move = testDiv.offsetTop-$(window).scrollTop()-66
            console.info(move)
            */
        //all in pixels (px)
        
            var newWidth = 1024 - scroll/1.128 //this number only works for my monitor 
            var newHeight = 223 - scroll/5  //same here
          
            var minWidth = 308; 
            if (newWidth < minWidth) {
                newWidth = minWidth;
            }
            var minHeight = 64;
            if (newHeight < minHeight) {
                newHeight = minHeight;
            }
        
        
            $(".navbar-brand img").css({
                width: newWidth + 'px',
                height: newHeight + 'px'
            });

           
            
        });

<html>
<head>
    <link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel = "stylesheet" href = "style.css">
</head>

<body>
    <div id = "home">
        <nav class = "navbar navbar-expand-lg fixed-top">
            <div class = "container-fluid">
                <a href = "#home" class = "navbar-brand fixed-top" id = "navbar-brand">
                    <img id = "cover-image" src = "RECMAN-header.png" title = "home">
                </a>
            </div>
        </nav>
        <div class = "dataHeight">
        </div>
    </div>
        

    IMAGE SHOULD BE AT ITS SET SIZE (308x64) BEFORE HERE

    <script src = "https://code.jquery.com/jquery-3.4.1.min.js">
    </script>
    <script src = "script.js"></script>
</body>
</html>

.navbar-brand{
    width: 0;
    padding-top: 2px;
    padding-left: .5%;
}
body{
height:2000px;  
}
.dataHeight{
    height: 100vh;
background-color:lightblue;
}

Изображение будет равномерно уменьшаться по мере прокрутки вниз и увеличиваться, если пользователь прокручивает вверх. Изображение должно быть уменьшено до определенного размера, прежде чем оно достигнет следующего элемента (следующий элемент эквивалентен высоте окна). Я пытаюсь найти формулу, которая идеально уменьшала бы размер изображения на мониторах разного размера.

Если необходима дополнительная информация, пожалуйста, сообщите мне

Пожалуйста, предоставьте минимальный воспроизводимый пример

— 05.06.2024 18:25

К вашему сведению, вы можете сделать это с помощью CSS, только используя анимацию-временную шкалу :scroll(). Проверьте эту ссылку

— 05.06.2024 18:34

Просто используйте свойство CSS Transform/Scale и отрегулируйте величину с помощью прослушивателя событий прокрутки JavaScript.

— 05.06.2024 18:48

Может понравиться вот это: stackoverflow.com/questions/3971841/…

— 05.06.2024 21:21

javascript html jquery css

05.06.2024 18:22

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Учтите следующее:

https://jsfiddle.net/Twisty/1qbth6j8/

HTML

<link rel = "stylesheet" href = "https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src = "https://code.jquery.com/jquery-3.4.1.min.js"></script>
<div id = "home">
  <nav class = "navbar navbar-expand-lg fixed-top">
    <div class = "container-fluid">
      <a href = "#home" class = "navbar-brand fixed-top" id = "navbar-brand">
        <img id = "cover-image" src = "RECMAN-header.png" title = "home">
      </a>
    </div>
  </nav>
  <div class = "dataHeight">
  </div>
</div>

CSS

.navbar-brand {
  width: 0;
  padding-top: 2px;
  padding-left: 0.5%;
}

.navbar-brand img {
  width: 1024px;
  height: 223px;
  border: 1px solid #222;
}

body {
  height: 2000px;
}

.dataHeight {
  height: 100vh;
  background-color: lightblue;
}

JavaScript

$(function() {
  var ratio = $("body").height() / $(".navbar-brand img").height();
  console.info("Ratio: " + ratio);
  $(window).scroll(function() {
    var scroll = window.scrollY;
    var newWidth = Math.floor(1024 - (scroll * ratio))
    var newHeight = Math.floor(223 - (scroll))

    var minWidth = 308;
    if (newWidth < minWidth) {
      newWidth = minWidth;
    }
    var minHeight = 64;
    if (newHeight < minHeight) {
      newHeight = minHeight;
    }

    console.info("Scroll: ", newWidth, newHeight);
    $(".navbar-brand img").css({
      width: newWidth + 'px',
      height: newHeight + 'px'
    });
  });
});

Когда пользователь прокручивает страницу вниз или вверх, изображение масштабируется.

05.06.2024 21:59