diff options
| -rw-r--r-- | studio-susie/public/assets/css/css.css | 10 | ||||
| -rw-r--r-- | studio-susie/public/assets/js/app.js | 19 | ||||
| -rw-r--r-- | studio-susie/public/assets/js/lib/view/PageView.js | 2 | ||||
| -rw-r--r-- | studio-susie/public/assets/js/lib/view/PaintingView.js | 4 | ||||
| -rw-r--r-- | studio-susie/public/assets/js/vendor/confetti.js | 2 | ||||
| -rw-r--r-- | studio-susie/templates/index.liquid | 9 |
6 files changed, 40 insertions, 6 deletions
diff --git a/studio-susie/public/assets/css/css.css b/studio-susie/public/assets/css/css.css index 7bcd2cc..73163be 100644 --- a/studio-susie/public/assets/css/css.css +++ b/studio-susie/public/assets/css/css.css @@ -38,6 +38,14 @@ h1, h2 { .mobile .section { background-size: contain; } +.plaque { + position: absolute; + bottom: 20px; + left: 20px; + color: white; +} +.desktop .plaque:hover { +} #nav { position: fixed; @@ -55,7 +63,7 @@ h1, h2 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; - background-color: rgba(255,255,255,0.9); + background-color: rgba(255,255,255,0.2); opacity: 0; color: black; transition: opacity 800ms; diff --git a/studio-susie/public/assets/js/app.js b/studio-susie/public/assets/js/app.js index 0f64ad2..3c2fd37 100644 --- a/studio-susie/public/assets/js/app.js +++ b/studio-susie/public/assets/js/app.js @@ -63,10 +63,21 @@ var app = (function() { } img.src = url }) - $('#fullpage').fullpage({ - css3: true, - scrollingSpeed: 1000 - }) + app.fullpage() + }) + } + + app.fullpage = function(){ + $('#fullpage').fullpage({ + css3: true, + scrollingSpeed: 800, + continuousVertical: false, + afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ +// app.views.painting.show_slide(index) + }, + onSlideLeave: function(anchorLink, index, slideIndex, direction, nextSlideIndex){ +// app.views.painting.hide_slide() + } }) } diff --git a/studio-susie/public/assets/js/lib/view/PageView.js b/studio-susie/public/assets/js/lib/view/PageView.js index d69328e..10f18d6 100644 --- a/studio-susie/public/assets/js/lib/view/PageView.js +++ b/studio-susie/public/assets/js/lib/view/PageView.js @@ -20,10 +20,12 @@ var PageView = View.extend({ this.render(this.data) document.body.className = "pageopen" MAKE_CONFETTI() + confetti_on = true }, hide: function(){ document.body.className = "" + confetti_on = false $(".visible").removeClass("visible") $("#nav a.active").removeClass('active') }, diff --git a/studio-susie/public/assets/js/lib/view/PaintingView.js b/studio-susie/public/assets/js/lib/view/PaintingView.js index 1fdc179..5c4f3bd 100644 --- a/studio-susie/public/assets/js/lib/view/PaintingView.js +++ b/studio-susie/public/assets/js/lib/view/PaintingView.js @@ -27,6 +27,10 @@ var PaintingView = View.extend({ }, load: function(id){ + var index = this.data.paintings.map(function(p){ return p.id }).indexOf(id) + if (index) { + $.fn.fullpage.moveTo(index+1) + } }, }) diff --git a/studio-susie/public/assets/js/vendor/confetti.js b/studio-susie/public/assets/js/vendor/confetti.js index d7eaeb2..3abb2e5 100644 --- a/studio-susie/public/assets/js/vendor/confetti.js +++ b/studio-susie/public/assets/js/vendor/confetti.js @@ -1,4 +1,5 @@ var made_confetti = false +var confetti_on = true function MAKE_CONFETTI() { if (made_confetti) return made_confetti = true @@ -108,6 +109,7 @@ function MAKE_CONFETTI() { confetti_step = function() { var c, j, len, results; requestAnimationFrame(confetti_step); + if (! confetti_on) return context.clearRect(0, 0, w, h); results = []; for (j = 0, len = confetti.length; j < len; j++) { diff --git a/studio-susie/templates/index.liquid b/studio-susie/templates/index.liquid index cdc1f15..c31c37f 100644 --- a/studio-susie/templates/index.liquid +++ b/studio-susie/templates/index.liquid @@ -105,10 +105,17 @@ <div id="fullpage"> {% for painting in paintings %} - <div class="section {% if painting.contain %}contain{% endif %}" data-image="{{ painting.image.uri }}"></div> + <div class="section {% if painting.contain %}contain{% endif %}" data-image="{{ painting.image.uri }}"> + {% unless painting.title contains "IMG" %} + <div class="plaque"> + <b>{{painting.title}}</b>{% if painting.date %}, {{painting.date}}.{% endif %} {{painting.description}} + </div> + {% endunless %} + </div> {% endfor %} </div> + <div id="rapper"> <div id="nav"> |
