Выдвигать элементы за пределы экрана при изменении размера окна вместо того, чтобы сдавливать их - PullRequest
Новая
       20

Выдвигать элементы за пределы экрана при изменении размера окна вместо того, чтобы сдавливать их

0 голосов
/ 05 июля 2018

Я хотел бы оттолкнуть свои элементы от экрана при уменьшении окна, а не сдавливать их вместе. Очень похоже на верхний раздел этой страницы (верхнее изображение с текстом) - http://www.kirastokes.com/schedule/. Если вы сделаете окно меньшего размера, часть изображения сместится с экрана, чтобы вы могли видеть текстовое поле. Вместо того, чтобы сжимать все вместе, элементы на странице просто как бы сдвигаются. Как бы я это сделал?

Мой jsfiddle: http://jsfiddle.net/rhe9jtqw/

#top-section-intro-container
{
    height:700px;
    position:relative;
}

#top-section-intro-image
{    
    position:absolute;
    left:0;
    top:0;
        width: 892px;
    height: 650px;
}
#top-section-intro-text-container
{

        z-index:100;
    position:absolute;    
    color:black;
    font-size:24px;
    font-weight:bold;

    background-color:white;
    width: 558px;
    height: 480px;
    left: 800px;
    top: 78px;
}
.top-section-intro-text {
  left: 0px;
    padding-top: 144px;
    padding-left:95px;
    width: 530px;
    height: 285px;
    font-size:18px;
			font-family: lato;
    font-style: normal;
	text-align:justify;
    font-weight: 300;
    letter-spacing: 0.1px;
    line-height: 24px;
    color: #255957;
}
<div id="top-section-intro-container">
    <img id="top-section-intro-image" src="https://www.outsideonline.com/sites/default/files/styles/full-page/public/2018/05/01/alaska-trees-forest-fog-richard-bos_h.jpg?itok=eOaGR4uY"/>
    <div id="top-section-intro-text-container">
    <p class="top-section-intro-text">
        
A forest is a large area dominated by trees.[1] Hundreds of more precise definitions of forest are used throughout the world, incorporating factors such as tree density, tree height, land use, legal standing and ecological function.[2][3][4] According to the widely used[5][6] Food and Agriculture Organization definition, forests covered 4 billion hectares (9.9×109 acres) (15 million square miles) or approximately 30 percent of the world's land area in 2006. 
</p>
    </div>
</div>

Ответы [ 2 ]

0 голосов
/ 05 июля 2018

Вы можете попробовать использовать медиа-запросы CSS для этой цели.

Допустим, вы хотите, чтобы страница реагировала до определенной ширины (например, 1000 пикселей), вы можете задать для нее медиа-запрос. 

.myTopNav {
   display: flex;
}

@media (max-width: 1000px) {
   .myTopNav {
      display: initial;
      position:absolute;
      left:0;
      top:0;
   }
}

Таким образом, класс myTopNav будет перезаписан только для ширины 1000 пикселей или меньше.

Чтобы узнать больше об этом, посмотрите здесь: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

0 голосов
/ 05 июля 2018

Я бы так поступил. Если, например, минимальная ширина вашего сайта (когда он все еще выглядит хорошо) ~ 1000 пикселей, то: 

$(window).resize(function () {
        var x, temp = window.innerWidth;
        if((x = 1000 - temp) > 0){
            $("#top-section-intro-container").css({left:  -x});
        }
    });
...