skrollr | 易学教程

Dynamically set attribute key (e.g. data-{foo}=“bar”) in React

阅读更多关于 Dynamically set attribute key (e.g. data-{foo}=“bar”) in React

问题 Setting an attribute in React is straightforward if you know the key, e.g. data-500={this.props.YDistance} but how can one dynamically set part of the key. e.g. data-{this.props.YDistance}="valueHere" var Test = React.createClass({ render: function() { return ( <div data-{this.props.YDistance}="valueHere"> {this.props.children} </div> ); } }); ReactDOM.render( <Test YDistance="500">Hello World!</Test>, document.getElementById('container') ); There are libraries that require this kind of

How to do horizontal parallax scrolling

阅读更多关于 How to do horizontal parallax scrolling

问题 I'm using the latest version of Bootstrap, JQuery, and Skrollr. I would like to have a static background and a couple scenes that occur as you scroll by parallax scrolling. I'm able to make scenes as you scroll but I'm looking for a way to where it appears that you are not moving down the page. I'm looking to make a scene like this image: Notice how it moves right-left but never appears like you are actually scrolling down the page. That's the best I can explain it. Can't seem to find any

Change Image on Scroll Position

阅读更多关于 Change Image on Scroll Position

问题 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? 回答1: 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

Skrollr.js Plugin Not Parallaxing Inside Bootstrap Carousel - Fiddle Provided

阅读更多关于 Skrollr.js Plugin Not Parallaxing Inside Bootstrap Carousel - Fiddle Provided

问题 I am having a problem with the SKrollr.js plugin for Parallax and smooth scrolling. Everything works fine except Bootstrap carousel's, and im sure any carousel for that matter. It's clearly a display:none problem when the plugin is setting itself up on load and can't see any of the .item classes. But I can't figure out how on earth to get Skrollr to see all of the slides/.item classes when it's rendering. I even tried this kinda stuff. My Skrollr markup isn't the problem that code always

Skrollr adding white space

阅读更多关于 Skrollr adding white space

问题 I have tried everything. I am exhausted from reading 4-5 pages on google trying to find a fix that works for me. My problem is persistent even when I use the skrollr examples (not saying they did something wrong, I know I am just not understanding it right). So I have uploaded a demo to show this awkward white space ONLY on mobile devices. It works fine on desktop as you will see if you try. What have I tried? -setting forceHeight to false via: skrollr.init({ forceHeight: false }); -setting

Skrollr: Create instant move?

阅读更多关于 Skrollr: Create instant move?

问题 I'm using Skrollr to animate div class="box" using its margin-top , but my issue is that I need an instant change , not animation .. This JSbin Shows what I'm working on, I need the margin-top of the red div be 0px when data-top-bottom for data-anchor-target=".space" but instantly without animation ... I'v tried all these properties skrollr.init({ forceHeight: true, smoothScrollingEnabled: false, smoothScrollingDuration: 1, smoothScrolling: false, forceRender: true }); but nothing helped me..

Animating the <body> background using CSS and skrollr.js

阅读更多关于 Animating the background using CSS and skrollr.js

问题 I would like to animate the background-position CSS property of the <body> tag using skrollr.js . I want it to slightly move the background image up as the page scrolls to give it a little spice. However, using this... data-0="background-position: 0px 0px;" data-1000="background-position: 0px -250px;" ...isn't working. I tried using a <div> to accomplish the feat (animating its background-position ), but that doesn't give me the effect I am looking for. When I animate the background-property

Issue: Horizontal scrolling effect with Skrollr

阅读更多关于 Issue: Horizontal scrolling effect with Skrollr

问题 I want to create an horizontal animation controlled by the skrollr. Scrolling down, the elements of my page have to move from left to right of my container. Assuming that my elements have all the same width, I set the scrolling data from 100% to 0% and it works. But what if my images have different widths? Also I want to preserve the opacity animation that create this fade-in fade-out effect. Here's HTML code: <div id="container"> <div class="bg" style="background-color:red" data-0="transform

Skrollr cutoff on iPad

阅读更多关于 Skrollr cutoff on iPad

问题 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 回答1: 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

Angular2 Directive: How to detect DOM changes

阅读更多关于 Angular2 Directive: How to detect DOM changes

问题 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? 回答1: Angular does not provide