webmanss,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.height{
width:300px;
height:3000px;
background:#FFF;
}
.ret_block{
height:65px;
width:65px;
position: fixed;
opacity:0;
right:100px;
bottom: -70px;
}
.ret_block.up{
transition:bottom 2s cubic-bezier(.35,1.88,.51,.97), opacity 3s ease-out;
opacity: 1;
bottom: 100px;
}
.ret{
background:#80c111;
opacity:0.9;
border-radius: 50% !important;
cursor:move;
height:65px;
position:absolute;
width:65px;
z-index:9999;
cursor:pointer;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
var a = $(".ret_block"),
b;
$(window).scroll(function() {
window.clearTimeout(b);
a.removeClass("up");
b = window.setTimeout(function() {
a.addClass("up")
}, 300)
}).trigger("scroll")
});
</script>
</head>
<body>
<div class="height">
<div class="ret_block">
<div class="ret"> </div>
</div>
</div>
</body>
</html>
|
рони,
как то не очень красиво =( |
j0hnik,
Цитата:
|
рони, я про анимацию. изначальная версия симпатичней
|
j0hnik,
строка 25 открыта для вашего творчества :) |
рони,
я думаю, тут подразумевался скроллинг элемента и его анимация при выходе из вьюпорта. https://jsfiddle.net/5ro06noz/3/ |
Rasy,
подождём автора темы ... |
Цитата:
window.innerHeight + $(window).scrollTop() рони, спасибо за код, но в моем примере элемент появляется снизу только при обновлении страницы, ну и при скроле наверх. Я понимаю, что изначально не совсем конкретно изложил свою просьбу, но про появление снизу при каждом скроле я не говорил и мне не ясно, каким образом 25 строка вернет анимацию элемента, как в моем примере и уберет появление при каждом скроле? Хотя должен отметить, что появление элемента в вашем примере выглядит довольно интересно. Еще бы вернуть анимацию перемещения при скроле. Цитата:
|
Webrow,
я пас, не понимаю что вам нужно. |
Посмотрите мой пример из первого поста, все что мне нужно, это заменить document.body.scrollHeight, которая определяет, откуда будет стартовать объект при обновлении страницы. С document.body.scrollHeight при обновлении страницы даже заметно, как полоса скрола меняет размер, когда стартует объект. В ваших примерах такого не наблюдается, старт объекта происходит корректно.
|
| Часовой пояс GMT +3, время: 01:11. |