There is the following construction:

.parent { min-height: 500px; width: 80%; } .bgchange { display: block; overflow: hidden; background: url(https://s4.wampi.ru/2017/09/11/001.jpg); background-position: center top; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; width: 100%; } /* картинки для смены основного background: https://s4.wampi.ru/2017/09/11/002.jpg; https://s4.wampi.ru/2017/09/11/003.jpg; https://s4.wampi.ru/2017/09/11/004.jpg; */ .bgchange p { background: rgba(255, 255, 255, 0.85); max-width: 250px; margin: 30px auto; padding: 20px 30px; } p { width: 100%; font-size: 16px; line-height: 130%; text-align: center; } 
 <div class="parent"> <p>Синдром кота - это когда ты долго долбишься в закрытую дверь, а когда ее наконец открывают, задумываешься о том, а нужно ли оно тебе вообще, зачем долбиться-то надо было?</p> <div class="bgchange"> <p>И только много лет спустя, обзаведясь женой и многочисленным семейством, Робинзон Крузо понял, что прожил 28 лет на острове свободы.</p> </div> <p>Мэт Дарлинг - тролль высочайшего уровня. Живет он рядом с аэропортом. Пока был молодой и спал крепко, самолеты его не сильно беспокоили, но с годами у него развилась чувствительнось к шуму, и он почти перестал спать. Поэтому Мэт на крыше своего дома вывел огромную надпись "Добро пожаловать в Кливлэнд". И все бы хорошо, но он живет в Милуоки. Пассажиры самолетов заходящих на посадку устраивали форменные истерики, увидев надпись и решив что прилетели не туда, в связи с чем, летчики стали облетать его дом стороной и престарелый тролль смог нормально высыпаться...)</p> </div>

In a block with a bgchange class, bgchange is required to smoothly (transparency, smoothly flowing into the next image) to change the background image at a specified interval. The list of pictures, which ones to change, is in the css code of the construction. At the same time, it is necessary that each time the page is loaded / updated, the first background image will randomly change. It is also important that the background-attachment: fixed; property background-attachment: fixed; preserved ie when scrolling the page, the background remained in the same position (the example will be scrolled for clarity).

Tell me, please, how to implement this task in the form of a script?

    1 answer 1

    Maybe someone will come in handy: I ​​solved the original problem for myself (except for the random change of the image when the page was updated) using the script "Vegas Background Ver.2"

    Procedure:

    1) Download (from the developer's site) and connect (to your site) JS script vegas.min.js

    2) Similarly download and connect css vegas.min.css

    3) Add a call function (as in the example) with the necessary settings. On the developer’s site in the documentation for the word sea of ​​various settings for the script (animation, transitions, additional design, etc.)

    4) Add a .vegas-slide-inner {background-attachment: fixed!important;} rule to your css .vegas-slide-inner {background-attachment: fixed!important;}

     $(function() { $('.bgchange').vegas({ delay: 2500, timer: false, transition: 'fade', transitionDuration: 800, slides: [ { src: 'https://s4.wampi.ru/2017/09/11/001.jpg' }, { src: 'https://s4.wampi.ru/2017/09/11/002.jpg' }, { src: 'https://s4.wampi.ru/2017/09/11/003.jpg' }, { src: 'https://s4.wampi.ru/2017/09/11/004.jpg' } ] }); }); 
     .parent { min-height: 500px; width: 80%; } .vegas-slide-inner { background-attachment: fixed!important; } .bgchange { display: block; overflow: hidden; width: 100%; } .bgchange p { background: rgba(255, 255, 255, 0.85); max-width: 250px; margin: 30px auto; padding: 20px 30px; } p { width: 100%; font-size: 16px; line-height: 130%; text-align: center; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/vegas/2.4.0/vegas.min.js"></script> <link rel="stylesheet" href="https://jaysalvat.imtqy.com/vegas/releases/latest/vegas.min.css"> <div class="parent"> <p>Синдром кота - это когда ты долго долбишься в закрытую дверь, а когда ее наконец открывают, задумываешься о том, а нужно ли оно тебе вообще, зачем долбиться-то надо было?</p> <div class="bgchange"> <p>И только много лет спустя, обзаведясь женой и многочисленным семейством, Робинзон Крузо понял, что прожил 28 лет на острове свободы.</p> </div> <p>Мэт Дарлинг - тролль высочайшего уровня. Живет он рядом с аэропортом. Пока был молодой и спал крепко, самолеты его не сильно беспокоили, но с годами у него развилась чувствительнось к шуму, и он почти перестал спать. Поэтому Мэт на крыше своего дома вывел огромную надпись "Добро пожаловать в Кливлэнд". И все бы хорошо, но он живет в Милуоки. Пассажиры самолетов заходящих на посадку устраивали форменные истерики, увидев надпись и решив что прилетели не туда, в связи с чем, летчики стали облетать его дом стороной и престарелый тролль смог нормально высыпаться...)</p> </div>