From 0524725613f06f27efc58f19b3f6c2458afa7543 Mon Sep 17 00:00:00 2001 From: “Ryder <“r@okfoc.us”> Date: Tue, 29 Mar 2016 16:46:23 -0400 Subject: k --- db.json | 20 +++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/db.json b/db.json index 6e8b5c4..aa9fa94 100644 --- a/db.json +++ b/db.json @@ -21,7 +21,7 @@ "uri": "http://nytimes.com/" } ], - "__index": "1", + "__index": 2, "dateCreated": "Sat, 26 Mar 2016 20:34:21 GMT", "client": "Annapurna Pictures", "containImage": "false", @@ -76,7 +76,7 @@ "uri": "https://ltho.s3.amazonaws.com/e12aee73-07a1-41f4-a54f-8b8c09f167f9.png", "caption": "" }, - "__index": 2, + "__index": 3, "dateCreated": "Mon, 28 Mar 2016 17:19:36 GMT", "iframe": "http://okfoc.us", "video": "" @@ -90,13 +90,18 @@ "NatureOfWork": "Web Development", "brief": "Internet Archaeology was the first major self initiated project by OKFocus creative director, Ryder Ripps. As a response to Yahoo pulling the plug on GeoCities. Internet Archaeology archived, presented and re-imagined early internet ephemera for a new audience. Preceding the revival of GIFs and late 90s aesthetic, Internet Archaeology fostered the net trends in art and fashion to come.", "media": [ + { + "uri": "https://ltho.s3.amazonaws.com/f1f86590-8925-4a58-963f-687f9783de05.png", + "caption": "", + "type": "image" + }, { "uri": "http://internetarchaeology.org/digging.gif", "caption": "", "type": "image" } ], - "containImage": "true", + "containImage": "false", "press": [ { "text": "Wired", @@ -107,8 +112,9 @@ "uri": "http://www.ibtimes.com/what-viralism-inquiry-cultures-battle-digital-space-214392" } ], - "__index": 4, - "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT" + "__index": "0", + "dateCreated": "Mon, 28 Mar 2016 23:25:29 GMT", + "alternateTitle": "" }, { "id": "dump-fm", @@ -139,7 +145,7 @@ "uri": "https://news.artnet.com/art-world/a-brief-history-of-animated-gif-art-part-two-78532" } ], - "__index": 3, + "__index": 4, "dateCreated": "Mon, 28 Mar 2016 23:27:45 GMT" }, { @@ -158,7 +164,7 @@ } ], "containImage": "false", - "__index": "0", + "__index": 1, "dateCreated": "Tue, 29 Mar 2016 15:45:57 GMT", "press": [ { -- cgit v1.2.3-70-g09d2 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(-) 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(-) 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(-) 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