1(function(){ 2 3 4 if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) { 5 6 function secondaryHeaderLoader(){ 7 var loader = new TimelineMax({}); 8 loader.call(function() { init(); animate(); }, null, null, '-=0') 9 .call(function() { $('#inner-body').css('visibility','visible'); }, null, null, '-=0') 10 .from('#home-hero h1', 1, {bottom:200, opacity:0}, '-=0') 11 } 12 secondaryHeaderLoader(); 13 14 }else{ 15 16 if(sessionStorage.getItem('NAMHompageLoader') !== 'true'){ 17/* 18 firstTimeLoad(); 19 sessionStorage.setItem('NAMHompageLoader', 'true'); 20*/ 21 secondaryHeaderLoader(); 22 23 }else{ 24 secondaryHeaderLoader(); 25 } 26 27 28 var controller = new ScrollMagic.Controller(); 29 30 //Hero Parallax 31 var hero = new TimelineMax({}) 32 .to('#home-hero .pop-out', 1, {height:'100%'}, "0") 33 .from('#home-video', 1 , {marginTop:200}, "-=1") 34 .from('#home-video .pop-frame', 1 , {top:100}, "-=1") 35 .from('#home-intro', 1 , {paddingTop:550}, "-=1") 36 .to('#home-hero .section-arrow', 1, {height:600}, "-=.5"); 37 var heroScene = new ScrollMagic.Scene({duration: '100%', triggerElement:'#home-hero', triggerHook:0 }) 38 .setTween(hero) 39 .addTo(controller); 40 41 42 //Project Build-in 43 $('#home-projects > ul > li').each(function() { 44 var projects = new ScrollMagic.Scene({triggerElement:this, triggerHook:0.6}) 45 .setTween(new TimelineMax () 46 .from($(this), .5, {opacity:0, right:-20}, "0") 47 //.from($(this).find('.fg'), .5, {scale:1.3}, "-=.5") 48 .from($(this).find('.info'), .5, {bottom:-40, opacity:0}, '-=.5') 49 .from($(this).find('.logo'), .5, {top:-40, opacity:0}, '-=.5') 50 ) 51 .addTo(controller); 52 }); 53 54 //Services Build-in 55 $('#home-services > li ').each(function() { 56 var services = new ScrollMagic.Scene({triggerElement:this}) 57 .setTween( new TimelineMax () 58 .from($(this), .5, {opacity:0}) 59 .to($(this), .5, {color:'#26acff'}) 60 ) 61 .addTo(controller); 62 }); 63 64 //Footer Build-in 65 var testimonials = new TimelineMax({}) 66 .from('#home-testimonials', 1, {opacity:0, ease: Quad.easeOut}) 67 .from('#home-testimonials img', 1, {top:150, paddingLeft:50, ease: Quad.easeOut}, '-=1') 68 .from('#home-testimonials .info', 1, {y:-100, ease: Quad.easeOut}, '-=1'); 69 70 var testimonialsScene = new ScrollMagic.Scene({triggerElement:'#home-testimonials', triggerHook:.8}) 71 .setTween(testimonials) 72 .addTo(controller); 73 74 //home-blogs 75 var blogs = new TimelineMax({}) 76 .from('#home-blogs h3', 1, {top:150, opacity:0}, "-=1") 77 .from('#home-blogs li', 1, {top:150, opacity:0}, "-=.5"); 78 79 var blogsScene = new ScrollMagic.Scene({triggerElement:'#home-blogs', triggerHook:.8}) 80 .setTween(blogs) 81 .addTo(controller); 82 83 //Logo Animation 84 function pathPrepare ($el) { 85 var lineLength = $el[0].getTotalLength(); 86 $el.css("stroke-dasharray", lineLength); 87 $el.css("stroke-dashoffset", lineLength); 88 } 89 90 var $word = $("path#word"); 91 pathPrepare($word); 92 93 var controller = new ScrollMagic.Controller(); 94 95 var tween = new TimelineMax() 96 .add(TweenMax.to($word, 3, {strokeDashoffset: 0, ease:Linear.easeNone})); 97 98 var scene = new ScrollMagic.Scene({tweenChanges: true, triggerElement:'#home-intro'}) 99 .setTween(tween) 100 .addTo(controller); 101 102 103 function rotateLoaderLogo() { 104 var rotate = new TimelineMax({repeat:-1}).to('.loader', 0, {rotation:0, ease:Circ.easeOut}, '+=0').to('.loader', 1, {rotation:360, ease:Circ.easeInOut}, '+=0'); 105 } 106 107 function firstTimeLoad(){ 108 var loader = new TimelineMax({}); 109 loader.call(function() { $('#inner-body').css('visibility','visible'); $('.loader').show(); rotateLoaderLogo(); }, null, null, '-=0') 110 .set('body', {position:'fixed', left:0, right:0}) 111 .from('.container', 1, {delay: 3, maxWidth:'100%', paddingLeft:0, paddingRight:0, ease:Circ.easeOut}, '+=0') 112 .call(function() { $('.loader').hide(); }, null, null, '-=1') 113 .from('body', 1, {paddingTop:0, ease:Circ.easeOut}, '-=0') 114 .from('header', 1, {top:'-100%', ease:Circ.easeOut}, '-=1') 115 .from('#home-hero .bg', 1, {height:'150%'}, '-=1.5') 116 .call(function() { init(); animate(); }, null, null, '-=.5') 117 .from('#home-hero h1', 1, {bottom:200, opacity:0}
117, '-=1') 118 .from('#home-hero .section-arrow', .5, {height:0, ease:Circ.easeOut}, '-=.5') 119 loader.set('body', {position:'relative'}) 120 } 121 122 function secondaryHeaderLoader(){ 123 var loader = new TimelineMax({}); 124 loader.call(function() { $('#inner-body').css('visibility','visible'); }, null, null, '-=0') 125 .set('body', {position:'fixed', left:0, right:0}) 126 .call(function() { init(); animate(); }, null, null, '-=0') 127 .from('#home-hero h1', 1, {bottom:200, opacity:0}, '-=0') 128 .from('#home-hero .section-arrow', .5, {height:0, ease:Circ.easeOut}, '-=.5') 129 loader.set('body', {position:'relative'}); 130 131 } 132 } 133 134 var particlesConfig = { 135 "particles": { 136 "number": { 137 "value": 180, 138 "density": { 139 "enable": true, 140 "value_area": 473.50726833656915 141 } 142 }, 143 "color": { 144 "value": "#ffffff" 145 }, 146 "shape": { 147 "type": "circle", 148 "stroke": { 149 "width": 0, 150 "color": "#000000" 151 }, 152 "polygon": { 153 "nb_sides": 5 154 }, 155 "image": { 156 "src": "img/github.svg", 157 "width": 100, 158 "height": 100 159 } 160 }, 161 "opacity": { 162 "value": 1, 163 "random": true, 164 "anim": { 165 "enable": true, 166 "speed": 1, 167 "opacity_min": 0, 168 "sync": true 169 } 170 }, 171 "size": { 172 "value": 1.3, 173 "random": true, 174 "anim": { 175 "enable": false, 176 "speed": 4, 177 "size_min": 0.3, 178 "sync": false 179 } 180 }, 181 "line_linked": { 182 "enable": false, 183 "distance": 150, 184 "color": "#ffffff", 185 "opacity": 0.4, 186 "width": 1 187 }, 188 "move": { 189 "enable": true, 190 "speed": 1, 191 "direction": "bottom-right", 192 "random": true, 193 "straight": false, 194 "out_mode": "out", 195 "bounce": false, 196 "attract": { 197 "enable": false, 198 "rotateX": 600, 199 "rotateY": 600 200 } 201 } 202 }, 203 "interactivity": { 204 "detect_on": "canvas", 205 "events": { 206 "onhover": { 207 "enable": false, 208 "mode": "bubble" 209 }, 210 "onclick": { 211 "enable": false, 212 "mode": "repulse" 213 }, 214 "resize": true 215 }, 216 "modes": { 217 "grab": { 218 "distance": 400, 219 "line_linked": { 220 "opacity": 1 221 } 222 }, 223 "bubble": { 224 "distance": 250, 225 "size": 0, 226 "duration": 2, 227 "opacity": 0, 228 "speed": 3 229 }, 230 "repulse": { 231 "distance": 400, 232 "duration": 0.4 233 }, 234 "push": { 235 "particles_nb": 4 236 }, 237 "remove": { 238 "particles_nb": 2 239 } 240 } 241 }, 242 "retina_detect": true 243 }; 244 particlesJS('particles-js', particlesConfig); 245 246 var SCREEN_WIDTH = document.getElementById('home-hero').clientWidth, SCREEN_HEIGHT = document.getElementById('home-hero').clientHeight; 247 var VIEW_ANGLE = 45, ASPECT = SCREEN_WIDTH / SCREEN_HEIGHT, NEAR = 0.1, FAR = 20000; 248 249 var scene, camera, renderer, controls, floor; 250 251 var simplex = new SimplexNoise(); 252 253 var delta = 0; 254 255 var floorGeometry; 256 257 var didScroll = false; 258 var pastScroll = 0; 259 var curSroll = 0; 260 261 var raycaster; 262 var mouseVec = new THREE.Vector2(); 263 var intersection = null; 264 265 $("#home-hero").mousemove(function(e){ 266 onMouseMove($(this), e); 267 }); 268 $("#home-hero").on("touchmove", function(e){ 269 e.preventDefault(); 270 console.log(e); 271 }); 272 273 274 var init = function(){ 275 scene = new THREE.Scene(); 276 277 camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR); 278 camera.position.set(0,-75,-265); 279 camera.rotation.set(0,0,0); 280 281 renderer = new THREE.WebGLRenderer( {antialias:true, alpha:true} ); 282 renderer.setClearColor(0x000000, 0); 283 renderer.setSize( SCREEN_WIDTH, SCREEN_HEIGHT ); 284 renderer.sortObjects = false; 285 286 raycaster = new THREE.Raycaster(); 287 288 var header = document.getElementById('headerScene'); 289 header.appendChild( renderer.domElement ); 290 291 // LIGHT 292 var hemiLight = new THREE.HemisphereLight(0x000000, 0xffffff, 0.95); 293 hemiLight.position.set(0, 2000, -100); 294 scene.add(hemiLight); 295 296 var light = new THREE.AmbientLight(0xffffff, 0.9); 297 light.position.set(0,100,200); 298 scene.add(light); 299 300 // FLOOR 301 var floorMaterial = new THREE.MeshPhongMaterial( { color: 0xffffff, wireframe: true, transparent: false, vertexColors: THREE.FaceColors } ); 302 floorGeometry = new THREE.PlaneGeometry(450, 450, 30, 20); 303 304 floor = new THREE.Mesh(floorGeometry, floorMaterial); 305 floor.position.y = -150; 306 floor.rotation.x = 29.97; 307 scene.add(floor); 308 309 var t0 = new TWEEN.Tween( camera.position ).to( { 310 x: camera.position.x, 311 y: camera.position.y, 312 z: 265, 313 }, 1000 ) 314 .easing( TWEEN.Easing.Sinusoidal.Out) 315 .onComplete(function(){ 316 317 setTimeout(function(){ 318 for(var i = 0; i < (floorGeometry.vertices.length * .95); i++){ 319 var v = floorGeometry.vertices[i]; 320 var v2 = {}; 321 v2.z = getNoise(v.x * 0.01, v.y * 0.01, v.z * 0.01, 0) * 30; 322 v2.z += getNoise(v.x * 0.03, v.y * 0.03, v.z * 0.03, 0) * 10; 323 v2.z += getNoise(v.x * 0.1, v.y * 0.125, v.z * 0.125, 0) * 20; 324 325 new TWEEN.Tween( floorGeometry.vertices[i] ).to( { 326 x: v.x, 327 y: v.y, 328 z: v2.z, 329 }, 5500 ) 330 .easing( TWEEN.Easing.Elastic.Out).start(); 331 } 332 333 },100); 334 335 }); 336 337 setTimeout(function(){ 338 t0.start(); 339 }, 0); 340 } 341 342 var animate = function(){ 343 requestAnimationFrame( animate ); 344 update(); 345 render(); 346 } 347 348 var update = function(){ 349 delta += 0.05; 350 351 TWEEN.update(); 352 floorGeometry.verticesNeedUpdate = true; 353 floorGeometry.colorsNeedUpdate = true; 354 } 355 356 var render = function () { 357 renderer.render(scene, camera); 358 }; 359 360 var getNoise = function(x, y, z, t){ 361 return simplex.noise3D(x, y, z, t); 362 } 363 364 function onMouseMove(t,e){ 365 var parentOffset = t.parent().offset(); 366 //or $(this).offset(); if you really just want the current element's offset 367 var relX = e.pageX - parentOffset.left; 368 var relY = e.pageY - parentOffset.top; 369 370 mouseVec.x = 2 * (relX / SCREEN_WIDTH) - 1;
371 mouseVec.y = 1 - 2 * ( relY / SCREEN_HEIGHT ); 372 373 raycaster.setFromCamera( mouseVec, camera ); 374 375 var intersections = raycaster.intersectObjects( scene.children ); 376 intersection = ( intersections.length ) > 0 ? intersections[ 0 ] : null; 377 if(intersection !== null){ 378 var geo = intersection.object.geometry; 379 var face = geo.faces[intersection.faceIndex]; 380 381 382 setTimeout(function(){ 383 384 face.color.setHex( 0xf36d34 ); 385 new TWEEN.Tween( face.color ).to( { 386 r: 1, 387 g: 1, 388 b: 1, 389 }, 8500 ) 390 .easing( TWEEN.Easing.Elastic.Out).start(); 391 392 var v = geo.vertices[face.a]; 393 var v2 = {}; 394 v2.z = getNoise(v.x * 0.01, v.y * 0.01, v.z * 0.01, 0) * 30; 395 v2.z += getNoise(v.x * 0.03, v.y * 0.03, v.z * 0.03, 0) * 10; 396 v2.z += getNoise(v.x * 0.1, v.y * 0.125, v.z * 0.125, 0) * 20; 397 398 new TWEEN.Tween( geo.vertices[face.a] ).to( { 399 x: v.x, 400 y: v.y, 401 z: v2.z, 402 }, 5500 ) 403 .easing( TWEEN.Easing.Elastic.Out).start(); 404 405 },10); 406 } 407 } 408 409 410})(); 411 412 413 414 415 416$("#js-rotating").Morphext({ 417 // The [in] animation type. Refer to Animate.css for a list of available animations. 418 animation: "bounceIn", 419 // An array of phrases to rotate are created based on this separator. Change it if you wish to separate the phrases differently (e.g. So Simple | Very Doge | Much Wow | Such Cool). 420 separator: ",", 421 // The delay between the changing of each phrase in milliseconds. 422 speed: 2000, 423 complete: function () { 424 // Called after the entrance animation is executed. 425 } 426});
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.