Skip to content

Commit

Permalink
Add a sweet scrolling thing
Browse files Browse the repository at this point in the history
  • Loading branch information
@arscan
arscan committed Jun 10, 2015
1 parent 47888b4 commit 50004ed
Show file tree
Hide file tree
Showing 4 changed files with 129 additions and 6 deletions.
Binary file added images/scroll-down.png
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions index.html
View file
Expand Up @@ -71,6 +71,7 @@
<script src="js/LoadingPanel.js"></script>

<!-- main panels (put in projection) -->
<script src="js/ScrollPanel.js"></script>
<script src="js/SkeletonPanel.js"></script>
<script src="js/NamePanel.js"></script>
<script src="js/SharePanel.js"></script>
Expand Down
99 changes: 99 additions & 0 deletions js/ScrollPanel.js
View file
@@ -0,0 +1,99 @@
function createScrollPanel(renderer, scale){

var STANDARD_DIMENSIONS = {width: 275, height:175};

var width = STANDARD_DIMENSIONS.width * scale,
height = STANDARD_DIMENSIONS.height * scale;

var panel = createPanel(renderer, width, height, {foregroundGlow: true});

var icons = [];

var picHeight = 70;

var picsMaterial;

var active = false,
finishing = false,
finished = false;



function createBackground(){

var material = new THREE.MeshBasicMaterial({transparent: false, color: 0x000000});
var geometry = new THREE.PlaneBufferGeometry( width, height);

var plane = new THREE.Mesh( geometry, material );
plane.position.set(width/2, height/2, -1);
panel.addToScene( plane );
};

function init(){

createBackground();

var picsTexture = THREE.ImageUtils.loadTexture("images/scroll-down.png", undefined, LOADSYNC.register() );
picsMaterial = new THREE.MeshBasicMaterial({map: picsTexture, depthTest: false, transparent: true, opacity: 1});
var picsGeometry = new THREE.PlaneBufferGeometry( 275 * scale, 175 * scale);
var picsPlane = new THREE.Mesh(picsGeometry, picsMaterial );
picsPlane.scale.set(.5,.5,.5);
picsPlane.position.set(width/2, height/2, 0);
panel.addToScene(picsPlane);

}

function render(time){
if(!finished && active){
panel.setBlur((Math.sin(time*2) + 1)/3 + .33333);
panel.render(time);
}
}

function activate(){
active = true;
new TWEEN.Tween({y: 1300 * scale})
.to({y: 500 * scale}, 2000)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function(){
panel.setPosition(750 * scale, this.y, 1);
}).start();
}

function finish(){

if(!finishing && active){
new TWEEN.Tween({val: 0})
.to({val: 1}, 1000)
.easing(TWEEN.Easing.Quadratic.InOut)
.onUpdate(function(){
panel.setPosition(750 * scale, 500 * scale - 50 * this.val * scale , 1);
picsMaterial.opacity = 1 - this.val;
}).onComplete(function(){
finished = true;
}).start();
}
finishing = true;
}

function checkBounds(x, y){
return false;
}

init();

return Object.freeze({
toString: function(){return "AboutPanel"},
render: render,
renderTarget: panel.renderTarget,
width: width,
height: height,
quad: panel.quad,
checkBounds: checkBounds,
setBlur: panel.setBlur,
setPosition: panel.setPosition,
activate: activate,
finish: finish
});
}

