Я обертываю сайт, который включает в себя несколько элементов (изображение/текст/диагональная линия), которые должны масштабироваться пропорционально на разных экранах.Почему мой jQuery изменяет размер стрельбы непоследовательно?
Поскольку есть текст, который нужно изменить, я использую jQuery для вычисления измерений для всех элементов на основе отношения. Это было лучшее решение, о котором я мог думать в то время, и с приближением срока, я думаю, что я застрял с ним. Это одностраничный сайт, который прокручивается по странице (например, полные страницы в окне просмотра).
Here's a link to the demo site
Идея коды:
- Проверяет высоту окна просмотра, чтобы установить размер контейнера
- Установите высоту обертки элемента, основанному на размере контейнера и необходимый поля
- Установите ширину основываясь на соотношении
- Используйте эти значения, чтобы рассчитать размер шрифта, размер изображения, nd offsets
Поскольку экран изменен, элемент пропорционально сокращается, чтобы заполнить доступное пространство.
Это выглядит вроде как это:
Есть две панели, как это. Я повторно использую тот же код (с разными именами переменных и несколькими различиями в размерах) для второй панели.
Вот мой Javascript/JQuery для первого:
// Set panel height on page load & resize
$(window).on("resize", function() {
var $panelHeight = $(window).height();
var $headerHeight = $('.banner').height();
// General height for panels
$('.bg-panel').css('height', $panelHeight);
$('.bg-panel').css('padding-top', $headerHeight);
}).resize();
// We want to scale content proportionately
// First let's get some breakpoints
var $breakPoint = 768;
var $breakPointSM = 480;
// Panel 1
$(window).on("resize", function() {
// Check height of current panel
// If on single-column view, we want to measure the space between the text column and bottom of screen
// Otherwise, height of entire panel
var $windowHeight = $('.panel-test').height();
// But we need to subtract the header height, so our math is correct
var $headerHeight = $('.banner').height();
var $windowHeight = $windowHeight - $headerHeight;
// Now we have the correct height to work with
// We're at 768px or below, subtract the text element from the overall height
if ($(document).width() <= $breakPoint) {
var $heightofDiv = $('.panel-1-text').height();
var $mobileHeight = $windowHeight - $heightofDiv;
var $windowHeight = $mobileHeight;
}
// Save the window height for calculating our margins!
var $windowHeightforMargins = $windowHeight;
// Top and bottom margins
var $marginTop = $windowHeight * (102/792); // ratio from PSD
var $marginBottom = $windowHeight * (84/792); // ratio from PSD
var $marginTotal = $marginTop + $marginBottom;
// Responsive solution
// As browser shrinks, reduce the height of panel so it produces a smaller container
if ($(document).width() > 1200 && $(document).width() <= 1440) {
var $windowHeight = $windowHeight * 0.9;
var $marginTop = $marginTop * 2;
}
else if ($(document).width() > 990 && $(document).width() <= 1200) {
var $windowHeight = $windowHeight * 0.8;
var $marginTop = $marginTop * 3;
}
else if ($(document).width() > $breakPoint && $(document).width() <= 990) {
var $windowHeight = $windowHeight * 0.7;
var $marginTop = $marginTop * 3.5;
}
else if ($(document).width() < $breakPoint) { // Ratio here goes up again because we're accounting for new height with $mobileHeight
var $windowHeight = $windowHeight * 0.8;
}
// This ratio determines the width of the container
var $ratio = 697/607; // from PSD
// Set container height, depending on height of panel
if ($(document).width() <= $breakPointSM) {
var $taglinesHeight = ($windowHeight * 1.5); // Scale up for phones
}
else if ($(document).width() > $breakPointSM && $(document).width() <= $breakPoint){
var $taglinesHeight = ($windowHeight * 1); // Scale down for tablet
}
else {
var $taglinesHeight = $windowHeight - $marginTotal;
}
// Set container width as ratio of height
if ($(document).width() <= $breakPoint) {
var $taglinesWidth = $taglinesHeight * $ratio
} else {
var $taglinesWidth = $taglinesHeight * $ratio
}
$('.panel-test .bg-taglines').css("width", $taglinesWidth);
$('.panel-test .bg-taglines').css("height", $taglinesHeight);
// Add top margin if above breakpoint
if ($(document).width() > $breakPoint) { // No margin unless above 768px
$('.panel-test .bg-taglines').css("margin-top", $marginTop);
}
else {
$('.panel-test .panel-1-tagline').css("bottom", $marginTop);
}
// Set font size
var $fontSize = $taglinesWidth * 0.12;
$('.bg-panel h4').css("font-size", $fontSize);
// Set pink line origin (relative to bottom-left of frame)
var $pinkX = $taglinesWidth * (286/705);
var $pinkY = $taglinesHeight * (192/607);
$('.panel-test .animation-wrapper').css("left", $pinkX);
$('.panel-test .animation-wrapper').css("bottom", $pinkY);
// Set image size
var $imageWidth = $taglinesWidth * 0.556;
$('.panel-test .scaleable-image').css("width", $imageWidth);
// Set h3 margin from top
if ($(document).width() >= $breakPoint) {
var $marginH3 = $windowHeight * (217/792); // ratio from PSD
$('.panel-test h3').css("margin-top", $marginH3);
} else {
// CSS
}
// Set line offset from top
var $lineOffset = $taglinesHeight * 0.7;
$('.panel-test .line-wrapper').css("top", $lineOffset);
// Set line length
var $lineLong = $taglinesWidth * 1;
$('.panel-test .pink-line').css("width", $lineLong);
}).resize();
Он работает: MOST времени.
Если я перетащил свое окно для изменения размера, некоторые элементы будут изменены. Другие нет.
Обновление страницы обычно решает его, но сейчас элементы (в основном изображения!) Просто не масштабируются правильно и не синхронизируются с другими элементами.
Я очень новичок в jQuery, и это мое первое крупное мероприятие. Новое в использовании resize. Надеюсь, я просто сделал головокружение, которое легко исправить.
Спасибо!
Другие плагины в использовании: jQuery Scrollify (для полной прокрутки страницы) и ScrollReveal.