mirror of
https://github.com/samuelclay/NewsBlur.git
synced 2025-11-01 09:09:51 +00:00
Adding rotation to iphone website.
This commit is contained in:
Samuel Clay
parent
04cb3308bd
commit
4f4697fe4e
2 changed files with 94 additions and 56 deletions
|
|
@ -5963,8 +5963,10 @@ background: transparent;
|
|||
margin: 24px 36px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.NB-static-iphone .NB-iphone-download {
|
||||
margin-left: -48px;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download button {
|
||||
padding: 4px 20px 4px 10px;
|
||||
letter-spacing: -0.03em;
|
||||
text-align: center;
|
||||
|
|
@ -5992,15 +5994,15 @@ background: transparent;
|
|||
cursor: pointer;
|
||||
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download a {
|
||||
color: white;
|
||||
display: block;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download .NB-big {
|
||||
font-size: 1.45em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download:hover {
|
||||
.NB-static-iphone .NB-iphone-download img {
|
||||
float: left;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download button:hover {
|
||||
background-color: #3A8FCE;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
|
|
@ -6014,27 +6016,21 @@ background: transparent;
|
|||
#182A42 6%,
|
||||
#516A83 94%
|
||||
);
|
||||
color: #C0D7E7;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download img {
|
||||
float: left;
|
||||
margin: 0 8px 0 0;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download:hover a {
|
||||
color: white;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-download:active {
|
||||
.NB-static-iphone .NB-iphone-download button:active {
|
||||
background-color: #3A8FCE;
|
||||
background-image: -webkit-gradient(
|
||||
linear,
|
||||
left bottom,
|
||||
left top,
|
||||
color-stop(0.14, #568CDF),
|
||||
color-stop(0.86, #3161A8)
|
||||
color-stop(0.06, #516A83),
|
||||
color-stop(0.94, #182A42)
|
||||
);
|
||||
background-image: -moz-linear-gradient(
|
||||
center bottom,
|
||||
#568CDF 14%,
|
||||
#3161A8 86%
|
||||
#516A83 6%
|
||||
#182A42 94%,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
@ -6042,7 +6038,7 @@ background: transparent;
|
|||
list-style-image: none;
|
||||
list-style-position: outside;
|
||||
list-style-type: none;
|
||||
margin: 12px auto 0;
|
||||
margin: 12px 0 0 -48px;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
|
|
@ -6074,11 +6070,20 @@ background: transparent;
|
|||
.NB-static-iphone .NB-iphone-features .NB-iphone-feature .NB-iphone-feature-subtitle {
|
||||
margin: 8px 0 0;
|
||||
}
|
||||
|
||||
|
||||
.NB-static-iphone .NB-iphone-main .NB-iphone-feature {
|
||||
-webkit-transition: all .32s ease-out;
|
||||
-moz-transition: all .32s ease-out;
|
||||
-o-transition: all .32s ease-out;
|
||||
-ms-transition: all .32s ease-out;
|
||||
border-radius: 4px;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-feature.NB-active {
|
||||
border: 2px solid #39518B;
|
||||
}
|
||||
.NB-static-iphone .NB-iphone-mockup {
|
||||
float: right;
|
||||
margin: 132px 48px 0 0;
|
||||
margin: 132px 96px 0 0;
|
||||
width: 320px;
|
||||
height: 460px;
|
||||
position: relative;
|
||||
|
|
|
|||
|
|
@ -19,16 +19,17 @@
|
|||
|
||||
<div class="NB-iphone-main">
|
||||
|
||||
<a href="http://itunes.apple.com/us/app/newsblur/id463981119">
|
||||
<button class="NB-iphone-download">
|
||||
<img src="{{ MEDIA_URL }}img/reader/download.png" />
|
||||
Download the free NewsBlur iPhone app on the<br /><span class="NB-big">iTunes App Store</span>
|
||||
</button></a>
|
||||
<a href="http://itunes.apple.com/us/app/newsblur/id463981119" class="NB-iphone-download">
|
||||
<button>
|
||||
<img src="{{ MEDIA_URL }}img/reader/download.png" />
|
||||
Download the free NewsBlur iPhone app on the<br /><span class="NB-big">iTunes App Store</span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<ul class="NB-iphone-features">
|
||||
<li class="NB-iphone-feature NB-first" data-screenshot="1">
|
||||
<li class="NB-iphone-feature" data-screenshot="1">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.1 - Screenshot 1.png" />
|
||||
<div class="NB-iphone-feature-title">All your sites</div>
|
||||
<div class="NB-iphone-feature-title">All of your sites</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature" data-screenshot="2">
|
||||
|
|
@ -36,16 +37,17 @@
|
|||
<div class="NB-iphone-feature-title">River of News</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature NB-last" data-screenshot="3">
|
||||
<li class="NB-iphone-feature" data-screenshot="3">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 3.png" />
|
||||
<div class="NB-iphone-feature-title">Story Navigation</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
</ul>
|
||||
<br />
|
||||
<ul class="NB-iphone-features">
|
||||
<li class="NB-iphone-feature NB-first" data-screenshot="4">
|
||||
<li class="NB-iphone-feature" data-screenshot="4">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/v1.2 - iPhone Screenshot 4.png" />
|
||||
<div class="NB-iphone-feature-title">Original sites</div>
|
||||
<div class="NB-iphone-feature-title">Read the original site</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature" data-screenshot="5">
|
||||
|
|
@ -53,7 +55,7 @@
|
|||
<div class="NB-iphone-feature-title">Add & manage sites</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
</li>
|
||||
<li class="NB-iphone-feature NB-last" data-screenshot="6">
|
||||
<li class="NB-iphone-feature NB-active" data-screenshot="6">
|
||||
<img src="{{ MEDIA_URL }}img/iphone/Default.png" />
|
||||
<div class="NB-iphone-feature-title">NewsBlur iPhone App</div>
|
||||
{# <div class="NB-iphone-feature-subtitle">Read</div> #}
|
||||
|
|
@ -66,40 +68,71 @@
|
|||
$(document).ready(function() {
|
||||
var $features = $('.NB-iphone-main .NB-iphone-feature');
|
||||
|
||||
var setup_features = function() {
|
||||
var copy_features_to_mockup = function() {
|
||||
var $mockup = $('.NB-iphone-mockup .NB-iphone-features');
|
||||
$mockup.append($features.clone());
|
||||
$mockup.find('.NB-iphone-feature-title, .NB-iphone-feature-subtitle').remove();
|
||||
$mockup.children().not(':last').css('left', 320);
|
||||
};
|
||||
|
||||
var hover_features = function() {
|
||||
var $mockup = $('.NB-iphone-mockup .NB-iphone-feature');
|
||||
$features.bind('mouseenter', function() {
|
||||
var $other_features = $features.not(this);
|
||||
var screenshots = $other_features.map(function() { return $(this).data('screenshot'); });
|
||||
$mockup.each(function() {
|
||||
var $this = $(this);
|
||||
var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
|
||||
var left = -320;
|
||||
if (screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) > 0) left = 320;
|
||||
// $this.css('z-index', 1);
|
||||
$this.animate({'left': left}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
} else if (!screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) <= -320) {
|
||||
$this.css({
|
||||
'left': 320
|
||||
});
|
||||
}
|
||||
// $this.css('z-index', 2);
|
||||
$this.animate({'left': 0}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
}
|
||||
});
|
||||
select_feature($(this));
|
||||
});
|
||||
};
|
||||
|
||||
setup_features();
|
||||
var select_feature = function($feature) {
|
||||
var $mockup = $('.NB-iphone-mockup .NB-iphone-feature');
|
||||
var $other_features = $features.not($feature);
|
||||
var screenshots = $other_features.map(function() { return $(this).data('screenshot'); });
|
||||
$features.removeClass('NB-active');
|
||||
$feature.addClass('NB-active');
|
||||
$mockup.each(function() {
|
||||
var $this = $(this);
|
||||
var screenshot_filtered = _.contains(screenshots, $this.data('screenshot'));
|
||||
var left = -321;
|
||||
if (screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) > 0) left = 320;
|
||||
$this.animate({'left': left}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
} else if (!screenshot_filtered) {
|
||||
if (parseInt($this.css('left'), 10) <= -320) {
|
||||
$this.css({
|
||||
'left': 320
|
||||
});
|
||||
}
|
||||
$this.animate({'left': 0}, {'duration': 320, 'queue': false, 'easing': 'easeInOutQuad'});
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
var rotation_interval;
|
||||
var user_on_features = false;
|
||||
var rotate_features = function() {
|
||||
$('.NB-iphone-main .NB-iphone-features').bind('mouseenter', function() {
|
||||
user_on_features = true;
|
||||
}).bind('mouseleave', function() {
|
||||
user_on_features = false;
|
||||
clearInterval(rotation_interval);
|
||||
start_rotation(1000);
|
||||
});
|
||||
};
|
||||
var start_rotation = function(duration) {
|
||||
clearInterval(rotation_interval);
|
||||
rotation_interval = setInterval(function() {
|
||||
if (!user_on_features) {
|
||||
var current_feature = parseInt($features.filter('.NB-active').data('screenshot'), 10);
|
||||
var next_feature = ((current_feature) % 6); // Off by 1, so no need to +1
|
||||
var $next_feature = $features.eq(next_feature);
|
||||
select_feature($next_feature);
|
||||
}
|
||||
if (duration != 3000) start_rotation(3000);
|
||||
}, duration);
|
||||
};
|
||||
|
||||
copy_features_to_mockup();
|
||||
hover_features();
|
||||
rotate_features();
|
||||
start_rotation(1000);
|
||||
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue