Есть ли способ анимации прокрутки с помощью CSS3?
Что-то вроде этого?
@-webkit-keyframes scrolltoview
{
0% { scrollTop: 0; }
100% { scrollTop: 30%; }
}
Как вставить css, где находится точка зрения анимации?
Есть ли способ анимации прокрутки с помощью CSS3?
Что-то вроде этого?
@-webkit-keyframes scrolltoview
{
0% { scrollTop: 0; }
100% { scrollTop: 30%; }
}
Как вставить css, где находится точка зрения анимации?
css3 анимации работают только с свойствами css. это невозможно в пределах css.
Как объяснено здесь, вы можете сделать это, используя трюк margin-top
и динамически обновляя положение прокрутки. Вы можете проверить демонстрацию . Код прямолинейный:
// Define the variables
var easing, e, pos;
$(function(){
// Get the click event
$("#go-top").on("click", function(){
// Get the scroll pos
pos= $(window).scrollTop();
// Set the body top margin
$("body").css({
"margin-top": -pos+"px",
"overflow-y": "scroll", // This property is posed for fix the blink of the window width change
});
// Make the scroll handle on the position 0
$(window).scrollTop(0);
// Add the transition property to the body element
$("body").css("transition", "all 1s ease");
// Apply the scroll effects
$("body").css("margin-top", "0");
// Wait until the transition end
$("body").on("webkitTransitionEnd transitionend msTransitionEnd oTransitionEnd", function(){
// Remove the transition property
$("body").css("transition", "none");
});
});
});
@AndrewP предоставил хороший рабочий пример на основе этой идеи
Я обнаружил лучший способ анимации прокрутки, который должен использовать JavaScript для перевода тела документа. Преимущества анимации с переводом по марже или позиции довольно хорошо документированы (http://goo.gl/nA4ccd). Суть в том, что при анимации элементов графический процессор всегда будет работать лучше.
Здесь пример, который вычисляет текущую позицию пользователя из верхней части окна, а затем плавно переводится обратно в верхнюю часть окна. Предположим, что пользователь нажал или коснулся события, вызвавшего функцию backToTop.
Смотрите в действии: http://naayt.github.io/starting_point/
function whichTransitionEvent() {
var t,
el = document.createElement('fakeelement'),
transitions = {
'transition':'transitionend',
'OTransition':'oTransitionEnd',
'MozTransition':'transitionend',
'WebkitTransition':'webkitTransitionEnd'
};
for (t in transitions){
if (el.style[t] !== undefined){
return transitions[t];
}
}
}
function backToTop() {
var pos_from_top = window.scrollY,
transitionend = whichTransitionEvent(),
body = document.querySelector("body");
function scrollEndHandler() {
window.scrollTo(0, 0);
body.removeAttribute("style");
body.removeEventListener(transitionend, scrollEndHandler);
}
body.style.overflowY = "scroll";
window.scrollTop = 0;
body.style.webkitTransition = 'all .5s ease';
body.style.transition = 'all .5s ease';
body.style.webkitTransform = "translateY(" + pos_from_top + "px)";
body.style.transform = "translateY(" + pos_from_top + "px)";
transitionend && body.addEventListener(transitionend, scrollEndHandler);
}
Это очень простая функция .js, сделанная для анимации + прокрутки веб-страницы.
var Current_scroll_Y=0;
var Target_scroll_Y=0;
var scroll_Speed = 15;
function animate_Scroll(Y)
{
Target_scroll_Y = Y;
screen_Y = Math.floor(window.scrollY);
//Scroll Down
if(screen_Y<Y)
{
var myWindowScroll = setInterval(function(){ screen_Y = screen_Y+scroll_Speed; if(screen_Y>=Target_scroll_Y){ clearInterval(myWindowScroll); return;} window.scrollTo(0, screen_Y); }, 3);
}
//Scroll Up
if(screen_Y>Y)
{
var myWindowScroll = setInterval(function(){ screen_Y = screen_Y-scroll_Speed; if(screen_Y<=Target_scroll_Y){ clearInterval(myWindowScroll); return;} window.scrollTo(0, screen_Y); }, 3);
}
}//End animate_Scroll
Я не думаю, что это возможно с помощью css3, но если я правильно понимаю ваш вопрос, это очень легко с jquery.
Отъезд: