Permalink
Browse files

infinitescroll + more minor style changes

  • Loading branch information...
1 parent c8de9f1 commit fca7cb1fe75436b5ec0a624894810ba7e3fd3c6e @timoxley timoxley committed Apr 16, 2011
@@ -3,7 +3,7 @@
%head
%title InspiredShots
= stylesheet_link_tag :all
- = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js', 'jquery.infinitescroll.js', 'application', 'view', 'jquery.lettering'
+ = javascript_include_tag 'http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js', 'jquery.infinitescroll.js', 'application', 'view', 'jquery.lettering'
%body
#content
%h1#title InspiredShots
@@ -4,17 +4,20 @@ jQuery(document).ready(function($) {
url: window.location.href,
appendTo: '#feed',
triggerAt: 620,
+ fade: 'slow'
});
var feed = $('#feed');
-
+ feed.hide();
+ feed.delay(2000).fadeIn('slow');
// display loading animation
feed.bind('infinitescroll.beforesend', function() {
$(this).append('<li class="loading"></li>');
});
// hide loading animation
feed.bind('infinitescroll.finish', function() {
- $('li.loading').fadeOut('fast');
+ $('li.loading').fadeOut('slow');
+ $('li.loading').slideUp('slow');
});
});
@@ -8,6 +8,7 @@
triggerAt: 300,
page: 2,
appendTo: '.list tbody',
+ fade: 'none',
container: $(document)
}, options);
var req = null;
@@ -24,11 +25,20 @@
$(settings.appendTo).trigger('infinitescroll.beforesend');
req = $.get(settings.url, 'page='+settings.page, function(data) {
if (data !== '') {
+
+ var elements = $(data);
if (settings.page > 1) {
- $(settings.appendTo).append(data);
+ $(settings.appendTo).append(elements);
} else {
- $(settings.appendTo).html(data);
+ $(settings.appendTo).html(elements);
}
+
+ // hide, then fade in elements if fade is configured
+ if (settings.fade !== 'none' || settings.fade !== null) {
+ elements.css('display', 'none'); // hide() throws an error :/ ?
+ elements.fadeIn(settings.fade);
+ }
+
settings.page++;
$(settings.appendTo).trigger('infinitescroll.finish');
} else {
@@ -1,4 +1,6 @@
-
+function supports_canvas() {
+ return !!document.createElement('canvas').getContext;
+}
function generateNoise(opacity) {
if ( !!!document.createElement('canvas').getContext ) {
@@ -9,7 +11,7 @@ function generateNoise(opacity) {
ctx = canvas.getContext('2d'),
x, y,
number,
- opacityopacity = opacity || .2;
+ opacity = opacity || .2;
canvas.width = 200;
canvas.height = 200;
@@ -23,10 +25,51 @@ function generateNoise(opacity) {
}
}
- document.body.style.backgroundImage = "url(" + canvas.toDataURL("image/png") + ")";
+ $('body').css({backgroundImage: "url(" + canvas.toDataURL("image/png") + ")"});
}
+
+function createTopGradient(opacity) {
+ var canvas = document.createElement("canvas"),
+ ctx = canvas.getContext('2d');
+ canvas.width = 1200;
+ canvas.height = 600;
+ opacity = opacity || .2;
+
+ var radgrad2 = ctx.createRadialGradient(600,120,0,600,120,600);
+
+ radgrad2.addColorStop(0, 'rgba(202,168,255,'+opacity+')');
+ radgrad2.addColorStop(1, 'rgba(202,168,255,0)');
+
+ ctx.fillStyle = radgrad2;
+ ctx.fillRect(0, 0, 1200, 600);
+ $('body').prepend('<div id="grad"></div>');
+ $('#content').css({
+ zIndex: 1
+ });
+ $('body').css({overflowX: 'hidden'});
+ $('#grad').css({
+ width: 'auto',
+ height: 'auto',
+ margin: '0 auto',
+ position: 'absolute',
+ top: 0,
+ left: '50%',
+ marginLeft: '-600px',
+ });
+ $('#grad').css({
+ width: '1200px',
+ height: '1200px',
+ display: 'block',
+ background: "url(" + canvas.toDataURL("image/png") + ") center top no-repeat",
+
+ });
+}
+
$(function() {
- generateNoise(.05); // default opacity is .2
+ if (supports_canvas()) {
+ createTopGradient(0.04);
+ generateNoise(.05);
+ }
$('#title').lettering();
})
@@ -20,27 +20,42 @@ sup,sub{vertical-align:baseline}
header, nav, section, article, footer{display:block;}
+
+
// -- Global -------------------------------------------------------------------
-body{color:#8d8d8e;background:#111415;width:400px;margin:40px auto;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;}
+body {background-color:#111415;}
+#content{color:#8d8d8e;width:400px; margin: 100px auto 40px;font:12px/140% 'Helvetica Neue', Arial, Sans-Serif;}
a:link, a:visited, a:hover, a:active{color:#2B899D;}
// -- Header -------------------------------------------------------------------
-#title{font-size:62px;margin-bottom:40px;color:#ea4c89;text-shadow:1px -1px 0px #fc629d;font-weight:bold; letter-spacing: -0.005em;}
-#subtitle{font-size:21px;margin-bottom:30px;text-transform:lowercase;font-weight:normal;
+#title{font-size:62px;margin-bottom:40px;color:rgba(234,76,137, 1);text-shadow:0px 1px 0px rgba(252,98,157,1);font-weight:bold; letter-spacing: -0.005em;
+ &:hover {color: rgba(252,98,157,1)}
+}
+
+#subtitle{font-size:21px;margin-bottom:20px;text-transform:lowercase;font-weight:normal; opacity: 0.9;
font-family:'Palatino', 'Times New Roman', serif;text-align:right;text-shadow: 1px -1px 0px #000;}
// -- Content ------------------------------------------------------------------
ul#feed{
- li{margin:20px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px; position: relative;
+ li{margin:50px 0;background:#000;text-align:center;width:400px;height:300px;line-height:300px; position: relative;
+ border: 0.5px solid rgba(255,255,255, 0.02);
+ -webkit-border-radius: 1.5px;
+ -moz-border-radius: 1.5px;
+ border-radius: 1.5px;
img{margin:0 auto;
-moz-box-shadow: 1px 1px 0px #171b1c;
-webkit-box-shadow: 1px 1px 0px #171b1c;
box-shadow: 1px 1px 0px #171b1c;
+ -webkit-border-radius: 1.5px;
+ -moz-border-radius: 1.5px;
+ border-radius: 1.5px;
+
}
&.loading{background:url('../images/loading.gif') 50% 50% no-repeat;height:16px; margin: 40px auto;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
+ border: none;
}
}
}
@@ -53,41 +68,41 @@ footer{text-align:right; position: fixed; bottom: 10px; right: 20px;
// -- Kerning --------
#title .char9 {
- margin-left: 0px
+ margin-left: 0px
}
#title .char7 {
- margin-left: 1px
+ margin-left: 1px
}
#title .char8 {
- margin-left: 0px
+ margin-left: 0px
}
#title .char4 {
- margin-left: 0px
+ margin-left: 0px
}
#title .char6 {
- margin-left: -1px
+ margin-left: -1px
}
#title .char10 {
- margin-left: 0px
+ margin-left: 0px
}
#title .char11 {
- margin-left: -1px
+ margin-left: -1px
}
#title .char12 {
- margin-left: 0px
+ margin-left: 0px
}
#title .char3 {
- margin-left: -1px
+ margin-left: -1px
}
#title .char2 {
- margin-left: -2px
+ margin-left: -1px
}
#title .char5 {
- margin-left: -1px
+ margin-left: -1px
}
#title .char13 {
- margin-left: 2px
+ margin-left: 2px
}
#title .char1 {
- margin-left: 0px
+ margin-left: 0px
}
Oops, something went wrong. Retry.

0 comments on commit fca7cb1

Please sign in to comment.