| Kosten | Пятница, 28 Сентября 2018, 01:47 | Сообщение 1 |
| Есть отличная техника, где можно использовать картинку или фотографию для создания размытия фона. Где обычно создают путем ручного масштабирования элемента как можно быстрее при съемке. Есть очень простой и доступный по своей простоте способ, чтоб получить эффект размытия зума, где будет закреплена картинка
Здесь будет изменятся фон, в то время, когда вы будете пользоваться прокруткой, а точнее прокручивать страницу как вниз, так и вверх. Если сравнивать этот эффект, то можно взять саму конфигурацию, и примерно похоже с последствием открытие окна, а далее по функциональности идет закрытие. Так что это смотрится оригинально, где изначально создаем тему, в нее вносим изображение, которое идет как шапка.
Где под ней идет статья, и вот начинаем ее читать, и безусловно прокручиваем, и с каждой прокруткой это изображение начинает исчезать, а точнее появляется красивый эффект, где по окончанию становится темный фон, но если делаем светлый шрифт, так как все можно самостоятельно изменить по цветовой гамме.
Так что сам размытые фоны может стать очень мощным инструментом в вашем арсенале редактирования фотографий.
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 и плагина, что представлено в материале, где это не необязательно для современного браузера.
Демонстрация
| | Страна: (RU) |
| |
