Плавный переход от карандашного эскиза к картинке
Привет всем.
Есть необходимость сделать плавно изменяющийся 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, время: 22:28. |