помогите найти фреймворк, который мог бы сделать такую анимацию (с картинками которая)
2 ответа
http://jsfiddle.net/cvcpzknp/6/
Идея такая. Если есть необходимость в поддержке более старых браузеров, то надо добавить соответствующие префиксы и, возможно, поменять единицу измерения.
function update() {
var scrolled = $(document).scrollTop();
var vh = $(window).height() / 100;
$("main section").each(function(i) {
var section = $(this);
var angle = Math.max(0, Math.min(1, (section.offset().top - (scrolled + 10*vh)) / (100 * vh)));
console.log(i, section.offset().top - (scrolled + 10*vh), angle);
section.css('transform', 'rotate(' + (i&1 ? '-' : '') + angle*8 + 'deg)');
});
}
$(document).scroll(update);
$(window).resize(update);
$(update);
header {
height: 50vh;
}
main {
overflow: hidden;
}
main section {
width: 90vw;
height: 90vh;
background: silver;
margin: 1vh auto;
transition: transform linear .25s;
transform-origin: top left;
}
main section:nth-child(even) {
transform-origin: top right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
Some content to be scrolled
</header>
<main>
<section>First</section>
<section>Second</section>
<section>Third</section>
</main>
Если речь о анимации логотипа, то там просто анимированная gif'ка на hover показывается:
.logo:hover img:first-child { display:none }
.logo:hover .logo-gif { display:block }
Если есть желание сделать подобное средствами css, то надо использовать keyframes. Хотя, кажется где-то писали, что с измененияем фона из них проблемы могут быть. Надо проверять.