Skip to content
This repository has been archived by the owner on Jan 24, 2018. It is now read-only.

Feature/amd #409

Closed
wants to merge 1 commit into from
Closed

Feature/amd #409

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions Gruntfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,13 +17,14 @@ module.exports = function(grunt) {
globals: {
window: true,
document: true,
navigator: true
navigator: true,
define: true
}
},
all: ['src/**/*.js']
},
qunit: {
all: ['test/index.html']
all: ['test/index.html', 'test/loading.html']
},
uglify: {
options: {
Expand Down
8 changes: 8 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,14 @@ First of all you want to include the `skrollr.min.js` file at the bottom of your
</body>
```

If you are using require.js to structure your project, you can use skrollr as a module as well.

```javascript
require(['skrollr'], function(skrollr){
var s = skrollr.init();
});
```

If you're familiar with CSS, you already know the `style` attribute. In order to create an animation you would need several, at least two, of them. That's what skrollr does. You use the HTML5 `data-` attributes to define multiple sets of styles (we call each of them **keyframe**) and skrollr interpolates between them.

#### Let's change the background-color of a `div` starting at `#00f` when the scrollbar is at the top and ending with `#f00` when the user scrolled 500 pixels down
Expand Down
2 changes: 0 additions & 2 deletions dist/skrollr.min.js
View file
Open in desktop

This file was deleted.

74 changes: 74 additions & 0 deletions examples/amd.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>skrollr - parallax scrolling for the masses</title>

<link href="fixed-positioning.css" rel="stylesheet" type="text/css" />
<link href="main.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div id="bg1" data-0="background-position:0px 0px;" data-end="background-position:-500px -10000px;"></div>
<div id="bg2" data-0="background-position:0px 0px;" data-end="background-position:-500px -8000px;"></div>
<div id="bg3" data-0="background-position:0px 0px;" data-end="background-position:-500px -6000px;"></div>

<div id="progress" data-0="width:0%;background:hsl(200, 100%, 50%);" data-end="width:100%;background:hsl(920, 100%, 50%);"></div>

<div id="intro" data-0="opacity:1;top:3%;transform:rotate(0deg);transform-origin:0 0;" data-500="opacity:0;top:-10%;transform:rotate(-90deg);">
<h1><a href="https://github.com/Prinzhorn/skrollr">skrollr</a></h1>
<h2>parallax scrolling for the masses</h2>
<p>let's get scrollin' ;-)</p>
<p class="arrows">▼&nbsp;▼&nbsp;▼</p>
</div>

<div id="transform" data-500="transform:scale(0) rotate(0deg);" data-1000="transform:scale(1) rotate(1440deg);opacity:1;" data-1600="" data-1700="transform:scale(5) rotate(3240deg);opacity:0;">
<h2>transform</h2>
<p>scale, skew and rotate the sh** out of any element</p>
</div>

<div id="properties" data-1700="top:100%;" data-2200="top:0%;" data-3000="display:block;" data-3700="top:-100%;display:none;">
<h2>all numeric properties</h2>
<p>width, height, padding, font-size, z-index, blah blah blah</p>
</div>

<div id="easing_wrapper" data-0="display:none;" data-3900="display:block;" data-4900="background:rgba(0, 0, 0, 0);color[swing]:rgb(0,0,0);" data-5900="background:rgba(0,0,0,1);color:rgb(255,255,255);" data-10000="top:0%;" data-12000="top:-100%;">
<div id="easing" data-3900="left:100%" data-4600="left:25%;">
<h2>easing?</h2>
<p>sure.</p>
<p>let me dim the <span data-3900="" data-4900="color[swing]:rgb(0,0,0);" data-5900="color:rgb(255,255,0);">lights</span> for this one...</p>
<p data-5900="opacity:0;font-size:100%;" data-6500="opacity:1;font-size:150%;">you can set easings for each property and define own easing functions</p>
</div>

<div class="drop" data-6500="left:15%;bottom:100%;" data-9500="bottom:0%;">linear</div>
<div class="drop" data-6500="left:25%;bottom[quadratic]:100%;" data-9500="bottom:0%;">quadratic</div>
<div class="drop" data-6500="left:35%;bottom[cubic]:100%;" data-9500="bottom:0%;">cubic</div>
<div class="drop" data-6500="left:45%;bottom[swing]:100%;" data-9500="bottom:0%;">swing</div>
<div class="drop" data-6500="left:55%;bottom[WTF]:100%;" data-9500="bottom:0%;">WTF</div>
<div class="drop" data-6500="left:65%;bottom[inverted]:100%;" data-9500="bottom:0%;">inverted</div>
<div class="drop" data-6500="left:75%;bottom[bounce]:100%;" data-9500="bottom:0%;">bounce</div>
</div>

<div id="download" data-10000="top[cubic]:100%;border-radius[cubic]:0em;background:rgb(0,50,100);border-width:0px;" data-12000="top:10%;border-radius:2em;background:rgb(190,230,255);border-width:10px;">
<h2>the end</h2>
<p>by the way, you can also animate colors (you did notice this, didn't you?)</p>
<p><strong>Now get this thing on <a href="https://github.com/Prinzhorn/skrollr">GitHub</a> and spread the word, it's open source!</strong> <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://prinzhorn.github.com/skrollr/" data-via="Prinzhorn">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
<p>Check out more <a href="https://github.com/Prinzhorn/skrollr/tree/master/examples#examples">examples</a>.</p>
<p>Handcrafted by <a href="https://twitter.com/Prinzhorn" class="twitter-follow-button" data-show-count="false">Follow @Prinzhorn</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></p>
</div>

<div id="scrollbar" data-0="top:0%;margin-top:2px;" data-end="top:100%;margin-top:-52px;"></div>

<script data-main="scripts/main" src="scripts/require.js"></script>

<!--[if lt IE 9]>
<script type="text/javascript" src="dist/skrollr.ie.min.js"></script>
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess as long as the plugins aren't loadable, this line will crash in IE because of missing global.

Also I just noticed that this file is 404 for a long time now (since it's in its own repo)...this is not related to the amd pr, but I need to fix this as well.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same problem (404) for tests

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How would one handle the IE part with amd? Conditional comments are not an option I guess.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How about making skrollr detect IE and then have it dynamically load ie plugin if necessary?

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The point is that "detect IE" is so easy with conditional comments but can't be used inside of a script. We can't reliably detect IE. I don't want to use the user agent string and parse the version.

We'd need to document something like this http://stackoverflow.com/questions/11846747/using-conditional-comments-with-requirejs-to-load-ie7-8-only-jquery . But I'm not a big fan of this particular solution using a class on the document.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

how about using modernizr

I don't want any dependencies and I don't want users to be forced to use any other lib.

Alternatively, we keep conditional comments approach and modify ie plugin to do smth like this:

The <smth-sensible-here> part scares me. That's not an option.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i hear you. how about this: keep conditional comments and make sure skrollr include happens after the ie plugin. let the plugin provide patches through the window object and then merge them gracefully into the skrollr, smth like this:

// inside skrollr.js
if(typeof window.skrollr !== 'undefined'){
   // clone the patch and wire it to the skrollr instance
   // cleanup global scope if needed (if using require)
}

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hm, I like the fact that skrollr doesn't need to know anything about the IE plugin and I'd like to keep it that way.

How is this handled in the real world? I thought people would use amd all the time.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've been looking around for a more elegant solution but have not found anything at this point. As per your question (how it's usually handled), my guess is that most developers would use feature detection as opposed to conditional comments to address browser issues. Truth is IE is pain in the ass any way you look at it, and people willing to support it in their projects (that use require) probably already have strategies in place to handle it. Chances are these include using feature detection of some sort.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Feature detection is great, it's just that the conditional comments also prevent the file from being fetched in the first place.

Anyway, I think we should try to and do feature detection. It's just opacity and hls/hlsa/rgba, shouldn't be too hard. I don't know if we should wait with pulling the amd support until the IE plugin works standalone though to prevent people from having the same problems we're discussing here. Unfortunately I don't think I can work on this at least the next week, probably longer.

<![endif]-->
</body>

</html>
19 changes: 19 additions & 0 deletions examples/scripts/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
require.config({
baseUrl: "../dist",
paths: {
'skrollr' : "skrollr.min"
},
waitSeconds: 15
});

require(['skrollr'], function(skrollr){
var s = skrollr.init({
edgeStrategy: 'set',
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
});
Loading