Плавный переход от карандашного эскиза к картинке
Привет всем.
Есть необходимость сделать плавно изменяющийся background-image от карандашного эскиза до оригинала картинки. Ясно, что для этого надо из основной картинки сделать карандашный эскиз (в инете много информации, в том же фотошопе например) и потом при скроллинге заменять карандашный эскиз на саму картинку. Весь вопрос в том, чтобы сделать это именно плавно, без резкой границы. вот здесь граница - резкая https://codyhouse.co/demo/page-scrol...cts/fixed.html а вот здесь плавно https://codepen.io/carpenumidium/pen/LeOjKM Я понимаю, что в обоих случаях используется разный механизм, в первом случае Jquery, а во втором чистый CSS. Но как говорится важен результат, а не способ достижения. Подскажите или дайте направление, как сделать задуманное? PS. Необходимое условие - чтобы фиксированная позиция карандашного эскиза точь в точь соответствовала фиксированной позиции самой картинки, чтобы был эффект перетекания карандашного эскиза в картинку... |
Цитата:
Имея 2 картинки (карандашную и оригинал) расположить их одинаково... Оригинал сделать прозрачным. Когда нужно у оригинала убирать прозрачность... Можно еще добавлять прозрачность карандашной картинке... :-? |
Предположим я прописал две картинки для background-image.
background-image: url("media/fishing.png"), url("media/mermaid.png");
А как теперь прицепить
$(window).scroll(function(){});
к самой верхней картинке бакграунда |
Вот состряпал код на скорую руку
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>HTML</title>
<style>
body, html {height: 100%;margin: 0;}
.container {height: 100%;}
.bg{height:600px;}
.image1{background:#F0E68C;}
.image2{background:url("https://s3.studytonight.com/tutorials/uploads/pictures/1629719495-.jpeg"), url("https://s3.studytonight.com/tutorials/uploads/pictures/1629719426-.jpeg");}
.image3{background:#87CEFA;}
</style>
</head>
<body>
<div class="container">
<div class="bg image1"></div>
<div class="bg image2"></div>
<div class="bg image3"></div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).scroll(function(){
$('.bg').css("opacity", 1- $(window).scrollTop() / 700)
})
})
</script>
</body>
</html>
здесь jquery обращается к классу .bg а как обратиться к верхней картинке бакграунда класса .image2 ? И причем, верхняя картинка класса .image2 постепенно увеличивает прозрачность, но нижняя картинка не показывается... |
Цитата:
Кагбэ два разных "слоя". ;) |
spasibo! Poluchilos!
|
Вроде все сделал.
Остался один момент, прошу помощи. У меня главная страница - лендинг, длинная колбаса. И нужный блок расположен на 4 месте. Мне надо отследить момент попадания заданного блока в зону видимости окна браузера и подключить аннимацию для изменения opacity background-image. То, что нашел в интернете решения работают, но не так как надо.
jQuery(document).ready(function(){
var fadeStart=1300 // scroll or less will equiv to 1 opacity
,fadeUntil=1940 // scroll or more will equiv to 0 opacity
,fading = jQuery('#new-it4738g6');
jQuery(window).scroll(function(){
var offset = jQuery(document).scrollTop(),opacity=0;
if( offset<=fadeStart ){
opacity=1;
}else if( offset<=fadeUntil ){
opacity=1-offset/fadeUntil;
}
fading.css('opacity',opacity);//.html(opacity);
});
});
jQuery(document).ready(function(){
var target = jQuery('#new-it4738g6');
var targetHeight = target.outerHeight();
jQuery(document).scroll(function(e){
var scrollPercent = (targetHeight - window.scrollY) / targetHeight;
if(scrollPercent >= 0){
target.css('opacity', scrollPercent);
}
});
});
jQuery(document).ready(function(){
jQuery(window).scroll(function(){
jQuery('#new-it4738g6').css("opacity", 1- jQuery(window).scrollTop() / 700)
})
});
все эти три решение работают не так как надо. Вот здесь нашел вроде нужную информацию https://snipp.ru/jquery/show-on-scroll Еще раз. Помогите составить код так, чтобы прозрачность начала меняться когда только блок попадет в зону видимости окна браузера и полностью будет прозрачно, когда блок занял уже 80-90% по высоте зону видимости в окне браузера. Заранее спасибо! |
rafaello, тут кагбэ уже есть варианты...
Либо используй что есть. Либо начинай учить JS и кодить сам. Либо начинай оплачивать чужой труд и умение. ;) Вот тебе еще статейка на эту тему https://snipp.ru/jquery/show-on-scroll Нативные варианты... https://ru.stackoverflow.com/questio...раузера |
| Часовой пояс GMT +3, время: 09:16. |