[关闭]
@Mercedes-Benz 2016-07-27T18:22:15.000000Z 字数 26281 阅读 544

Velvet Hammer | Music and Management Group APP.JS代码组织

用于Evernote里的笔记

  1. var _state = null;
  2. function change_my_url(_state, _title, _url){
  3.     History.pushState(_state, _title, _url);
  4. }
  5. History.Adapter.bind(window,'statechange',function(){
  6.     var _state = History.getState();
  7.     document.title = _state['title'] + ' | Velvet Hammer';
  8. });
  10. (function() {
  11.     var lastTime = 0;
  12.     var vendors = ['webkit', 'moz'];
  13.     for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
  14.         window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
  15.         window.cancelAnimationFrame =
  16.           window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame'];
  17.     }
  19.     if (!window.requestAnimationFrame)
  20.         window.requestAnimationFrame = function(callback, element) {
  21.             var currTime = new Date().getTime();
  22.             var timeToCall = Math.max(0, 16 - (currTime - lastTime));
  23.             var id = window.setTimeout(function() { callback(currTime + timeToCall); },
  24.               timeToCall);
  25.             lastTime = currTime + timeToCall;
  26.             return id;
  27.         };
  29.     if (!window.cancelAnimationFrame)
  30.         window.cancelAnimationFrame = function(id) {
  31.             clearTimeout(id);
  32.         };
  33. }());
  35. var app  = {
  36.     common : {
  37.         onready : function(){
  38.             var _body = $('body');
  39.             var dset;
  41.             dset = window.setTimeout(function(){
  42.                 _body.addClass('ready');
  43.                 window.clearTimeout(dset);
  44.             },400);
  46.             /* ----------
  47.             Composant :
  48.             _ Menu
  49.             ---------- */
  50.             var _menu = $('.menu');
  51. 			var menu = "";
  52. 			var $this = "";
  54.             _menu.bind('click',function(){
  55.                 $this = $(this);
  56.                 menu = $this.attr('data-menu');
  58.                 _body.toggleClass(menu+'-on');
  60.                 if(!$('.page--'+menu).hasClass('on')){
  61. 					$('.page--'+menu).addClass('on');
  62. 					TweenLite.to($('.page--'+menu), 0.7, {css:{scale:1, opacity:1}, ease:Expo.easeOut});
  63. 					TweenLite.to($('.page--'+menu+' ul li'), 0.4, {css:{y:'0%', opacity:1}, ease:Expo.easeOut});
  64. 				}
  65. 				else{
  66. 					TweenLite.to($('.page--'+menu+' ul'), 0.4, {css:{opacity:0}, ease:Expo.easeOut, onComplete:function(){
  67. 						TweenLite.to($('.page--'+menu), 0.7, {css:{scale:1.2, opacity:0}, ease:Expo.easeOut, onComplete:function(){
  68. 							$('.page--'+menu).removeClass('on');
  69. 							TweenLite.set($('.page--'+menu+' ul'), {css:{opacity:1}});
  70. 							TweenLite.set($('.page--'+menu+' ul li'), {css:{y:'100%', opacity:0}});
  71.                         }});
  72.                     }});
  73.                 }
  74.             });
  76.             jQuery.extend( jQuery.easing,
  77.             {
  78.                 easeInOutQuad: function (x, t, b, c, d) {
  79.                     if ((t/=d/2) < 1) return c/2*t*t + b;
  80.                     return -c/2 * ((--t)*(t-2) - 1) + b;
  81.               }
  82.             });
  83.             function SVG(tag) {
  84.                 return document.createElementNS('http://www.w3.org/2000/svg', tag);
  85.             }
  86.             function replaceCirclesWithPaths(parentElement) {
  87.                 var circles = $(parentElement).find('circle');
  88. 			    $.each(circles, function() {
  89.                     var cX = $(this).attr('cx');
  90. 			        var cY = $(this).attr('cy');
  91.                     var r = $(this).attr('r');
  92. 			        var r2 = parseFloat(r * 2);
  93. 			        var convertedPath = 'M' + cX + ', ' + cY + ' m' + (-r) + ', 0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + r2 + ',0 ' + 'a ' + r + ', ' + r + ' 0 1,0 ' + (-r2) + ',0 ';
  94. 			        $(SVG('path'))
  95.                     .attr('d', convertedPath)
  96.                     .attr('fill', $(this).attr('fill'))
  97. 			        .attr('stroke', $(this).attr('stroke'))
  98.                     .attr('class', $(this).attr('class'))
  99. 			        .attr('stroke-width', $(this).attr('stroke-width'))
  100.                     .insertAfter(this);
  101.                 });
  102.                 $(circles).remove();
  103.             }
  105.             function hideSVGPaths(parentElement) {
  106.                 var paths = $(parentElement).find('path');
  107. 			    //for each PATH..
  108. 			    $.each( paths, function() {
  109.                     //get the total length
  110.                     var totalLength = this.getTotalLength();
  111.                     //set PATHs to invisible
  112.                     $(this).css({
  113.                         'stroke-dashoffset': totalLength,
  114.                         'stroke-dasharray': totalLength + ' ' + totalLength
  115.                     });
  116.                 });
  117.             }
  119.             function drawSVGPaths(_parentElement, _timeMin, _timeMax, _timeDelay) {
  120.                 var paths = $(_parentElement).find('path');
  121. 			    //for each PATH..
  122. 			    $.each( paths, function(i) {
  123.                     //get the total length
  124.                     var totalLength = this.getTotalLength();
  125.                     //set PATHs to invisible
  126.                     $(this).css({
  127. 			            'stroke-dashoffset': totalLength,
  128. 			            'stroke-dasharray': totalLength + ' ' + totalLength
  129. 			        });
  130. 			        //animate
  131. 			        $(this).delay(_timeDelay*i).animate({
  132.                         'stroke-dashoffset': 0
  133.                     }, {
  134.                         duration: Math.floor(Math.random() * _timeMax) + _timeMin
  135.                         ,easing: 'easeInOutQuad'
  136.                     });
  137.                 });
  138.             }
  140.             function replaceWithPaths(parentElement) {
  141.                 replaceCirclesWithPaths(parentElement);
  142.             }
  144.             function startSVGAnimation(parentElement) {
  145.                 drawSVGPaths(parentElement, 1000, 2000, 50);
  146.             }
  148.             replaceWithPaths($('#js-control'));
  150.             // startSVGAnimation($('#js-control'));
  152.             /* ----------
  153.             Composant :
  154.             _ SoundCloud
  155.             ---------- */
  156.             SC.initialize({
  157.               client_id: '3a98eed17a0d81ea969770fef94e7f58',
  158.               redirect_uri: 'http://velvethammer.net/'
  159.             });
  161.             var playing=false;
  163.             // SC.get('/resolve', {
  164.             //   url: 'https://soundcloud.com/velvethammer'
  165.             // }, function(user) {
  166.             //   console.log(user);
  167.             // });
  169.             // users/velvethammer/tracks
  170.             SC.get("/users/4616395/playlists", {limit: 10}, function(playlist){
  172.                 // console.log(playlist);
  174.                 var selected = playlist[0];
  176.                 $('#js-comment').html(selected.title);
  178.                 var lenght = selected.tracks.length;
  180.                 // console.log(playlist[0].tracks);
  182.                 for(var key in selected.tracks.slice(0)){
  183.                     //console.log(selected.tracks[key]);
  184.                     //if(selected.tracks[key].permalink != null){
  185.                     $('#js-soundcloud').append('<li><a id="' + selected.tracks[key].id + '" href="#">' + selected.tracks[key].title + '</a></li>');
  186.                     //}
  187.                 }
  189.                 $('#js-playericon').click(function(){
  190.                     event.preventDefault();
  192.                     var $this = $(this);
  193.                     if(playing==true){
  194.                         $this.removeClass('playing');
  195. 						playing=false;
  196. 					}
  197. 					else{
  198. 						$('#js-soundcloud li:first-child a').trigger('click');
  199. 						$this.addClass('playing');
  200.                         playing=true;
  201.                     }
  202.                 });
  204.                 $('#js-soundcloud li a').click(function(event) {
  205.                     event.preventDefault();
  207.                     var id = $(this).attr('id');
  209.                     $('#js-soundcloud li').removeClass('current');
  210. 					$(this).parent('li').addClass('current');
  212.                     playing=true;
  214.                     SC.stream("/tracks/"+ id , {autoPlay: false,ontimedcomments: function(comments){$('#js-comment').html(comments[0].body);}}, function(sound){
  215. 						$('#stop').trigger('click');
  217.                         sound.play({
  218.                             whileplaying: function() {
  219.                                 $('#js-playericon').addClass('playing');
  221.                                 var path = document.querySelector('.circle');
  223.                                 var position = this.position;
  224.                                 var duration = this.duration;
  225.                                 var percent = position / duration;
  227.                                 var current = Math.floor(percent * 185);
  229.                                 path.setAttribute('stroke-dashoffset', current);
  231.                                 },
  232.                                 onfinish: function() {
  234.                                     $('#js-playericon').removeClass('playing');
  235.                                     playing=false;
  236.                                     var path = document.querySelector('.circle');
  237.                                     path.setAttribute('stroke-dashoffset', 0);
  239.                                 }
  240.                         });
  242.                         $('#js-playericon').click(function(){
  243. 							//console.log(playing);
  244. 							var $this = $(this);
  245. 							if(playing==true){
  246. 								$this.removeClass('playing');
  247. 								playing=false;
  248. 							}
  249. 							else{
  250. 								$this.addClass('playing');
  251.                                 playing=true;
  252.                             }
  253.                             sound.togglePause();
  254.                         });
  256.                         $('#stop').click(function(){
  257. 							sound.stop();
  258. 							$('#js-playericon').removeClass('playing');
  259. 							$('#js-comment').html('');
  260.                             playing=false;
  261.                         });
  262.                     });
  263.                 });
  264.             });
  266.         }
  267.     },
  269.     page : {
  270.         onready : function(){
  272.         },
  273.         onload : function(){
  274.             var _body = $('body');
  275. 			var _loader = $('.page--loader');
  276.             var _single = $('.page--single');
  277. 			var _page_scroll = $('#page--scroll');
  278.             var _menu = $('.menu');
  279. 			var _ff = $('#fixed-footer');
  280.             var set;
  281.             var set2;
  282.             var set3;
  284.             _body.addClass('loaded-on');
  286.             var destY = 0;
  288.             var y = window.pageYOffset;
  289.             var h = window.innerHeight;
  291.             var overviewSingle = document.getElementById("page--single");
  292.             var overviewSingleHeight;
  294.             var viewport = document.getElementById("scroll-viewport");
  295.             var viewportHeight;
  297.             var calcn = 0;
  299.             var mobile;
  300.             if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  301.                 mobile = false;
  302.             } else{ mobile = true; }
  304.             // matrix3d
  305.             var deg2rad, rotateX, rotateY, rotateZ, scale;
  306.             deg2rad = 0;
  307.             rotateX = 0;
  308.             rotateY = 0;
  309.             rotateZ = 0;
  310.             scale = 1;
  311.             var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, scaleMatrix, transformationMatrix, translationMatrix;
  312.             rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(rotateX * deg2rad), Math.sin(-rotateX * deg2rad), 0], [0, Math.sin(rotateX * deg2rad), Math.cos(rotateX * deg2rad), 0], [0, 0, 0, 1]]);
  313. 			rotationYMatrix = $M([[Math.cos(rotateY * deg2rad), 0, Math.sin(rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-rotateY * deg2rad), 0, Math.cos(rotateY * deg2rad), 0], [0, 0, 0, 1]]);
  314.             rotationZMatrix = $M([[Math.cos(rotateZ * deg2rad), Math.sin(-rotateZ * deg2rad), 0, 0], [Math.sin(rotateZ * deg2rad), Math.cos(rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);
  315. 			s = scale;
  316. 			scaleMatrix = $M([[s, 0, 0, 0], [0, s, 0, 0], [0, 0, s, 0], [0, 0, 0, 1]]);
  318.             // if we want to cancel / run rAF
  319.             var globalID;
  320.             var globalSingle;
  322.             function runa() {
  323.                 globalSingle = requestAnimationFrame(runa);
  325.                 // scrolltop & window.height
  326.                 if(mobile==false){
  327.                     y = $(window).scrollTop();
  328.                 }
  329.                 h = window.innerHeight;
  331.                 sf = document.getElementById('js-single-footer').getBoundingClientRect().top;
  333.                 if(mobile==false){
  334.                     calcn += (y - calcn) * 0.1;
  335.                 }
  337.                 // footer / menu
  338.                 if(sf<30){
  339.                     _menu.addClass('js-light');
  340.                     _page_scroll.addClass('js-fixed');
  341.                 }
  342.                 else if(sf>30){
  343.                     _menu.removeClass('js-light');
  344.                     _page_scroll.removeClass('js-fixed');
  345.                 }
  347.                 if(sf<(h-30)){
  348.                     _ff.addClass('js-light');
  349.                 }
  350.                 else if(sf>(h-30)){
  351.                     _ff.removeClass('js-light');
  352.                 }
  354.                 if(mobile==false){
  355.                     // matrix3d transform
  356.                     translationMatrix = $M([
  357.                         [1,0,0,0],
  358.                         [0,1,0,0],
  359.                         [0,0,1,0],
  360.                         [0,-calcn,0,1]
  361.                         ]);
  362.                     transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix).x(scaleMatrix).x(translationMatrix);
  364.                     s = "matrix3d(";
  365.                     s += transformationMatrix.e(1, 1).toFixed(10) + "," + transformationMatrix.e(1, 2).toFixed(10) + "," + transformationMatrix.e(1, 3) + "," + transformationMatrix.e(1, 4).toFixed(10) + ",";
  366.                     s += transformationMatrix.e(2, 1).toFixed(10) + "," + transformationMatrix.e(2, 2).toFixed(10) + "," + transformationMatrix.e(2, 3) + "," + transformationMatrix.e(2, 4).toFixed(10) + ",";
  367.                     s += transformationMatrix.e(3, 1).toFixed(10) + "," + transformationMatrix.e(3, 2).toFixed(10) + "," + transformationMatrix.e(3, 3) + "," + transformationMatrix.e(3, 4).toFixed(10) + ",";
  368.                     s += transformationMatrix.e(4, 1).toFixed(10) + "," + transformationMatrix.e(4, 2).toFixed(10) + "," + transformationMatrix.e(4, 3) + "," + transformationMatrix.e(4, 4).toFixed(10);
  369.                     s += ")";
  371.                     overviewSingle.style["transform"] = s;
  372.                     overviewSingle.style["webkitTransform"] = s;
  373.                     overviewSingle.style["mozTransform"] = s;
  374.                     overviewSingle.style["msTransform"] = s;
  375.                 }
  376.             }
  378.             new imagesLoaded(document.body, function(instance) {
  379.                 TweenLite.set($('.single--artist'), {css:{scale:1.2, opacity: 0}});
  381.                 set = window.setTimeout(function(){
  382.                     _body.addClass('loaded');
  384.                     set2 = window.setTimeout(function(){
  385.                         _loader.removeClass('on');
  386.                         _body.addClass('single');
  387.                         _single.addClass('ready');
  389.                         TweenLite.to($('.single--artist'), 1, {css:{scale:1, opacity:1}, ease:Expo.easeOut, onComplete:function(){
  390. 							overviewSingleHeight = overviewSingle.getBoundingClientRect().height;
  391. 							_page_scroll.css('height', overviewSingleHeight);
  392. 							globalSingle = requestAnimationFrame(runa);
  393. 							if(mobile==false){
  394. 								TweenLite.to($('.js-content'), 1, {css:{opacity:1}, ease:Expo.easeOut});
  395. 								TweenLite.to($('.single-close'), 1, {css:{x:'0%'}, ease:Expo.easeOut});
  396.                             }
  397.                         }});
  399.                         $('.single-close').bind('click',function(){
  400. 							window.location="/";
  401. 						});
  402. 						$(document).keyup(function(e) {
  403.                             if(e.keyCode == 27 && document.body.classList.contains('single')){
  404.                                 window.location="/";
  405.                             }
  406.                         });
  407.                         window.clearTimeout(set);
  408.                         window.clearTimeout(set2);
  409.                     },200);
  410.                 },1300);
  411.             });
  412.             set3 = window.setTimeout(function(){
  413.                 $('.bit-event-data').attr('style','');
  414.                 window.clearTimeout(set3);
  415.             },300);
  417.         },
  418.         onresize : function(){
  420.         }
  421.     },
  423.     home : {
  424.         onready : function(){
  425.             var _body = $('body');
  426. 			var _single = $('.page--single');
  428.             /* ----------
  429.             Composant :
  430.             _ Spanify Letters.
  431.             ---------- */
  432.             var _band_t = document.getElementsByClassName("band--name");
  433.             var text = "";
  434.             var letter = "";
  435.             var letters = text.split('');
  436.             var spanified = [];
  438.             for(var n=0;n<_band_t.length;n++){
  439.                 text = _band_t[n].innerHTML;
  440.                 letters = text.split('');
  441.                 spanified = [];
  442.                 for(var i = 0; i < letters.length; i++) {
  443.                     if(letters[i] === ' ') letters[i] = '&nbsp';
  444.                     letters[i] = '<span class="letter-mask"><span class="letter-inner">' + letters[i] + '</span></span>';
  445.                     spanified.push(letters[i]);
  446.                 }
  447.                 _band_t[n].innerHTML = spanified.join('');
  448.             }
  450.             /* ----------
  451.             Composant :
  452.             _ Slider
  453.             ---------- */
  454.             var c = 1;
  455.             var l = $('.bands-slide').length;
  457.             $('#item-1').addClass('slide-active');
  458. 			TweenLite.to($('#item-1'), 0.8, {css:{scale:1, opacity:1}, ease:Power3.easeOut});
  460.             $('.slider-control.prev').bind('click', function(){
  461.                 if(c!=1){
  462.                     c--;
  463.                 }
  464.                 else {
  465.                     c=l;
  466.                 }
  468.                 $('.bands-slide').removeClass('slide-active');
  469. 				$('#item-'+c).addClass('slide-active');
  471.                 TweenLite.to($('#item-'+c), 1.1, {css:{scale:1, opacity:1}, ease:Power3.easeOut, onComplete:function(){
  472. 					TweenLite.set($('.bands-slide:not(#item-'+ c +')'), {css:{scale:1.2, opacity: 0}});
  473.                 }});
  474.             });
  476.             $('.slider-control.next').bind('click', function(){
  477.                 if(c!=l){
  478.                     c++;
  479.                 }
  480.                 else{
  481.                     c=1;
  482.                 }
  484.                 $('.bands-slide').removeClass('slide-active');
  485. 				$('#item-'+c).addClass('slide-active');
  487.                 TweenLite.to($('#item-'+c), 1.1, {css:{scale:1, opacity:1}, ease:Power3.easeOut, onComplete:function(){
  488. 					TweenLite.set($('.bands-slide:not(#item-'+ c +')'), {css:{scale:1.1, opacity: 0}});
  489. 				}});
  490. 			});
  491. 		},
  492. 		onload : function(){
  493. 			var _loader = $('.page--loader');
  494. 			var _intro = $('.page--intro');
  495. 			var _body = $('body');
  496. 			var _svg_loader = $('#svg-loader');
  497. 			var _svg_loader_img = $('#svg-loader-img');
  498. 			var _logo = $('.js-band--logo');
  499. 			var _page_single = $('#page--single');
  500. 			var _bands_slider = $('.bands-slider');
  501. 			var _page_scroll = $('#page--scroll');
  502. 			var _menu = $('.menu');
  504.             var yOrigin = 0;
  505.             var destY = 0;
  506.             var smoothY = 0;
  508.             var intro = document.getElementById("intro-content");
  509.             var home_intro = $('.page--intro');
  511.             var _ff = $('#fixed-footer');
  513.             var y = $(window).scrollTop();
  514.             var h = window.innerHeight;
  516.             var viewport= document.getElementById("scroll-viewport");
  517.             var overview = document.getElementById("scroll-overview");
  518.             var overviewSingle = document.getElementById("page--single");
  520.             var viewportHeight = viewport.getBoundingClientRect().height;
  522.             // reset home intro so we get real height
  523.             home_intro.css('height', viewportHeight);
  525.             var overviewSingleHeight = overviewSingle.getBoundingClientRect().height;
  526.             var overviewHeight = overview.getBoundingClientRect().height;
  528.             var calc = 0;
  529.             var calcn = 0;
  530.             var translationMatrix = "";
  531.             var o = "";
  533.             var set;
  534.             var set1;
  536.             var mobile;
  537.             if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  538.                 mobile = false;
  539.             } else{ mobile = true; }
  541.             _body.addClass('loaded-on');
  544.             var bindto = document.querySelectorAll('.js-scrollto');
  545.             var _bindto = Array.prototype.slice.call(bindto, 0);
  546.             _bindto.forEach(function(_bind) {
  547.                 _bind.addEventListener('click', function(){
  548.                     var section = this.getAttribute('data-scroll');
  549.                     var to = $('#js-scrollto-'+section).offset().top;
  550.                     window.scrollTo(0, to);
  551.                 });
  552.             });
  554.             new imagesLoaded(overview, function(instance) {
  555.                 var overviewHeight = overview.getBoundingClientRect().height;
  556.                 _page_scroll.css('height', overviewHeight);
  558.                 set = window.setTimeout(function(){
  559.                     _body.addClass('loaded');
  560.                     _intro.removeClass('onload');
  561.                     set1 = window.setTimeout(function(){
  562.                         _loader.removeClass('on');
  563.                         run();
  564.                         window.clearTimeout(set);
  565.                         window.clearTimeout(set1);
  566.                     },200);
  567.                 },1300);
  568.             });
  570.             // reset
  571.             _bands_slider.css('height', $('.band--img').height());
  573.             var nodes = [];
  574.             [].forEach.call(document.querySelectorAll('.js-el'), function(el,i) {
  575.                 nodes[i] = {
  576.                    el: el,
  577.                    direction: el.getAttribute('data-direction'),
  578.                };
  579.             });
  581.             var loadert;
  583.             function load_single(_title,_url){
  584.                 _body.addClass('single');
  585.                 _page_single.addClass('ready');
  587.                 yOrigin = $(window).scrollTop();
  589.                 window.scrollTo(0, 0);
  591.                 var gifLoader = new Image();
  592.                 gifLoader.onload = function() {
  593.                     _svg_loader_img.attr('src', gifLoader.src);
  595.                     // timeline
  596.                     var _tl_open = new TimelineLite({onComplete:function(){
  597.                         _svg_loader.addClass('show');
  599.                         _page_single.load(_url,{_title: _title},function(){
  600.                             change_my_url(null, _title, _url);
  601.                             if(mobile==false){
  602.                                 TweenLite.set($('.single--artist'), {css:{scale:1.2, opacity: 0}});
  603. 								TweenLite.set($('.artist-name'), {css:{x:'-300%'}});
  604.                                 TweenLite.set($('.artist-close'), {css:{x:'300%'}});
  605.                             }
  606.                             // change rAF
  607.                             new imagesLoaded(_page_single, function(instance) {
  608.                                 _svg_loader.removeClass('show');
  610.                                 TweenLite.to($('.single--artist'), 1, {css:{scale:1, opacity:1}, ease:Expo.easeOut, onComplete:function(){
  611. 									_svg_loader_img.attr('src', '');
  612. 									overviewSingleHeight = overviewSingle.getBoundingClientRect().height;
  613. 									_page_scroll.css('height', overviewSingleHeight);
  614. 									if(mobile==false){
  615. 										TweenLite.to($('.js-content'), 1, {css:{opacity:1}, delay: 0.8, ease:Expo.easeOut});
  616. 										TweenLite.to($('.artist-name'), 1, {css:{x:'0%'}, ease:Expo.easeOut});
  617. 										TweenLite.to($('.artist-name span'), 1, {css:{y:'0%', opacity:1}, delay: 0.4, ease:Expo.easeOut});
  618. 										TweenLite.to($('.artist-close'), 1, {css:{x:'0%'}, ease:Expo.easeOut});
  619.                                     }
  620.                                 }});
  622.                                 cancelAnimationFrame(globalID);
  623.                                 globalSingle = requestAnimationFrame(runa);
  625.                                 $('.artist-close').bind('click',function(){
  626. 									single_close();
  627. 								});
  628. 								$(document).keyup(function(e) {
  629.                                     if(e.keyCode == 27 && document.body.classList.contains('single')){
  630.                                         single_close();
  631.                                     }
  632.                                 });
  633.                             });
  634.                         });
  635.                     }});
  636.                     _tl_open.to($('.page--home'), 1, {css:{opacity:0}, ease:Expo.easeOut, force3D:true});
  637.                 };
  638.                 gifLoader.src = "/wp-content/themes/sa/images/loading.gif";
  639.             }
  640.             function single_close(){
  641.                 var _title = "Home";
  642.                 var _url = "/";
  643.                 change_my_url(null, _title, _url);
  645.                 window.scrollTo(0, yOrigin);
  647.                 _body.removeClass('single');
  649.                 TweenLite.set($('.page--home'), {css:{opacity: 0}});
  651.                 // change rAF
  652.                 cancelAnimationFrame(globalSingle);
  653.                 globalID = requestAnimationFrame(run);
  655.                 // timeline
  656.                 var _tl_close = new TimelineLite({onComplete:function(){
  657.                     _page_single.removeClass('ready');
  658.                     //single
  659.                     _page_single.html("");
  660.                     TweenLite.to($('.page--home'), 0.6, {css:{opacity:1}, ease:Expo.easeOut, force3D:true, onComplete:function(){
  661. 						overviewHeight = overview.getBoundingClientRect().height;
  662. 						_page_scroll.css('height', overviewHeight);
  663. 						if(mobile==false){
  664. 							TweenLite.set($('.js-content'), {css:{opacity:0}});
  665. 							TweenLite.set($('.artist-name'), {css:{x:'-300%'}});
  666. 							TweenLite.set($('.artist-name span'), {css:{y:'-100%', opacity:0}});
  667. 							TweenLite.set($('.artist-close'), {css:{x:'300%'}});
  668. 						}
  669. 					}});
  670. 				}});
  671. 				_tl_close.to($('.single--artist'), 1, {css:{opacity:0}, ease:Expo.easeOut, force3D:true});
  672.             };
  674.             $('.bands-slide').bind('click', function(){
  675. 				var _title = $(this).attr('data-title');
  676. 				var _url = $(this).attr('data-link');
  677.                 load_single(_title,_url);
  678.             });
  680.             _logo.bind('click',function(){
  681.                 var _titlel = $(this).attr('data-title');
  682. 				var _urll = $(this).attr('data-link');
  683.                 load_single(_titlel,_urll);
  684.             });
  686.             // matrix3d
  687.             var deg2rad, rotateX, rotateY, rotateZ, scale;
  688.             deg2rad = 0;
  689.             rotateX = 0;
  690.             rotateY = 0;
  691.             rotateZ = 0;
  692.             scale = 1;
  693.             var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, scaleMatrix, transformationMatrix, translationMatrix;
  694.             rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(rotateX * deg2rad), Math.sin(-rotateX * deg2rad), 0], [0, Math.sin(rotateX * deg2rad), Math.cos(rotateX * deg2rad), 0], [0, 0, 0, 1]]);
  695. 			rotationYMatrix = $M([[Math.cos(rotateY * deg2rad), 0, Math.sin(rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-rotateY * deg2rad), 0, Math.cos(rotateY * deg2rad), 0], [0, 0, 0, 1]]);
  696.             rotationZMatrix = $M([[Math.cos(rotateZ * deg2rad), Math.sin(-rotateZ * deg2rad), 0, 0], [Math.sin(rotateZ * deg2rad), Math.cos(rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);
  697. 			s = scale;
  698. 			scaleMatrix = $M([[s, 0, 0, 0], [0, s, 0, 0], [0, 0, s, 0], [0, 0, 0, 1]]);
  700.             // if we want to cancel / run rAF
  701.             var globalID;
  702.             var globalSingle;
  704.             var sf;
  706.             var ease = 0.1;
  708.             function runa() {
  709.                 globalSingle = requestAnimationFrame(runa);
  711.                 // scrolltop & window.height
  712.                 if(mobile==false){
  713.                     y = window.pageYOffset;
  714.                 }
  715.                 h = window.innerHeight;
  716.                 sf = document.getElementById('js-single-footer').getBoundingClientRect().top;
  718.                 overviewHeight = overviewSingle.getBoundingClientRect().height;
  720.                 if(mobile==false){
  721.                     calcn += (y - calcn) * ease;
  722.                 }
  724.                 // footer / menu
  725.                 if(sf<30){
  726.                     _menu.addClass('js-light');
  727.                     _page_scroll.addClass('js-fixed');
  728.                 }
  729.                 else if(sf>30){
  730.                     _menu.removeClass('js-light');
  731.                     _page_scroll.removeClass('js-fixed');
  732.                 }
  734.                 if(sf<(h-30)){
  735.                     _ff.addClass('js-light');
  736.                 }
  737.                 else if(sf>(h-30)){
  738.                     _ff.removeClass('js-light');
  739.                 }
  741.                 if(mobile==false){
  742.                     // matrix3d transform
  743.                     translationMatrix = $M([
  744.                         [1,0,0,0],
  745.                         [0,1,0,0],
  746.                         [0,0,1,0],
  747.                         [0,-calcn,0,1]
  748.                         ]);
  749.                     transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix).x(scaleMatrix).x(translationMatrix);
  751.                     s = "matrix3d(";
  752.                     s += transformationMatrix.e(1, 1).toFixed(10) + "," + transformationMatrix.e(1, 2).toFixed(10) + "," + transformationMatrix.e(1, 3) + "," + transformationMatrix.e(1, 4).toFixed(10) + ",";
  753.                     s += transformationMatrix.e(2, 1).toFixed(10) + "," + transformationMatrix.e(2, 2).toFixed(10) + "," + transformationMatrix.e(2, 3) + "," + transformationMatrix.e(2, 4).toFixed(10) + ",";
  754.                     s += transformationMatrix.e(3, 1).toFixed(10) + "," + transformationMatrix.e(3, 2).toFixed(10) + "," + transformationMatrix.e(3, 3) + "," + transformationMatrix.e(3, 4).toFixed(10) + ",";
  755.                     s += transformationMatrix.e(4, 1).toFixed(10) + "," + transformationMatrix.e(4, 2).toFixed(10) + "," + transformationMatrix.e(4, 3) + "," + transformationMatrix.e(4, 4).toFixed(10);
  756.                     s += ")";
  758.                     overviewSingle.style["transform"] = s;
  759.                     overviewSingle.style["webkitTransform"] = s;
  760.                     overviewSingle.style["mozTransform"] = s;
  761.                     overviewSingle.style["msTransform"] = s;
  762.                 }
  763.             }
  765.             var node;
  766.             var d;
  767.             var r;
  768.             var v;
  769.             var t;
  770.             var s;
  771.             var f;
  773.             //console.log('mobile = ' + mobile);
  774.             //console.log('ease = ' + ease);
  776.             var _js_footer = document.getElementById('js-footer');
  778.             function run() {
  779.                 globalID = requestAnimationFrame(run); //globalID = 
  781.                 // scrolltop & window.height
  782.                 if(mobile==false){
  783.                     y = window.pageYOffset;
  784.                 }
  786.                 h = window.innerHeight;
  787.                 f = _js_footer.getBoundingClientRect().top;
  789.                 // home overview & viewport height
  790.                 overviewHeight = overview.getBoundingClientRect().height;
  791.                 viewportHeight = viewport.getBoundingClientRect().height;
  793.                 if(mobile==false){
  794.                     calc += (y - calc) * ease;
  796.                     var t = 'translate3d(0, ' + - calc + 'px, 0)';
  797.                     var s = overview.style;
  798.                     s["transform"] = t;
  799.                     s["webkitTransform"] = t;
  800.                     s["mozTransform"] = t;
  801.                     s["msTransform"] = t;
  802.                 }
  804.                 // footer / menu
  805.                 if(f<30){
  806.                     $('#js-burger').addClass('js-light');
  807. 					_menu.addClass('js-light');
  808. 					_page_scroll.addClass('js-fixed');
  809. 				}
  810. 				else if(f>30){
  811. 					$('#js-burger').removeClass('js-light');
  812.                     _menu.removeClass('js-light');
  813.                     _page_scroll.removeClass('js-fixed');
  814.                 }
  816.                 if(f<(h-30)){
  817.                     _ff.addClass('js-light');
  818.                 }
  819.                 else if(f>(h-30)){
  820.                     _ff.removeClass('js-light');
  821.                 }
  823.                 if(mobile==false){
  824.                     // intro opacity
  825.                     o = h / 1.5;
  826.                     opacity = (1 - y / o);
  827.                     opacity = Math.max(0, Math.min(opacity, 1));
  828.                     intro.style["opacity"] = opacity;
  830.                     // parallax images
  831.                     for(var i = 0; i < nodes.length; i++) {
  832.                         node = nodes[i];
  834.                         d = node.direction;
  835.                         r = node.rotate;
  837.                         v = -200;
  838.                         v += (y - v) * ease;
  840.                         smoothY += (v - smoothY) * ease;
  842.                         translationMatrix = $M([
  843.                             [1,0,0,0],
  844.                             [0,1,0,0],
  845.                             [0,0,1,0],
  846.                             [0,d + smoothY,0,1]
  847.                             ]);
  849.                         transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix).x(scaleMatrix).x(translationMatrix);
  851.                         t = "matrix3d(";
  852.                         t += transformationMatrix.e(1, 1).toFixed(10) + "," + transformationMatrix.e(1, 2).toFixed(10) + "," + transformationMatrix.e(1, 3) + "," + transformationMatrix.e(1, 4).toFixed(10) + ",";
  853.                         t += transformationMatrix.e(2, 1).toFixed(10) + "," + transformationMatrix.e(2, 2).toFixed(10) + "," + transformationMatrix.e(2, 3) + "," + transformationMatrix.e(2, 4).toFixed(10) + ",";
  854.                         t += transformationMatrix.e(3, 1).toFixed(10) + "," + transformationMatrix.e(3, 2).toFixed(10) + "," + transformationMatrix.e(3, 3) + "," + transformationMatrix.e(3, 4).toFixed(10) + ",";
  855.                         t += transformationMatrix.e(4, 1).toFixed(10) + "," + transformationMatrix.e(4, 2).toFixed(10) + "," + transformationMatrix.e(4, 3) + "," + transformationMatrix.e(4, 4).toFixed(10);
  856.                         t += ")";
  858.                         s = node.el.style;
  859.                         s["transform"] = t;
  860.                         s["webkitTransform"] = t;
  861.                         s["mozTransform"] = t;
  862.                         s["msTransform"] = t;
  863.                     }
  864.                 }
  865.             };
  866.         },
  867.         onresize : function(){
  868.             var home_intro = $('.page--intro');
  869. 			var page_scroll = $('#page--scroll');
  870.             var band_img = $('.band--img');
  871. 			var bands_slider = $('.bands-slider');
  872.             var viewport= document.getElementById("scroll-viewport");
  874.             var viewportHeight = viewport.getBoundingClientRect().height;
  875.             home_intro.css('height', viewportHeight);
  877.             if(document.body.classList.contains('single')){
  878.                 var overview = document.getElementById("page--single");
  879.             }
  880.             else{
  881.                 var overview = document.getElementById("scroll-overview");
  882.             }
  884.             var overviewHeight = overview.getBoundingClientRect().height;
  886.             page_scroll.css('height', overviewHeight);
  887.             bands_slider.css('height', band_img.height());
  888.         }
  889.     },
  890.     single : {
  891.         onready : function(){
  893.         },
  894.         onload : function(){
  895.             var _body = $('body');
  896. 			var _loader = $('.page--loader');
  897.             var _single = $('.page--single');
  898. 			var _page_scroll = $('#page--scroll');
  899.             var _menu = $('.menu');
  900. 			var _ff = $('#fixed-footer');
  901.             var set;
  902.             var set2;
  904.             _body.addClass('loaded-on');
  906.             var destY = 0;
  908.             var y = window.pageYOffset;
  909.             var h = window.innerHeight;
  911.             var overviewSingle = document.getElementById("page--single");
  912.             var overviewSingleHeight;
  914.             var viewport = document.getElementById("scroll-viewport");
  915.             var viewportHeight;
  917.             var calcn = 0;
  919.             // matrix3d
  920.             var deg2rad, rotateX, rotateY, rotateZ, scale;
  921.             deg2rad = 0;
  922.             rotateX = 0;
  923.             rotateY = 0;
  924.             rotateZ = 0;
  925.             scale = 1;
  926.             var rotationXMatrix, rotationYMatrix, rotationZMatrix, s, scaleMatrix, transformationMatrix, translationMatrix;
  927.             rotationXMatrix = $M([[1, 0, 0, 0], [0, Math.cos(rotateX * deg2rad), Math.sin(-rotateX * deg2rad), 0], [0, Math.sin(rotateX * deg2rad), Math.cos(rotateX * deg2rad), 0], [0, 0, 0, 1]]);
  928. 			rotationYMatrix = $M([[Math.cos(rotateY * deg2rad), 0, Math.sin(rotateY * deg2rad), 0], [0, 1, 0, 0], [Math.sin(-rotateY * deg2rad), 0, Math.cos(rotateY * deg2rad), 0], [0, 0, 0, 1]]);
  929.             rotationZMatrix = $M([[Math.cos(rotateZ * deg2rad), Math.sin(-rotateZ * deg2rad), 0, 0], [Math.sin(rotateZ * deg2rad), Math.cos(rotateZ * deg2rad), 0, 0], [0, 0, 1, 0], [0, 0, 0, 1]]);
  930. 			s = scale;
  931. 			scaleMatrix = $M([[s, 0, 0, 0], [0, s, 0, 0], [0, 0, s, 0], [0, 0, 0, 1]]);
  933.             // if we want to cancel / run rAF
  934.             var globalID;
  935.             var globalSingle;
  937.             var mobile;
  938.             if(!/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
  939.                 mobile = false;
  940.             } else{ mobile = true; }
  942.             var ease;
  943.             if(mobile==true){
  944.                 ease = 1;
  945.             }
  946.             else{
  947.                 ease = 0.1;
  948.             }
  950.             function runa() {
  951.                 globalSingle = requestAnimationFrame(runa);
  953.                 // scrolltop & window.height
  954.                 if(mobile==false){
  955.                     y = window.pageYOffset
  956.                 }
  958.                 h = window.innerHeight;
  959.                 sf = document.getElementById('js-single-footer').getBoundingClientRect().top;
  961.                 if(mobile==false){
  962.                     // easing
  963.                     calcn += (y - calcn) * ease;
  965.                     // matrix3d transform
  966.                     translationMatrix = $M([
  967.                         [1,0,0,0],
  968.                         [0,1,0,0],
  969.                         [0,0,1,0],
  970.                         [0,-calcn,0,1]
  971.                         ]);
  972.                     transformationMatrix = rotationXMatrix.x(rotationYMatrix).x(rotationZMatrix).x(scaleMatrix).x(translationMatrix);
  974.                     s = "matrix3d(";
  975.                     s += transformationMatrix.e(1, 1).toFixed(10) + "," + transformationMatrix.e(1, 2).toFixed(10) + "," + transformationMatrix.e(1, 3) + "," + transformationMatrix.e(1, 4).toFixed(10) + ",";
  976.                     s += transformationMatrix.e(2, 1).toFixed(10) + "," + transformationMatrix.e(2, 2).toFixed(10) + "," + transformationMatrix.e(2, 3) + "," + transformationMatrix.e(2, 4).toFixed(10) + ",";
  977.                     s += transformationMatrix.e(3, 1).toFixed(10) + "," + transformationMatrix.e(3, 2).toFixed(10) + "," + transformationMatrix.e(3, 3) + "," + transformationMatrix.e(3, 4).toFixed(10) + ",";
  978.                     s += transformationMatrix.e(4, 1).toFixed(10) + "," + transformationMatrix.e(4, 2).toFixed(10) + "," + transformationMatrix.e(4, 3) + "," + transformationMatrix.e(4, 4).toFixed(10);
  979.                     s += ")";
  981.                     overviewSingle.style["transform"] = s;
  982.                     overviewSingle.style["webkitTransform"] = s;
  983.                     overviewSingle.style["mozTransform"] = s;
  984.                     overviewSingle.style["msTransform"] = s;
  985.                 }
  987.                 // footer / menu
  988.                 if(sf<30){
  989.                     _menu.addClass('js-light');
  990.                     _page_scroll.addClass('js-fixed');
  991.                 }
  992.                 else if(sf>30){
  993.                     _menu.removeClass('js-light');
  994.                     _page_scroll.removeClass('js-fixed');
  995.                 }
  997.                 if(sf<(h-30)){
  998.                     _ff.addClass('js-light');
  999.                 }
  1000.                 else if(sf>(h-30)){
  1001.                     _ff.removeClass('js-light');
  1002.                 }
  1003.             }
  1005.             new imagesLoaded(document.body, function(instance) {
  1006.                 TweenLite.set($('.single--artist'), {css:{scale:1.2, opacity: 0}});
  1008.                 set = window.setTimeout(function(){
  1009.                     _body.addClass('loaded');
  1011.                     set2 = window.setTimeout(function(){
  1012.                         _loader.removeClass('on');
  1013.                         _body.addClass('single');
  1014.                         _single.addClass('ready');
  1016.                         TweenLite.to($('.single--artist'), 1, {css:{scale:1, opacity:1}, ease:Expo.easeOut, onComplete:function(){
  1017. 							overviewSingleHeight = overviewSingle.getBoundingClientRect().height;
  1018. 							_page_scroll.css('height', overviewSingleHeight);
  1019. 							globalSingle = requestAnimationFrame(runa);
  1020. 							if(mobile==false){
  1021. 								TweenLite.to($('.js-content'), 1, {css:{opacity:1}, delay: 0.8, ease:Expo.easeOut});
  1022. 								TweenLite.to($('.artist-name'), 1, {css:{x:'0%'}, ease:Expo.easeOut});
  1023. 								TweenLite.to($('.artist-name span'), 1, {css:{y:'0%', opacity:1}, delay: 0.6, ease:Expo.easeOut});
  1024. 								TweenLite.to($('.artist-close'), 1, {css:{x:'0%'}, ease:Expo.easeOut});
  1025.                             }
  1026.                         }});
  1028.                         $('.artist-close').bind('click',function(){
  1029. 							window.location="/";
  1030. 						});
  1031. 						$(document).keyup(function(e) {
  1032.                             if(e.keyCode == 27 && document.body.classList.contains('single')){
  1033.                                 window.location="/";
  1034.                             }
  1035.                         });
  1037.                         window.clearTimeout(set);
  1038.                         window.clearTimeout(set2);
  1039.                     },200);
  1040.                 },1300);
  1041.             });
  1042.         },
  1043.         onresize : function(){
  1044.             var page_scroll = $('#page--scroll');
  1046.             var overviewSingle = document.getElementById("page--single");
  1047.             var overviewSingleHeight = overviewSingle.getBoundingClientRect().height;
  1049.             page_scroll.css('height', overviewSingleHeight);
  1050.         }
  1051.     },
  1052.     error : {
  1053.         onready : function(){
  1055.         },
  1056.         onload : function(){
  1058.         },
  1059.         onresize : function(){
  1061.         }
  1062.     }
  1063. };
  1065. var targetY = 0;
  1067. window.addEventListener('load', function() {
  1068.     FastClick.attach(document.body);
  1069. }, false);
  1071. $(document).ready(function(){
  1072.     app[document.body.id].onready();
  1073.     app['common'].onready();
  1074. });
  1076. $(window).load(function(){
  1077.     app[document.body.id].onload();
  1078. });
  1080. $(window).resize(function(){
  1081.     app[document.body.id].onresize();
  1082. });
添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注