From 241c3bfe8e52db09d412fd40379121aa0f618917 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 29 Mar 2016 16:59:10 -0400 Subject: testing up and down animations --- public/assets/ok.css | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'public/assets') diff --git a/public/assets/ok.css b/public/assets/ok.css index f762d89..391a16a 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -48,6 +48,7 @@ body { position: absolute; top: 0; left: 0; + background:white; } h1 { @@ -368,22 +369,21 @@ nav b { .bottom { float: none; } -.bottom * { +.bottom *, .top { transform:translateY(0px); transition:150ms transform, 150ms opacity; transition-timing-function: cubic-bezier(0, 0, 0, 1); opacity:1; } -.showing .bottom > * { - transform:translateY(20px); - +.up .showing .bottom > *, .down .showing .top { + transform:translateY(40px); + opacity:0; } -.hiding .bottom > * { - transform:translateY(-20px); +.down .showing .bottom > *, .up .showing .top { + transform:translateY(-40px); opacity:0; - } /* Flickity */ @@ -563,9 +563,7 @@ ul li { } @media (min-width: 1300px) { - .bottom { - padding: 7px 0 8px 0; - } + .texts { font-size: 13px; line-height: 16px; -- cgit v1.2.3-70-g09d2 From 5bbafb5aba5dacc63323717036a97eeadb9ecfa6 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 29 Mar 2016 17:20:22 -0400 Subject: item --- public/assets/js/lib/ProjectView.js | 4 ++-- public/assets/ok.css | 18 +++++++----------- 2 files changed, 9 insertions(+), 13 deletions(-) (limited to 'public/assets') diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 1528f10..52ff128 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -12,8 +12,8 @@ var ProjectView = View.extend({ this.project_id = this.$el.data("id") this.page_number = opt.page_number console.log("INIT", this.project_id) - $("
").addClass("page-up").insertBefore( this.$(".flickity-viewport") ) - $("
").addClass("page-down").insertAfter( this.$(".flickity-viewport") ) + $("").addClass("page-up").insertBefore( this.$(".flickity-viewport") ) + $("").addClass("page-down").insertAfter( this.$(".flickity-viewport") ) }, show: function(){ diff --git a/public/assets/ok.css b/public/assets/ok.css index 391a16a..95f5f95 100644 --- a/public/assets/ok.css +++ b/public/assets/ok.css @@ -48,7 +48,6 @@ body { position: absolute; top: 0; left: 0; - background:white; } h1 { @@ -369,21 +368,18 @@ nav b { .bottom { float: none; } -.bottom *, .top { - transform:translateY(0px); - transition:150ms transform, 150ms opacity; - transition-timing-function: cubic-bezier(0, 0, 0, 1); - opacity:1; -} -.up .showing .bottom > *, .down .showing .top { - transform:translateY(40px); + +.up .showing.item { + transform:translateY(-10px); opacity:0; + background:white; } -.down .showing .bottom > *, .up .showing .top { - transform:translateY(-40px); +.down .showing.item { + transform:translateY(10px); opacity:0; + background:white; } /* Flickity */ -- cgit v1.2.3-70-g09d2 From b65a71fb6e34e8988eae5357a6d42ba5bb172539 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 29 Mar 2016 17:29:38 -0400 Subject: add active class --- public/assets/js/app.js | 10 +++++----- public/assets/js/lib/ProjectView.js | 3 ++- 2 files changed, 7 insertions(+), 6 deletions(-) (limited to 'public/assets') diff --git a/public/assets/js/app.js b/public/assets/js/app.js index bfd317b..c6d31ec 100644 --- a/public/assets/js/app.js +++ b/public/assets/js/app.js @@ -63,16 +63,16 @@ var app = (function() { } app.resize = function(){ - $(".cell, .next, .previous").css({ 'display': 'none' }) + $(".active .cell,.active .next,.active .previous").css({ 'display': 'none' }) $('body').addClass('resizing') debounce(function() { - $(".item").addClass("hidden") + $(".active.item").addClass("hidden") setTimeout(function(){ - $(".cell, .next, .previous").css({ 'height': ($(".top").height() + 'px'), 'display': 'inline-block' }) + $(".active .cell,.active .next,.active .previous").css({ 'height': ($(".active .top").height() + 'px'), 'display': 'inline-block' }) app.view.$el.removeClass("hidden") - $('.top').flickity('resize') + $('.active .top').flickity('resize') $('body').removeClass('resizing') - }, 20) + }, 400) }, 400) } diff --git a/public/assets/js/lib/ProjectView.js b/public/assets/js/lib/ProjectView.js index 52ff128..655d37e 100644 --- a/public/assets/js/lib/ProjectView.js +++ b/public/assets/js/lib/ProjectView.js @@ -22,7 +22,7 @@ var ProjectView = View.extend({ app.header.updateSlideCount( 1 ) $('body').removeClass('navopen') this.$el.removeClass("hidden") - + this.$el.addClass("active") if (this.project_id == "cover") { app.router.pushState("/") } @@ -39,6 +39,7 @@ var ProjectView = View.extend({ hide: function(){ addClassForPeriod( this.el, "hiding", app.navigation_delay, function(){ this.$el.addClass("hidden") + this.$el.removeClass("active") }.bind(this) ) }, -- cgit v1.2.3-70-g09d2