• Страница 1 из 1
  • 1
Форум » Записки веб-разработчика » Начинающему вебмастеру » Размытие фона при прокрутке с помощью CSS (Изменяющийся при прокрутке фон при помощи CSS)
Размытие фона при прокрутке с помощью CSS
Kosten
Дата: Пятница, 28.09.2018, 01:47 | Сообщение 1
Администраторы
Сообщений:18250
Награды: 55


Есть отличная техника, где можно использовать картинку или фотографию для создания размытия фона. Где обычно создают путем ручного масштабирования элемента как можно быстрее при съемке. Есть очень простой и доступный по своей простоте способ, чтоб получить эффект размытия зума, где будет закреплена картинка

Здесь будет изменятся фон, в то время, когда вы будете пользоваться прокруткой, а точнее прокручивать страницу как вниз, так и вверх. Если сравнивать этот эффект, то можно взять саму конфигурацию, и примерно похоже с последствием открытие окна, а далее по функциональности идет закрытие. Так что это смотрится оригинально, где изначально создаем тему, в нее вносим изображение, которое идет как шапка.

Где под ней идет статья, и вот начинаем ее читать, и безусловно прокручиваем, и с каждой прокруткой это изображение начинает исчезать, а точнее появляется красивый эффект, где по окончанию становится темный фон, но если делаем светлый шрифт, так как все можно самостоятельно изменить по цветовой гамме.

Так что сам размытые фоны может стать очень мощным инструментом в вашем арсенале редактирования фотографий.



HTML

Код
<div class="nasenouncud"></div>
<div class="kebonsanelada">
  <h2>ZorNet - портал для вебмастера</h2>
  <p>В течение последних нескольких лет консольные.</p>
  <p>После всестороннего процесса оценки SIE определила путь к поддержке.</p>
  <p>Компания начинает открытую бета-версию, которая позволит.</p>
  <h2>Здесь заголовок</h2>
  <p>Это серьезное изменение для Sony, но это правильный сдвиг. </p>
  <p>Если игры привязаны к пользователям.</p>
  <p>Сообщение едва ли указывает, что Sony бросает полотенце.</p>
</div>


CSS

Код
*{
box-sizing:border-box}

body, html{
padding:0;
margin:0;
}

body{
background:#191818;
color:#fbf8f8;
}

.moragpaymen{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
opacity:0;
background:#d2d6f1;
}

.lt-ie9 .moragpaymen{
display:none;
}

.nasenouncud {
position:fixed;
top:0;
z-index:0;
width:100%;
padding-top:50%;
background: url(Ссылка на изображение) center center no-repeat;
-webkit-background-size:247%;
-moz-background-size:247%;
-o-background-size:247%;
background-size:247%;
-webkit-box-shadow: 0 -50px 20px -20px #211f1f inset;
-moz-box-shadow: 0 -50px 20px -20px #232323 inset;
box-shadow: 0 -50px 20px -20px #232323 inset;
}

.kebonsanelada{
position:relative;
z-index:1;
padding-top:45%;
width:89%;
margin:0 auto;
}

@media only screen and (min-width:36.250em) {
  .kebonsanelada {width:60%; padding-top:35% }
}


JS

Код
$(function(){
    zoom = $('.nasenouncud').css('background-size')
    zoom = parseFloat(zoom)/100
    size = zoom * $('.nasenouncud').width();
    $(window).on('scroll', function(){
      fromTop = $(window).scrollTop();
      newSize = size - (fromTop/3);
      if (newSize > $('.nasenouncud').width()) {
          $('.nasenouncud').css({
              '-webkit-background-size': newSize,
              '-moz-background-size': newSize,
              '-o-background-size': newSize,
              'background-size': newSize,
              '-webkit-filter':'blur('+ 0 + (fromTop/100) + 'px)',
              'opacity': 1 - ((fromTop / $('html').height()) * 1.3)
          });
      }
    });
});

$(function (){
    var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
    var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor);

    if (isChrome || isSafari) {
    } else {
        $('.nasenouncud').append('<div class="moragpaymen"></div>');
        $(window).on('scroll', function(){
            var opacity = 0 + ($(window).scrollTop()/5000);
            $('.moragpaymen').css('opacity', opacity);
        });
    }
});


Здесь нужно заметить, что этот эффект создан с помощью загрузки JavaScript и плагина, что представлено в материале, где это не необязательно для современного браузера.

Демонстрация
Прикрепления: 2774111.png(100.8 Kb)
Страна: (RU)
Форум » Записки веб-разработчика » Начинающему вебмастеру » Размытие фона при прокрутке с помощью CSS (Изменяющийся при прокрутке фон при помощи CSS)
  • Страница 1 из 1
  • 1
Поиск: