Параллакс-скроллинг фонового изображения и всего контента - PullRequest
Новая
       7

Параллакс-скроллинг фонового изображения и всего контента

0 голосов
/ 08 июня 2018

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

Например, что-то вроде http://jsfiddle.net/JSDesign/c7atw4u4/, но только с обычным полноэкранным фоном (обложка или что-то еще), и без полосы прокрутки, если не нужно и т. Д. 

(function($) {

    $.fn.parallax = function(options) {

        var windowHeight = $(window).height();

        // Establish default settings
        var settings = $.extend({
            speed        : 0.05
        }, options);

        // Iterate over each object in collection
        return this.each( function() {

        // Save a reference to the element
        var $this = $(this);

        // Set up Scroll Handler
        $(document).scroll(function(){

    var scrollTop = $(window).scrollTop();
            var offset = $this.offset().top;
            var height = $this.outerHeight();

    // Check if above or below viewport
if (offset + height <= scrollTop || offset >= scrollTop + windowHeight) {
return;
}

var yBgPosition = Math.round((offset - scrollTop) * settings.speed);

                // Apply the Y Background Position to Set the Parallax Effect
    $this.css('background-position', 'center ' + yBgPosition + 'px');
                
        });
        });
    }

    // THIS PART WOULD GO AT THE BOTTOM OF THE HTML PAGE (INSIDE <script> TAGS)
    $('.parallax').parallax({
		speed : 0.05
	});

}(jQuery));
html {width: 100%; height: 100%; }
.parallax {
    height: 1600px;  /* THIS CAN BE SHORTER IN A REAL DOC */
    background-position: center top;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('https://unsplash.imgix.net/reserve/m6rT4MYFQ7CT8j9m2AEC_JakeGivens%20-%20Sunset%20in%20the%20Park.JPG?q=75&fm=jpg&auto=format&s=0798c4e39d1acb580b25a93863dcae97');
    background-size: cover;
    padding-top: 180px;
}
.parallax h1 {
    font-size: 200%;
    text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="parallax">
	<h1>A Riveting Title</h1>
</section>
...