From 2014.igem.org
(Difference between revisions)
|
|
| Line 36: |
Line 36: |
| | return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>' | | return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>' |
| | } | | } |
| | + | |
| | + | var preload = [ |
| | + | "/wiki/images/2/22/Heidelberg_Achievements_red.png", |
| | + | "/wiki/images/d/d3/Team_icon_red.png", |
| | + | "/wiki/images/3/3f/Science_icon_red.png", |
| | + | "/wiki/images/1/1d/Parts_icon_red.png", |
| | + | "/wiki/images/1/18/Software_icon_red.png", |
| | + | "/wiki/images/1/13/Modeling_icon_red.png", |
| | + | "/wiki/images/3/32/Toolbox_icon_red.png", |
| | + | "/wiki/images/3/3d/Humanpractice_icon_red.png", |
| | + | "/wiki/images/0/03/MD_icon_red.png"]; |
| | | | |
| | $(document).ready(function(){ | | $(document).ready(function(){ |
| Line 124: |
Line 135: |
| | $('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"}) | | $('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"}) |
| | }); | | }); |
| | + | |
| | + | $(preload).each(function(){ |
| | + | $('<img/>')[0].src = this; |
| | + | // Alternatively you could use: |
| | + | // (new Image()).src = this; |
| | + | }); |
| | }); | | }); |
| | | | |
Revision as of 17:28, 13 October 2014
recalcRingSize = function(setPosition) {
var placeholder = $("#img-placeholder");
var ring = $("#ring");
var width = placeholder.outerWidth(false);
var position = placeholder.offset();
position.left = position.left - $(".container").offset().left;
if(setPosition){
ring.css(position);
}
ring.css("width", width+"px");
placeholder.css("height", ring.height()+"px");
};
var moveRing = false;
function setTweenParams(tween) {
var params = {css: {
left: $('#ring').width()/-2,
top: $('.second').position().top + ($('.second').outerHeight() - $('#ring').height())/2
}};
tween.updateTo(params, false);
}
var moveRingTween = new TweenMax("#ring", 2, {});
var scene = new ScrollScene({duration: 1000});
var timeline = new TimelineMax();
getDropdown = function(){
$dropdown = $(this).parent().children('.dropdown');//.clone();
//$dropdown.children('ul').prepend('
<a href="'+$(this).attr("href")+'">Overview</a></li>');
return $dropdown.html();
}
getTitle = function() {
$this = $(this)
return '<a href="'+$this.attr("href")+'" >'+$this.data("popover-title")+'</a>'
}
var preload = [
"/wiki/images/2/22/Heidelberg_Achievements_red.png",
"/wiki/images/d/d3/Team_icon_red.png",
"/wiki/images/3/3f/Science_icon_red.png",
"/wiki/images/1/1d/Parts_icon_red.png",
"/wiki/images/1/18/Software_icon_red.png",
"/wiki/images/1/13/Modeling_icon_red.png",
"/wiki/images/3/32/Toolbox_icon_red.png",
"/wiki/images/3/3d/Humanpractice_icon_red.png",
"/wiki/images/0/03/MD_icon_red.png"];
$(document).ready(function(){
/* check if ring should be moved by visability of placholder */
if ($('#placeholder-2').css('display') != "none"){
moveRing = true;
}
/* Animate ring movement */
controller = new ScrollMagic();
if(moveRing){
$("#ring").load(function(){
recalcRingSize(true);
$("#img-placeholder img").css("display", "none");
$("#ring").css("visibility", "");
setTweenParams(moveRingTween);
timeline.add(moveRingTween, 0);
timeline.to("#ring", 4, { rotation: 360}, 0);
scene.setTween(timeline);
});
}
else {
/* only rotate Ring, dont move it on small devices */
timeline.to("#placeholder", 4, { rotation: 360}, 0);
}
scene
.setTween(timeline)
.addTo(controller);
scene2 = new ScrollScene({duration: 10});
scene2.setTween(TweenMax.to("#front-nav ul", 2, { padding: "10px 20px"})).addTo(controller);
//scene.addIndicators();
// Build Dropdowns and hovers
$("#front-nav ul li a")
.on("mouseenter", function(){
$(this).find('img').animate({opacity: 0}, 200);
})
.on("mouseleave", function () {
$(this).find('img')
.stop(true, true)
.css("opacity", 1);
});
$("#front-nav ul li a.popover-dropdown")
.popover({trigger: 'manual', html: true, content: getDropdown, title: getTitle, placement: 'bottom'})
.on("mouseenter", function () {
var _this = this;
$(this).popover("show");
$(".popover").on("mouseleave", function () {
$(_this).popover('hide');
});
})
.on("mouseleave", function () {
var _this = this;
setTimeout(function () {
if (!$(".popover:hover").length) {
$(_this).popover("hide");
}
}, 100);
});
$("#front-nav ul li a[data-toggle='tooltip']").tooltip();
/*.mouseenter(function(){
$(this).find('img').animate({opacity: 0}, 200);
//$(this).siblings(".popover").stop(true);
$(this).popover('show');})
.mouseleave(function(){
$this = $(this)
$this.find('img').stop(true, true);
$this.find('img').css("opacity", 1);
$this.siblings(".popover")
.mouseenter(function() {$(this).siblings('a').data("hide", "false");})
.mouseleave(function() {$(this).siblings('a').popover('hide');});
$this.data("hide", "true");
setTimeout(function() {
if($this.data("hide") == "true")
$this.popover('hide');console.log($this.data("hide"));}, 200);
});*/
//updateScrollVars();
TweenMax.to('#scrollNag', 2, {opacity:1, repeat: -1, yoyo: true});
$('#scrollNag').click(function() {
$('body').scrollTo('#second', 1500, {easing: "easeInOutCubic"})
});
$(preload).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
});
$( window ).resize(function() {
if ($('#placeholder-2').css('display') != "none")
moveRing = true;
else
moveRing = false;
if(moveRing){
recalcRingSize(false);
setTweenParams(moveRingTween);
scene.setTween(timeline);
}
//updateScrollVars();
});
//$(window).load(updateScrollVars);
jQuery.extend(jQuery.easing, {
easeInOutCubic: function (x, t, b, c, d) {
if ((t/=d/2) < 1) return c/2*t*t*t + b;
return c/2*((t-=2)*t*t + 2) + b;
}
});
/*
jQuery.extend(jQuery.easing, {
easeOutQuint: function(x, t, b, c, d) {
return c * ((t = t / d - 1) * t * t * t * t + 1) + b;
}
});
var wheel = false, $docH, $scrollTop;
function updateScrollVars(){
$docH = $(document).outerHeight() - $(window).height(),
$scrollTop = $(document).scrollTop();
}
$(window).bind('scroll', function() {
if (wheel === false) {
$scrollTop = $(this).scrollTop();
}
});
$(document).bind('DOMMouseScroll mousewheel', function(e, delta) {
delta = delta || -e.originalEvent.detail / 3 || e.originalEvent.wheelDelta / 120;
wheel = true;
var isWebkit = 'WebkitAppearance' in document.documentElement.style;
$scrollTop = Math.min($docH, Math.max(0, parseInt($scrollTop - delta * 30)));
console.log(delta, $scrollTop, $docH);
$(isWebkit ? 'body' : 'html').stop().animate({
scrollTop: $scrollTop + 'px'
}, 2000, 'easeOutQuint', function() {
wheel = false;
});
return false;
});
"
