Сделать изображение, когда пользователь прокручивает

81
9

У меня очень длинная html-страница с множеством вещей. Я хочу, чтобы изображение в div отображалось, когда пользователь прокручивал страницу вниз и доходил до div.

Упражнение будет управляться с переходом свойства css: непрозрачность. Но я не понимаю, как вызвать эффект.

спросил(а) 2013-11-14T14:35:00+04:00 6 лет, 10 месяцев назад
1
Решение
112

Exemple

CSS

.imageToAppear{display:none;opacity:0}

HTML

<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="/01.png"></div>

Jquery

$( "#wantedonscroll" ).scroll(function() {
$("#imageToAppear").fadeIn();
});

вы можете costumize затухать в случае здесь документация Jquery Fadein

ответил(а) 2013-11-14T14:52:00+04:00 6 лет, 10 месяцев назад
42

спасибо за ваш ответ :)

Но это просто не работает на моей странице html...

это мой файл:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
<style type="text/css">
#imageToAppear{display:none;opacity:0}
</style>
</head>

<body>
<div>
<p>Lorem ispum .... and a lot of things in order to have something to scroll</p>
</div>
<div id="wantedonscroll"></div>
<div id="imageToAppear"><img src="test.png"></div>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("#wantedonscroll").scroll(function() {
$("#imageToAppear").fadeIn();
});
</script>
</body>
</html>

что с этим не так?

ответил(а) 2013-11-15T11:59:00+04:00 6 лет, 10 месяцев назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема