Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 08.02.2022, 05:01
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

Плавный переход от карандашного эскиза к картинке
Привет всем.
Есть необходимость сделать плавно изменяющийся background-image от карандашного эскиза до оригинала картинки.
Ясно, что для этого надо из основной картинки сделать карандашный эскиз (в инете много информации, в том же фотошопе например) и потом при скроллинге заменять карандашный эскиз на саму картинку.
Весь вопрос в том, чтобы сделать это именно плавно, без резкой границы.
вот здесь граница - резкая
https://codyhouse.co/demo/page-scrol...cts/fixed.html
а вот здесь плавно
https://codepen.io/carpenumidium/pen/LeOjKM

Я понимаю, что в обоих случаях используется разный механизм, в первом случае Jquery, а во втором чистый CSS.
Но как говорится важен результат, а не способ достижения.

Подскажите или дайте направление, как сделать задуманное?

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

Последний раз редактировалось rafaello, 08.02.2022 в 05:03.
Ответить с цитированием
  #2 (permalink)  
Старый 08.02.2022, 08:47
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rafaello
дайте направление, как сделать задуманное?
Как вариант...
Имея 2 картинки (карандашную и оригинал) расположить их одинаково...
Оригинал сделать прозрачным.
Когда нужно у оригинала убирать прозрачность...
Можно еще добавлять прозрачность карандашной картинке...
Ответить с цитированием
  #3 (permalink)  
Старый 08.02.2022, 10:41
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

Предположим я прописал две картинки для background-image.
background-image:  url("media/fishing.png"), url("media/mermaid.png");

А как теперь прицепить
$(window).scroll(function(){});

к самой верхней картинке бакграунда
Ответить с цитированием
  #4 (permalink)  
Старый 08.02.2022, 11:14
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

Вот состряпал код на скорую руку
<!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 постепенно увеличивает прозрачность, но нижняя картинка не показывается...

Последний раз редактировалось rafaello, 08.02.2022 в 11:21.
Ответить с цитированием
  #5 (permalink)  
Старый 08.02.2022, 11:49
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

Сообщение от rafaello
Предположим я прописал две картинки для background-image.
Нужно делать не 2 бекграунда, а 2 разных элемента.
Кагбэ два разных "слоя".
Ответить с цитированием
  #6 (permalink)  
Старый 08.02.2022, 12:42
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

spasibo! Poluchilos!
Ответить с цитированием
  #7 (permalink)  
Старый 08.02.2022, 19:19
Кандидат Javascript-наук
Отправить личное сообщение для rafaello Посмотреть профиль Найти все сообщения от rafaello
 
Регистрация: 09.11.2012
Сообщений: 100

Вроде все сделал.
Остался один момент, прошу помощи.
У меня главная страница - лендинг, длинная колбаса.
И нужный блок расположен на 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% по высоте зону видимости в окне браузера.
Заранее спасибо!
Ответить с цитированием
  #8 (permalink)  
Старый 08.02.2022, 20:29
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,118

rafaello, тут кагбэ уже есть варианты...
Либо используй что есть. Либо начинай учить JS и кодить сам.
Либо начинай оплачивать чужой труд и умение.

Вот тебе еще статейка на эту тему
https://snipp.ru/jquery/show-on-scroll
Нативные варианты...
https://ru.stackoverflow.com/questio...раузера
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать плавный переход к блоку после действия .trigger('click')? NeXan jQuery 9 07.10.2017 23:27
Плавный переход к элементу по внешней ссылке deniskutovskiy jQuery 13 16.10.2015 22:30
как сделать плавный переход для onmouseover Demidoff Общие вопросы Javascript 3 23.03.2014 12:52
плавный переход через javascript blacklool (X)HTML/CSS 1 19.01.2014 16:04
JS и getURL плавный переход к anchor Blizzart Общие вопросы Javascript 4 16.01.2011 17:48