Как сделать изображение в виде баннера с эффектом параллакса без background-image? - PullRequest
0 голосов
/ 25 января 2019

Я хочу сделать баннер с эффектом параллакса. Баннер должен быть изображением, а не фоновым изображением, это должно быть изображение. Изображение баннера параллакса должно прокручиваться сверху вниз, а изображение должно быть в центре. Когда меню меняется, баннер не должен подниматься, как в примере ниже. Что я сделал к этому моменту:

$(document).ready(function(){

$(window).scroll(function() {
  var height = $(window).scrollTop();

  if(height >= 50) {
    $('.banner').css('paddingTop', '30px');
    if($(window).width() < 991){
      $('.banner').css('paddingTop', '10px');
    } else {
      $('.banner').css('paddingTop', '30px');
    };
    $('.header-menu').css('position', 'fixed');
    $('.header-menu').css('width', '100%');
    $('.header-contact').css('visibility','hidden');
    $('.header-contact').css('position','fixed');
    $('.header-contact').css('z-index','-999');
    $('.header-menu').css('padding', '5px');
  } else if (height <= 49) {
    $('.banner').css('paddingTop', '');
    $('.header-menu').css('position', 'relative');
    $('.header-menu').css('padding', '');
    $('.header-menu').css('width', '');
    $('.header-contact').css('visibility','');
    $('.header-contact').css('position','');
    $('.header-contact').css('z-index','');
  }
});


  var onScroll = function() {
    var scrollTop = $(this).scrollTop();
    $('.banner').each(function(index, elem) {
      var $elem = $(elem);
      $elem.find('img').css('top', scrollTop - $elem.offset().top);
    });
  };
  onScroll.apply(window);
  $(window).on('scroll', onScroll);

});
.header-contact {
    background-color: #000000;
    padding-top: 15px;
    padding-bottom: 15px;
}

.header-contact .header-socials a {
    display: inline-block;
    color: #ffffff;
}

.polylang {
    padding-right: 25px;
}

.polylang a {
    color: #ffffff;
    font-size: 12px;
    font-weight: 500;
}


.header-menu {
    padding-top: 15px;
    padding-bottom: 15px;
    background-color: #fff;
    z-index: 999;
}

.header-menu .logo {
    padding-left: 25px; 
}

.content {
  height: 500px;
}

.paralax-image {
  overflow: hidden;
  height: 200px;
  position: relative;
}

.paralax-image img {
  position: absolute;
  height: 100vh;
  min-width:100%;
}




.banner {
  height: 60vh;
}

.banner-subpage .banner{
  height: 60vh;
  position: relative;
  overflow: hidden;
}

.banner-subpage img {
    max-width: 100%;
    height: 100vh;
    object-fit: cover;
    position: absolute;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<header>
    <div class="container-fluid">
        <div class="row align-items-center justify-content-end header-contact">
            <div class='header-contact-links'>
            </div>

            <div class="polylang">
                <a href="">DE</a>
                <a href="">EN</a>
            </div>
        </div>
        <div class="row align-items-center header-menu">
            <div class="col-12 logo">
                <a href="/">
                    <img src="https://c5.rgstatic.net/m/4671872220764/images/template/default/profile/profile_default_m.jpg" alt="">
                </a>
             </div>
        </div>
    </div>
</header>







<section class='banner-subpage'>
<div class='col-12 d-flex banner'>
<img src='https://support.squarespace.com/hc/en-us/article_attachments/211043968/index-page-banner.png' alt=''>
</div>
<section>
<div class='text'>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.</p>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec malesuada tempus libero, non ullamcorper mi congue quis. Vestibulum in tincidunt odio, quis pharetra sem. Quisque in scelerisque lorem, in malesuada tortor. Suspendisse sodales eleifend dui a tincidunt. Nulla ullamcorper lacus vitae nulla facilisis, non bibendum ex tempus. Suspendisse id dui imperdiet, feugiat odio eget, cursus urna. Morbi sed ultricies magna. Nulla convallis et dolor eget sodales. Nullam tortor sem, rhoncus in tincidunt eget, porttitor eu quam. Cras luctus dolor dui, eu sodales libero convallis sit amet.</p>
<img src='https://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500' alt=''>
</div>
...