skrollr

Change Image on Scroll Position

由 送分小仙女□ 提交于 2019-12-03 04:01:24
I would like to change an image on a certain scroll position. For example: Scroll 100px show img1.jpg Scroll 200px show img2.jpg Scroll 300px show img3.jpg Here I found an example what I mean. Any ideas? You can use the onScroll event to listen for scrolling, check at what position the scrollbar is and make the image change or whatever your heart desires. You can read more about onScroll event here . A basic code will be something like this: var onScrollHandler = function() { var newImageUrl = yourImageElement.src; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

Disable Skrollr for mobile device ( <767px )

由 自古美人都是妖i 提交于 2019-12-02 19:37:22
Firstly would like to thanks @prinzhorn for such an amazing and powerful library. My question: I have implemented a Skrollr parallax background to the header of my website but I would like to disable this feature when viewed on a mobile device, particularly iphones, etc. eg. (max-width: 767px).I was wondering what would be the best way to do this? And if the destroy() function was able to do this or I should be using another technique? Also, if destroy() is the answer, how could I implement this correctly? Many thanks and examples or demo's greatly appreciated. Skrollr has its own mobile check

Skrollr cutoff on iPad

由 吃可爱长大的小学妹 提交于 2019-12-01 11:54:06
I am using Skrollr plugin and it's working fine on desktop. On iPad though, the height of my document is cutoff. I have tried to remove all skrollr data attributes, but the issue persists, I noticed that just by activating the plugin I get this issue. I tried to enable/disable the forceHeight option but the issue persists. Any idea? Many thanks I had this issue, too, but I fixed it by adding an empty data-top and data-bottom to the #skrollr-body div. (Though depending on how strict your HTML cleaners are, you may need to add data-top="" or data-bottom="" ) <body> <div id="skrollr-body" data

Audio on scroll

由 只愿长相守 提交于 2019-11-30 14:23:14
问题 I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am currently working with: <script> $(window).scroll(function() { var height = $(document).height() - $(window).height(); var scroll = $(window).scrollTop(); var audioElm = $('#soundTour').get(0); audioElm.play(); audioElm.volume = 1 - $(window).scrollTop()/height;

Audio on scroll

由 旧街凉风 提交于 2019-11-30 09:54:59
I'm doing a website with the skrollr plugin and I'm almost done with the pictures and scrolling itself, so I'm trying to add the audio now, but I can't seem to make the audio start and stop when I want it to. This is the script I am currently working with: <script> $(window).scroll(function() { var height = $(document).height() - $(window).height(); var scroll = $(window).scrollTop(); var audioElm = $('#soundTour').get(0); audioElm.play(); audioElm.volume = 1 - $(window).scrollTop()/height; console.log(audioElm.volume); }); </script> This makes my audio start as soon as the website is loaded

Angular2 Directive: How to detect DOM changes

由 本秂侑毒 提交于 2019-11-29 03:30:52
I want to implement Skrollr as an Angular2 attribute directive. So, the format may be: <body my-skrollr> </body> However, in order to implement this, I need to be able to detect changes in the DOM in child elements below the containing tag (in this case, <body>), so that I can call skrollr.init().refresh(); and update the library to work with the new content. Is there a straightforward way of doing this that I'm not aware of, or am I approaching this incorrectly? Angular does not provide something built-in for that purpose. You can use MutationObserver to detect DOM changes. @Directive({
订阅 skrollr