From d370b1d98b2a3375cb6093d70fcbf791c867b46d Mon Sep 17 00:00:00 2001 From: Eric Bidelman Date: Sun, 8 Apr 2012 18:39:24 -0700 Subject: Segue slides animate on ever slide enter --- js/slides.js | 22 ++++- template.html | 12 ++- theme/css/default.css | 225 +++++++++++++++++++++++++++--------------------- theme/sass/default.scss | 43 +++++++-- 4 files changed, 196 insertions(+), 106 deletions(-) diff --git a/js/slides.js b/js/slides.js index dab51f9..e48924c 100644 --- a/js/slides.js +++ b/js/slides.js @@ -64,24 +64,42 @@ SlideDeck.prototype.addEventListeners_ = function() { false); window.addEventListener('popstate', this.handlePopState_.bind(this), false); - // Google Developer icon gray bar should reanimate on every slide enter. + // Google Developer icon gray bar and segue slide titles should reanimate on + // every slide enter. var gbars = document.querySelectorAll('slide > .gdbar'); for (var i = 0, gbar; gbar = gbars[i]; ++i) { var slide = gbar.parentElement; + slide.addEventListener('slideenter', function(e) { this.buildNextItem_(); + if (e.target.classList.contains('segue')) { + e.target.querySelector('hgroup').classList.add('on'); + } }.bind(this), false); + slide.addEventListener('slideleave', function(e) { var bar = e.target.querySelector('.gdbar'); bar.classList.remove('build-current'); bar.classList.add('to-build'); + if (e.target.classList.contains('segue')) { + e.target.querySelector('hgroup').classList.remove('on'); + } }, false); } + + // document.addEventListener('webkitTransitionEnd', function(e) { + // var el = e.target; + // var property = e.propertyName; + // if (el.classList.contains('gdbar') && property == 'background-size') { + // console.log('done'); + // el.parentElement.parentElement.querySelector('article hgroup').classList.add('on'); + // } + // }, false); }; /** * @private - * @param {Event} e + * @param {Event} e The pop event. */ SlideDeck.prototype.handlePopState_ = function(e) { if (e.state != null) { diff --git a/template.html b/template.html index 3ac5bf0..a69caae 100644 --- a/template.html +++ b/template.html @@ -148,10 +148,20 @@ function helloWorld(world) { + + +
+
+

Segue Slide

+

Subtitle Placeholder

+
+
+ +
-

<Thanks You!>

+

<Thanks You!>

Important contact information goes here.