35 changes: 29 additions & 6 deletions js/main.js
View file
Expand Up @@ -23,6 +23,7 @@ function main(renderWidth){
/* panels and such */
var skeletonPanel = createSkeletonPanel(renderer, screenScale),
namePanel = createNamePanel(renderer, screenScale),
scrollPanel = createScrollPanel(renderer, screenScale),
sharePanel = createSharePanel(renderer, screenScale),
tinyPanel1 = createTinyPanel1(renderer, screenScale),
tinyPanel2 = createTinyPanel2(renderer, screenScale),
Expand All @@ -34,7 +35,7 @@ function main(renderWidth){
photosPanel = createPhotosPanel(renderer, screenScale),
linksPanel = createLinksPanel(renderer, screenScale),
backgroundPanel = createBackgroundPanel(renderer, renderWidth, renderHeight),
projectorPanel = createProjectorPanel(renderer, renderWidth, renderHeight, screenScale, [loadingPanel, toolPanel, namePanel, skeletonPanel, tinyPanel1, tinyPanel2, tinyPanel3, tinyPanel4, tinyPanel5, sharePanel, photosPanel, projectsPanel, linksPanel]),
projectorPanel = createProjectorPanel(renderer, renderWidth, renderHeight, screenScale, [loadingPanel, toolPanel, namePanel, scrollPanel, skeletonPanel, tinyPanel1, tinyPanel2, tinyPanel3, tinyPanel4, tinyPanel5, sharePanel, photosPanel, projectsPanel, linksPanel]),
subjectPanel = createSubjectPanel(renderer, screenScale);//326, 580, 500 + 326/2, 580/2 - 120 ),
bottomPanel = createBottomPanel($("#bottom-panel").css({"opacity": 0, "top":renderHeight - (60 * screenScale) + Math.max(0,(window.innerHeight - renderHeight)/2), "width": renderWidth})),

Expand All @@ -48,6 +49,10 @@ function main(renderWidth){
mouseX = 0,
mouseY = 0,

introDone = false,

hasScrolled = false,

interactivePanels = [namePanel, skeletonPanel, sharePanel],
grabbedPanel = null,
grabStart = null,
Expand All @@ -64,6 +69,7 @@ function main(renderWidth){

loadingPanel.setPosition(renderWidth / 2 - 200 * screenScale, renderHeight /2 + 200 * screenScale, 1);

scrollPanel.setPosition(2000 * screenScale, renderHeight - 100 * screenScale, 1);
skeletonPanel.setPosition(380 * screenScale, renderHeight - 20 * screenScale, 1);
subjectPanel.setPosition(450 * screenScale, 450 * screenScale, 1);
tinyPanel1.setPosition(2024 * screenScale, 100 * screenScale, .5);
Expand Down Expand Up @@ -163,10 +169,7 @@ function main(renderWidth){

}).start();

new TWEEN.Tween({})
.to

loadingPanel.setPosition(renderWidth / 2 - 200 * screenScale, renderHeight /2 + 200 * screenScale, 1);
loadingPanel.setPosition(renderWidth / 2 - 200 * screenScale, renderHeight /2 + 200 * screenScale, 1);
/* loadin gpanel */
createChainedTween(loadingPanel, [
{position: {x: renderWidth / 2 - 200 * screenScale, y: renderHeight / 2 + 200*screenScale, z:1}},
Expand Down Expand Up @@ -278,6 +281,8 @@ function main(renderWidth){
.onUpdate(function(){
carouselLocation = this.pos;
setPanelPositions(true);
}).onComplete(function(){
introDone = true;
}).start();

/* tiny panel 1 */
Expand All @@ -289,6 +294,9 @@ function main(renderWidth){

}

function showScroll(){
}

/* register what to do while loading */

LOADSYNC.onUpdate(function(completedCount, totalCount){
Expand All @@ -301,6 +309,8 @@ function main(renderWidth){

setTimeout(runIntroAnimation, 2000);
setTimeout(function(){clock.start()}, 5000);
setTimeout(function(){if(!hasScrolled){scrollPanel.activate()}}, 25000);

});

function setInteraction(){
Expand All @@ -325,7 +335,7 @@ function main(renderWidth){
hammertime.get('pan').set({ direction: Hammer.DIRECTION_ALL });
/* right carousel */
hammertime.on('pan', function(ev){
if(ev.center.x > renderWidth / 2 && !panning){
if(ev.center.x > renderWidth / 2 && !panning && introDone){
snapTween.stop();

if(ev.velocity < 0){
Expand All @@ -339,6 +349,9 @@ function main(renderWidth){
}
carouselVelocity *= 1.3;

scrollPanel.finish();
hasScrolled = true;

return;
}

Expand Down Expand Up @@ -380,8 +393,11 @@ function main(renderWidth){
});

$("canvas").on('mousewheel', function(event){
if(!introDone) return;
snapTween.stop();
carouselVelocity = Math.max(-.5, Math.min(.5, event.deltaY / 6 + carouselVelocity));
scrollPanel.finish();
hasScrolled = true;
});
$("canvas").on('click', function(event){
if(carouselVelocity === 0){
Expand All @@ -407,6 +423,8 @@ function main(renderWidth){

});
$("canvas").on('mousemove', function(event){
if(!introDone) return;

mouseX = (event.offsetX || event.pageX - $(event.target).offset().left);
mouseY = (event.offsetY || event.pageY - $(event.target).offset().top);
if(carouselVelocity === 0){
Expand All @@ -431,10 +449,14 @@ function main(renderWidth){
});

$(window).keydown(function(event){
scrollPanel.finish();
hasScrolled = true;
if(event.which === 40 || event.which === 39){
if(!introDone) return;
snapTween.stop();
carouselVelocity -= .2;
} else if (event.which === 38 || event.which === 37) {
if(!introDone) return;
snapTween.stop();
carouselVelocity += .2;
}
Expand Down Expand Up @@ -506,6 +528,7 @@ function main(renderWidth){
loadingPanel.render(time);
}

scrollPanel.render(time);
skeletonPanel.render(time, 2 * Math.PI * mouseX / renderWidth);
namePanel.render(time);

Expand Down

0 comments on commit 50004ed

Please sign in to comment.