Перемещение и трансформация блока во время скроллинга
Здравствуйте!
Подскажите, пожалуйста, как в коде реализовать вот такой эффект, как на этом сайте? Первый блок при скроллинге перемещается и трасформируется в сайдбар-меню. Если я правильно понимаю, то такой эффект в CSS достигнут с помощью transform и transition. А как этот момент реализован в JavaScript? |
Есть в jQuery scrollTop. Можно получать расстояние при прокрутке, и если оно соответствует определенным значениям, менять стили (задавать класс, например) нужному блоку.
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>
<body>
<div id="test" style="height:2000px;"></div>
<div class="floatDiv"></div>
<script>
$(document).ready(function () {
var element = document.querySelector('.floatDiv');
$(window).scroll(function(){
var ScrollTop = parseInt($(window).scrollTop());
if (ScrollTop > 300 && ScrollTop < 1000) {
element.classList.add("left");
}else{
element.classList.remove("left");
}
if (ScrollTop > 1000) {
element.classList.add("left2");
}else{
element.classList.remove("left2");
}
});
});
</script>
<style>
body{
margin: 0;
padding: 0;
}
.floatDiv{
width: 200px;
height: 200px;
background:darkOrange;
margin:0 auto;
position:fixed;
top:0;
transition: 1s;
}
.left{
background: #333;
height: 100%;
width: 100px;
transition: 1s;
}
.left2{
background: blue;
height: 100px;
width: 100%;
transition: 1s;
bottom:0;
}
</style>
</body>
</html>
|
Цитата:
|
| Часовой пояс GMT +3, время: 15:12. |