diff --git a/theme/css/default.css b/theme/css/default.css index 714af1c..c2022de 100644 --- a/theme/css/default.css +++ b/theme/css/default.css @@ -387,19 +387,23 @@ slides > slide.far-next { transform: translate3d(2040px, 0, 0); } /* line 168, ../sass/default.scss */ +slides > slide.dark { + background: #515151; +} +/* line 172, ../sass/default.scss */ slides > slide hgroup + article { margin-top: 1.5em; } -/* line 172, ../sass/default.scss */ +/* line 176, ../sass/default.scss */ slides > slide > article { margin-top: 2em; } -/* line 175, ../sass/default.scss */ +/* line 179, ../sass/default.scss */ slides > slide > article p { margin-bottom: 1em; } -/* line 186, ../sass/default.scss */ +/* line 190, ../sass/default.scss */ slides.layout-widescreen > slide.far-past, slides.layout-faux-widescreen > slide.far-past { display: block; @@ -414,7 +418,7 @@ slides.layout-faux-widescreen > slide.far-past { -ms-transform: translate3d(-2260px, 0, 0); transform: translate3d(-2260px, 0, 0); } -/* line 192, ../sass/default.scss */ +/* line 196, ../sass/default.scss */ slides.layout-widescreen > slide.past, slides.layout-faux-widescreen > slide.past { display: block; @@ -429,7 +433,7 @@ slides.layout-faux-widescreen > slide.past { -ms-transform: translate3d(-1130px, 0, 0); transform: translate3d(-1130px, 0, 0); } -/* line 198, ../sass/default.scss */ +/* line 202, ../sass/default.scss */ slides.layout-widescreen > slide.current, slides.layout-faux-widescreen > slide.current { display: block; @@ -444,7 +448,7 @@ slides.layout-faux-widescreen > slide.current { -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); } -/* line 204, ../sass/default.scss */ +/* line 208, ../sass/default.scss */ slides.layout-widescreen > slide.next, slides.layout-faux-widescreen > slide.next { display: block; @@ -459,7 +463,7 @@ slides.layout-faux-widescreen > slide.next { -ms-transform: translate3d(1130px, 0, 0); transform: translate3d(1130px, 0, 0); } -/* line 210, ../sass/default.scss */ +/* line 214, ../sass/default.scss */ slides.layout-widescreen > slide.far-next, slides.layout-faux-widescreen > slide.far-next { display: block; @@ -475,30 +479,30 @@ slides.layout-faux-widescreen > slide.far-next { transform: translate3d(2260px, 0, 0); } -/* line 217, ../sass/default.scss */ +/* line 221, ../sass/default.scss */ b { font-weight: 600; } -/* line 221, ../sass/default.scss */ +/* line 225, ../sass/default.scss */ a { color: #0066cc; } -/* line 224, ../sass/default.scss */ +/* line 228, ../sass/default.scss */ a:visited { color: rgba(0, 102, 204, 0.75); } -/* line 228, ../sass/default.scss */ +/* line 232, ../sass/default.scss */ a:hover { color: black; } -/* line 233, ../sass/default.scss */ +/* line 237, ../sass/default.scss */ h1, h2, h3 { font-weight: 600; } -/* line 237, ../sass/default.scss */ +/* line 241, ../sass/default.scss */ h2 { font-size: 45px; line-height: 45px; @@ -506,7 +510,7 @@ h2 { color: #515151; } -/* line 244, ../sass/default.scss */ +/* line 248, ../sass/default.scss */ h3 { font-size: 30px; letter-spacing: -1px; @@ -515,38 +519,38 @@ h3 { color: #797979; } -/* line 252, ../sass/default.scss */ +/* line 256, ../sass/default.scss */ ul { margin-left: 1.2em; margin-bottom: 1em; } -/* line 256, ../sass/default.scss */ +/* line 260, ../sass/default.scss */ ul li { margin-bottom: 0.5em; } -/* line 259, ../sass/default.scss */ +/* line 263, ../sass/default.scss */ ul li ul { margin-left: 2em; margin-bottom: 0; } -/* line 263, ../sass/default.scss */ +/* line 267, ../sass/default.scss */ ul li ul li:before { content: '-'; font-weight: 600; } -/* line 270, ../sass/default.scss */ +/* line 274, ../sass/default.scss */ ul > li:before { content: '·'; margin-left: -1em; position: absolute; font-weight: 600; } -/* line 278, ../sass/default.scss */ +/* line 282, ../sass/default.scss */ ul ul { margin-top: .5em; } -/* line 283, ../sass/default.scss */ +/* line 287, ../sass/default.scss */ pre { font-family: 'Inconsolata', 'Courier New', monospace; font-size: 20px; @@ -564,7 +568,7 @@ pre { box-sizing: border-box; /*overflow: hidden;*/ } -/* line 297, ../sass/default.scss */ +/* line 301, ../sass/default.scss */ pre:after { content: attr(data-lang); background-color: #a9a9a9; @@ -577,14 +581,14 @@ pre:after { text-transform: uppercase; } -/* line 310, ../sass/default.scss */ +/* line 314, ../sass/default.scss */ code { font-size: 95%; font-family: 'Inconsolata', 'Courier New', monospace; color: black; } -/* line 316, ../sass/default.scss */ +/* line 320, ../sass/default.scss */ iframe { width: 100%; height: 620px; @@ -593,17 +597,17 @@ iframe { margin: -1px; } -/* line 324, ../sass/default.scss */ +/* line 328, ../sass/default.scss */ dt { font-weight: bold; } -/* line 328, ../sass/default.scss */ +/* line 332, ../sass/default.scss */ h3 + iframe { height: 540px; } -/* line 332, ../sass/default.scss */ +/* line 336, ../sass/default.scss */ button { display: inline-block; background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #f9f9f9), color-stop(70%, #e3e3e3)); @@ -632,12 +636,12 @@ button { font-size: 10pt; } -/* line 347, ../sass/default.scss */ +/* line 351, ../sass/default.scss */ button:hover { border-color: black; } -/* line 351, ../sass/default.scss */ +/* line 355, ../sass/default.scss */ button:active { background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(40%, #e3e3e3), color-stop(70%, #f9f9f9)); background: -webkit-linear-gradient(#e3e3e3 40%, #f9f9f9 70%); @@ -647,62 +651,62 @@ button:active { background: linear-gradient(#e3e3e3 40%, #f9f9f9 70%); } -/* line 355, ../sass/default.scss */ +/* line 359, ../sass/default.scss */ .blue { color: #0066cc; } -/* line 358, ../sass/default.scss */ +/* line 362, ../sass/default.scss */ .yellow { color: #ffd319; } -/* line 361, ../sass/default.scss */ +/* line 365, ../sass/default.scss */ .green { color: #008a35; } -/* line 364, ../sass/default.scss */ +/* line 368, ../sass/default.scss */ .red { color: red; } -/* line 367, ../sass/default.scss */ +/* line 371, ../sass/default.scss */ .black { color: black; } -/* line 370, ../sass/default.scss */ +/* line 374, ../sass/default.scss */ .white { color: white; } -/* line 373, ../sass/default.scss */ +/* line 377, ../sass/default.scss */ .dark { background-color: rgba(0, 0, 0, 0.2); color: white; } -/* line 378, ../sass/default.scss */ +/* line 382, ../sass/default.scss */ img.centered { margin: 0 auto; display: block; } -/* line 383, ../sass/default.scss */ +/* line 387, ../sass/default.scss */ table { width: 100%; border-collapse: collapse; margin-top: 40px; } -/* line 389, ../sass/default.scss */ +/* line 393, ../sass/default.scss */ th { font-weight: 600; text-align: left; } -/* line 395, ../sass/default.scss */ +/* line 399, ../sass/default.scss */ td, th { border: 1px solid #e0e0e0; @@ -710,7 +714,7 @@ th { vertical-align: top; } -/* line 401, ../sass/default.scss */ +/* line 405, ../sass/default.scss */ q { display: block; font-size: 60px; @@ -718,7 +722,7 @@ q { margin-left: 20px; margin-top: 100px; } -/* line 408, ../sass/default.scss */ +/* line 412, ../sass/default.scss */ q:before { content: '“'; position: absolute; @@ -729,7 +733,7 @@ q:before { font-size: 90px; color: silver; } -/* line 418, ../sass/default.scss */ +/* line 422, ../sass/default.scss */ q:after { content: '”'; position: absolute; @@ -738,19 +742,19 @@ q:after { color: silver; } -/* line 427, ../sass/default.scss */ +/* line 431, ../sass/default.scss */ div.author { text-align: right; font-size: 40px; margin-top: 20px; margin-right: 150px; } -/* line 434, ../sass/default.scss */ +/* line 438, ../sass/default.scss */ div.author:before { content: '—'; } -/* line 439, ../sass/default.scss */ +/* line 443, ../sass/default.scss */ slide.fill { -moz-border-radius: 5px; -webkit-border-radius: 5px; @@ -759,7 +763,7 @@ slide.fill { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 442, ../sass/default.scss */ +/* line 446, ../sass/default.scss */ slide.fill h3 { background: rgba(255, 255, 255, 0.75); padding-top: .2em; @@ -770,7 +774,7 @@ slide.fill h3 { margin-right: -60px; padding-right: 60px; } -/* line 453, ../sass/default.scss */ +/* line 457, ../sass/default.scss */ slide.fill h4 { display: inline; position: absolute; @@ -779,91 +783,91 @@ slide.fill h4 { } /* Size variants */ -/* line 464, ../sass/default.scss */ +/* line 468, ../sass/default.scss */ article.smaller p, article.smaller ul { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 469, ../sass/default.scss */ +/* line 473, ../sass/default.scss */ article.smaller table { font-size: 20px; line-height: 24px; letter-spacing: 0; } -/* line 474, ../sass/default.scss */ +/* line 478, ../sass/default.scss */ article.smaller pre { font-size: 15px; line-height: 20px; letter-spacing: 0; } -/* line 479, ../sass/default.scss */ +/* line 483, ../sass/default.scss */ article.smaller q { font-size: 40px; line-height: 48px; } -/* line 483, ../sass/default.scss */ +/* line 487, ../sass/default.scss */ article.smaller q:before, article.smaller q:after { font-size: 60px; } /* Builds */ -/* line 492, ../sass/default.scss */ +/* line 496, ../sass/default.scss */ .build > * { -moz-transition: opacity 0.5s ease-in-out 0.2s; -webkit-transition: opacity 0.5s ease-in-out 0.2s; -o-transition: opacity 0.5s ease-in-out 0.2s; transition: opacity 0.5s ease-in-out 0.2s; } -/* line 496, ../sass/default.scss */ +/* line 500, ../sass/default.scss */ .build .to-build { opacity: 0; } -/* line 500, ../sass/default.scss */ +/* line 504, ../sass/default.scss */ .build .build-fade { opacity: 0.5; } -/* line 503, ../sass/default.scss */ +/* line 507, ../sass/default.scss */ .build .build-fade:hover { opacity: 1.0; } /* Pretty print */ -/* line 512, ../sass/default.scss */ +/* line 516, ../sass/default.scss */ .prettyprint .str, .prettyprint .atv { /* a markup attribute value */ color: #009f5d; } -/* line 516, ../sass/default.scss */ +/* line 520, ../sass/default.scss */ .prettyprint .kwd, .prettyprint .tag { /* a markup tag name */ color: #0066cc; } -/* line 519, ../sass/default.scss */ +/* line 523, ../sass/default.scss */ .prettyprint .com { /* a comment */ color: #797979; font-style: italic; } -/* line 523, ../sass/default.scss */ +/* line 527, ../sass/default.scss */ .prettyprint .lit { /* a literal value */ color: #f6c000; } -/* line 528, ../sass/default.scss */ +/* line 532, ../sass/default.scss */ .prettyprint .pun, .prettyprint .opn, .prettyprint .clo { color: #515151; } -/* line 534, ../sass/default.scss */ +/* line 538, ../sass/default.scss */ .prettyprint .typ, .prettyprint .atn, .prettyprint .dec, @@ -872,18 +876,18 @@ article.smaller q:before, article.smaller q:after { color: #d94d3a; } -/* line 537, ../sass/default.scss */ +/* line 541, ../sass/default.scss */ .prettyprint .pln { color: #515151; } -/* line 541, ../sass/default.scss */ +/* line 545, ../sass/default.scss */ .with-notes .note { opacity: 1; pointer-events: auto; } -/* line 546, ../sass/default.scss */ +/* line 550, ../sass/default.scss */ .note { position: absolute; z-index: 100; @@ -922,7 +926,7 @@ article.smaller q:before, article.smaller q:after { -khtml-border-radius: 5px; border-radius: 5px; } -/* line 563, ../sass/default.scss */ +/* line 567, ../sass/default.scss */ .note > section { background: #fff; -moz-border-radius: 5px; @@ -939,17 +943,17 @@ article.smaller q:before, article.smaller q:after { padding: 2em; } -/* line 572, ../sass/default.scss */ +/* line 576, ../sass/default.scss */ input, button { vertical-align: middle; } -/* line 576, ../sass/default.scss */ +/* line 580, ../sass/default.scss */ .centered { text-align: center; } -/* line 580, ../sass/default.scss */ +/* line 584, ../sass/default.scss */ .reflect { -webkit-box-reflect: below 3px -webkit-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); -moz-box-reflect: below 3px -moz-linear-gradient(rgba(255, 255, 255, 0) 85%, white 150%); @@ -958,7 +962,7 @@ input, button { box-reflect: below 3px linear-gradient(rgba(255, 255, 255, 0) 85%, #ffffff 150%); } -/* line 588, ../sass/default.scss */ +/* line 592, ../sass/default.scss */ .flexbox { display: -webkit-box !important; display: -moz-box !important; @@ -967,7 +971,7 @@ input, button { display: box !important; } -/* line 592, ../sass/default.scss */ +/* line 596, ../sass/default.scss */ .flexbox.vcenter { -moz-box-orient: vertical; -webkit-box-orient: vertical; @@ -985,7 +989,7 @@ input, button { width: 100%; } -/* line 598, ../sass/default.scss */ +/* line 602, ../sass/default.scss */ .flexbox.vleft { -moz-box-orient: vertical; -webkit-box-orient: vertical; @@ -1004,31 +1008,51 @@ input, button { } /* ===== SLIDE CONTENT ===== */ -/* line 606, ../sass/default.scss */ -.logoslide.dark { - background: #515151; -} /* line 610, ../sass/default.scss */ .logoslide img { width: 383px; height: 92px; } -/* line 616, ../sass/default.scss */ +/* line 617, ../sass/default.scss */ +.segue h2 { + color: #e6e6e6; + font-size: 60px; +} +/* line 621, ../sass/default.scss */ +.segue h3 { + color: #e6e6e6; + line-height: 2.8; +} +/* line 625, ../sass/default.scss */ +.segue hgroup { + opacity: 0; + -moz-transition: opacity 0.6s ease-in 1s; + -webkit-transition: opacity 0.6s ease-in 1s; + -o-transition: opacity 0.6s ease-in 1s; + transition: opacity 0.6s ease-in 1s; +} +/* line 629, ../sass/default.scss */ +.segue hgroup.on { + opacity: 1; +} + +/* line 635, ../sass/default.scss */ .thank-you-slide { background: #4387fd; color: white; } -/* line 620, ../sass/default.scss */ -.thank-you-slide h1 { +/* line 639, ../sass/default.scss */ +.thank-you-slide h2 { font-size: 60px; + color: inherit; } -/* line 624, ../sass/default.scss */ +/* line 644, ../sass/default.scss */ .thank-you-slide section > p { margin-top: 2em; font-size: 20pt; } -/* line 629, ../sass/default.scss */ +/* line 649, ../sass/default.scss */ .thank-you-slide > p { position: absolute; bottom: 80px; @@ -1036,7 +1060,7 @@ input, button { line-height: 1.3; } -/* line 637, ../sass/default.scss */ +/* line 657, ../sass/default.scss */ aside.gdbar { height: 97px; width: 155px; @@ -1060,22 +1084,22 @@ aside.gdbar { -o-background-size: 100% 100%; background-size: 100% 100%; background-size: 100% 100%; - -moz-transition: all 0.5s ease-out 0.6s; - -webkit-transition: all 0.5s ease-out 0.6s; - -o-transition: all 0.5s ease-out 0.6s; - transition: all 0.5s ease-out 0.6s; + -moz-transition: all 0.5s ease-out 0.5s; + -webkit-transition: all 0.5s ease-out 0.5s; + -o-transition: all 0.5s ease-out 0.5s; + transition: all 0.5s ease-out 0.5s; /* Better to transition only on background-size, but not sure how to do that with the mixin. */ } -/* line 649, ../sass/default.scss */ +/* line 669, ../sass/default.scss */ aside.gdbar.to-build { background-size: 0 100%; } -/* line 653, ../sass/default.scss */ +/* line 673, ../sass/default.scss */ aside.gdbar.right { right: 0; left: -moz-initial; left: initial; - top: 254px; + top: 264px; /* 96 is height of gray icon bar */ -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); @@ -1083,7 +1107,7 @@ aside.gdbar.right { -ms-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 660, ../sass/default.scss */ +/* line 680, ../sass/default.scss */ aside.gdbar.right img { -moz-transform: rotateZ(180deg); -webkit-transform: rotateZ(180deg); @@ -1091,7 +1115,7 @@ aside.gdbar.right img { -ms-transform: rotateZ(180deg); transform: rotateZ(180deg); } -/* line 665, ../sass/default.scss */ +/* line 685, ../sass/default.scss */ aside.gdbar img { width: 85px; height: 85px; @@ -1100,28 +1124,37 @@ aside.gdbar img { margin: 8px 12px; } -/* line 675, ../sass/default.scss */ +/* line 696, ../sass/default.scss */ #title-slide hgroup { position: absolute; bottom: 150px; } -/* line 679, ../sass/default.scss */ +/* line 700, ../sass/default.scss */ #title-slide hgroup h1 { font-size: 65px; line-height: 1.4; letter-spacing: -3px; color: #515151; } -/* line 686, ../sass/default.scss */ +/* line 707, ../sass/default.scss */ #title-slide hgroup h2 { font-size: 34px; color: #a9a9a9; font-weight: inherit; } -/* line 692, ../sass/default.scss */ +/* line 713, ../sass/default.scss */ #title-slide hgroup p { font-size: 20px; color: #797979; line-height: 1.3; margin-top: 2em; } + +/* line 722, ../sass/default.scss */ +#title-slide, .thank-you-slide, .segue { + padding: 60px 120px; +} +/* line 725, ../sass/default.scss */ +#title-slide aside, .thank-you-slide aside, .segue aside { + width: 215px; +} diff --git a/theme/sass/default.scss b/theme/sass/default.scss index f1088ba..647671e 100644 --- a/theme/sass/default.scss +++ b/theme/sass/default.scss @@ -165,6 +165,10 @@ slides > slide { @include transform(translate3d($translateX * 2, 0, 0)); } + &.dark { + background: $gray-4; + } + hgroup + article { margin-top: 1.5em; } @@ -603,22 +607,38 @@ input, button { /* ===== SLIDE CONTENT ===== */ .logoslide { - &.dark { - background: $gray-4; - } - img { width: 383px; height: 92px; } } +.segue { + h2 { + color: $gray-1; + font-size: 60px; + } + h3 { + color: $gray-1; + line-height: 2.8; + } + hgroup { + opacity: 0; + @include transition(opacity 0.6s ease-in 1s); + + &.on { + opacity: 1; + } + } +} + .thank-you-slide { background: $brand-blue; color: white; - h1 { + h2 { font-size: 60px; + color: inherit; } section > p { @@ -644,7 +664,7 @@ aside.gdbar { @include background(linear-gradient(left, $gray-1, $gray-1) no-repeat); @include background-size(100% 100%); background-size: 100% 100%; - @include transition(all 0.5s ease-out 0.6s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */ + @include transition(all 0.5s ease-out 0.5s); /* Better to transition only on background-size, but not sure how to do that with the mixin. */ &.to-build { background-size: 0 100%; @@ -654,7 +674,7 @@ aside.gdbar { right: 0; left: -moz-initial; left: initial; - top: ($slide-height / 2) - 96; /* 96 is height of gray icon bar */ + top: ($slide-height / 2) - 96 + 10; /* 96 is height of gray icon bar */ @include transform(rotateZ(180deg)); img { @@ -672,6 +692,7 @@ aside.gdbar { } #title-slide { + hgroup { position: absolute; bottom: 150px; @@ -697,3 +718,11 @@ aside.gdbar { } } } + +#title-slide, .thank-you-slide, .segue { + padding: $slide-left-right-padding $slide-left-right-padding * 2; + + aside { + width: 215px; + } +} -- cgit v1.2.3