Появление исчезновение элемента при прокрутке страницы
Добрый день!
Подскажите, пожалуйста, как реализовать на сайте механизм появления элемента при прокрутке экрана - элемент движется по горизонтальной оси (с права налево, или наоборот), в зависимости от прокрутки экрана вверх или вниз. Данный механизм реализован на сайте: mhmgroup.ae Есть похожий код, но в нем элемент будет просто появляться и исчезать, но я никак не могу найти решение для необходимой мне цели:
<script type="text/javascript">
jQuery(function(f){
var element = f('#back-top');
f(window).scroll(function(){
element['fade'+ (f(this).scrollTop() > 200 ? 'In': 'Out')](500);
});
});
</script>
Спасибо :) |
Artем,
html сделайте и Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
|
Artем,
<!DOCTYPE html>
<html>
<head>
<style>
.scroller
{ position:fixed;
top:10px;
left:0px;
width:50px;
height:50px;
background-color:red
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var element = $('#back-top');
$(window).scroll(function () {
element.css('left', $(this).scrollTop() * window.innerWidth / $("#container").height() + "px");
});
});
</script></head>
<body>
<div id="container" style="position:absolute;width:100%;height:1500px"></div>
<div id="back-top" class="scroller"></div>
</body>
</html>
|
вертикальный скролл горизонтальное перемещение
Artем,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html{
width: 100%;
height: 3000px;
}
body{
position: relative;
overflow-x: hidden;
}
.first {
background: #FFCC00;
width: 100%;
height: 200px;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
transition: all .4s ease-out;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(
function () {
var l, min = 500, max = 1500, el = $(".first"), width = el.width() ;
el.css({marginLeft : -width})
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if(scroll > min && scroll < max ) l = - 104 + (scroll - min)/(max - min) * 208 + "%";
if(scroll < min) l = "-104%";
if(scroll > max) l = "104%";
if(scroll > min + 300 && scroll < max - 300 ) l = "0%";
el.css({marginLeft : l})
})
}
);
</script>
</head>
<body>
<div class='first'>
блок в середине страницы
</div>
</body>
</html>
|
Artем,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
html{
width: 100%;
height: 3000px;
}
body{
position: relative;
overflow-x: hidden;
}
.first {
background: #FFCC00;
width: 100%;
height: 200px;
text-align: center;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto 0 ;
transition: all 1.2s ease-out ;
}
.right{
margin-left : 104%;
}
.left{
margin-left : -104%;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(window).load(function() {
var min = 500,
max = 1500,
el = $(".first");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
scroll < min ? el.addClass("left") : el.removeClass("left");
scroll > max ? el.addClass("right") : el.removeClass("right")
})
}); </script>
</head>
<body>
<div class='first left'>
блок в середине страницы
</div>
</body>
</html>
|
Dilettante_Pro,
Здравствуйте! Спасибо большое Вам за ценную информацию! Сайт я делаю для себя, по урокам в интернете, но по данному моменту мне с трудом удавалось найти правильное решение. Перечитал много одинаковых статей с разными вариантами подключения jQuery, но ничего не выходит. Явно что-то просто недопонимаю и упускал. Ваши знания помогли. Прошу Вас, пожалуйста, помочь разобраться в некоторых моментах: 1. Как реализовать код, чтобы элемент (#back-top), начал смещаться с исходной позиции (на которой он размещен изначально), при прокрутке экрана? Сейчас же он смещается с левой крайней стороны экрана. 2. Пробовал различные вариации, чтобы при прокрутке экрана вниз, элемент (#back-top), начал двигаться с права налево до определенной позиции (например, до середины экрана), а не наоборот. Для этого менял значение "Left" в коде на "Right", но ничего не получилось. В чем я не прав? 3. Для затухания элемента (#back-top) при прокрутке экрана, пример данной анимации можно увидеть на сайте http://mhmgroup.ae/, я дополнил Ваш код следующим:
var scrollTop = $(window).scrollTop();
var move = scrollTop / coeff;
element['fade' + (scrollTop > 800? 'Out' : 'In')](2500);
element.css('marginLeft', move);
Возможно ли сделать, чтобы затухание элемента начиналось постепенно, от одной точки до другой, до полного исчезновения, при прокрутке экрана (как в примере на сайте)? Приведенный выше код скрывает элемент лишь после прохождения точки в 800px. с указанным временным интервалом. Спасибо! |
рони,
Здравствуйте! Благодарю за помощь! |
Artем,
Движение с определенной позиции справа налево с затуханием
<!DOCTYPE html>
<html>
<head>
<style>
.scroller
{ position:fixed;
top:10px;
right:100px;
width:50px;
height:50px;
background-color:red
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var element = $('#back-top');
$(window).scroll(function () {
element.css('right',100 + $(this).scrollTop() * (window.innerWidth - 200) / $("#container").height() + "px");
element.css('opacity', 1 - $(this).scrollTop() / $("#container").height());
});
});
</script></head>
<body>
<div id="container" style="position:absolute;width:100%;height:1500px"></div>
<div id="back-top" class="scroller"></div>
</body>
</html>
|
| Часовой пояс GMT +3, время: 05:58. |