开发者

jQuery scrollto after timed delay

开发者 https://www.devze.com 2023-03-18 23:30 出处:网络
I have this page: http://www.yasyf.com/services.html, in which a video autoplays. I would like to have it so that once the video finishes playing (a set amount of time), the page automatically scrolls

I have this page: http://www.yasyf.com/services.html, in which a video autoplays. I would like to have it so that once the video finishes playing (a set amount of time), the page automatically scrolls down to the text, using a jQuery scrollto with timed d开发者_StackOverflow中文版elay, but only if the page has not yet been scrolled. Is this possible?


See here the example I made for you.

MORE INFO

Depending on the player you're using, a video finished event could be available. You can then attach the scrollTo function to it. You can read more about this event here:

  • YOUTUBE
  • FLOWPLAYER
  • ADOBE

If you can, give also a look to this incredibly useful resource and this spec about video in HTML5.

About vid.ly : It seems to me that they use an HTML5 with Flash fallback player. See here the "how can I use vid.ly" section.

JS code :

// add a scrollTo method to jQuery
$.fn.scrollTo = function(duration){
  if(duration == null){ duration = 1000; }
  var offset = $(this).offset().top - $(window).height()/2 + $(this).height();
  $('html,body').animate({ scrollTop: offset}, duration);
}

// Then when the dom is loaded
$("document").ready(function() {
  //for HTML5 (for flash please see the ADOBE link above.)
  $("video").bind("ended", function() {
    // Log on console just for debug
    console.log("autoplay ended! About to scroll to...");

    // scroll to a div with id="scroll_to_here"
    $('#scroll_to_here').scrollTo();
  });
});


var scrolled = false;

$(window).scroll(function(){
    scrolled = true;
});

var scroll_timer = setTimeout(function(){

    if(scrolled !== true)
    {
        // scroll to whatever
    }
},10000);


This is a simple script to do that. I assume scroll / keydown / mouse click to say "the user has interacted with the page, don't auto-scroll."

(function() {
  var scrollPage = function() {
    $.scrollTo(xyz);
  };
  var c = setTimeout(scrollPage, 35000);
  $(document.body).bind('scroll mousedown keydown', function() {
    clearTimeout(c);
  });
})();

Let me know if this helps.

0

精彩评论

暂无评论...
验证码 换一张
取 消