.to("#start", {
y: 0,
}, .2)
+ .fromTo('#credits',{y:50}, {y: 0, duration: .5}, .3)
.from(title.words, {
opacity: 0, y: 20, duration: .2, stagger: 0.05
}, .5)
opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
amount: 0.2
}
- }, .7)
+ }, .7);
},
resize: function (ww, hh) {
.title-header
height: 80px
- +flex-config(space-between,false,row,center)
+ +flex-config(space-between, false, row, center)
margin-top: -24px
transform: translateY(-100%)
.header-question
text-align: center
+
*
opacity: 0
+
.abovetitle
+font-size(16)
+
.progress-container
margin: 6px 0 16px
- +flex-config(center,false,false,center)
+ +flex-config(center, false, false, center)
+
.progress-item
width: 16px
height: 4px
+opacity(.16)
display: inline-flex
transition: background-color .3s
+
&:not(:last-of-type)
margin-right: 7px
+
&.active
background-color: $texts-color
- &.ok,&.neutral
+
+ &.ok, &.neutral
background-color: $ok-color
+
&.nok
background-color: $nok-color
+
h1
height: auto
+font-size(24)
width: 100%
z-index: 2
+padding-container()
- +flex-config(space-between,false,row,center)
+ +flex-config(space-between, false, row, center)
+
.btn.primary
width: 100%
max-width: 450px
left: 50%
bottom: 24px
transform: translateX(-50%)
+
&#start
transform: translate(-50%, calc(100% + 24px))
.header-question
.abovetitle
+font-size(14)
+
.progress-container
margin: 4px 0 16px
+
h1
+font-size(20)
height: 84px
.footer
- +flex-config(center,false,row,center)
+ +flex-config(center, false, row, center)
.btn.primary
position: relative
left: 0
bottom: 0
transform: none
+
+
+#credits
+ font-size: 12px
+ position: absolute
+ bottom: 20px
+ right: 20px
+ color: $texts-color
+ opacity: 0.7
+ z-index: 100
+
+ a
+ text-decoration: none
+ color: inherit
+
@endforeach
@include('screens.outro', ['data'=> $data])
<div id="instantReviewAnimation"></div>
+ <div id="credits">{!! $data->credits !!}</div>
</div>
</div>
+
<script src="js/manifest.js"></script>
<script src="js/quiz.js"></script>
<script src="js/vendor.js"></script>