animate: function () {
//animer le texte d'intro
let title = new SplitType("#welcome h2", {types: 'words, chars'})
- let text = new SplitType("#welcome p", {types: 'words, chars'})
gsap.timeline({delay: .4})
.to(".active-screen .title-header", {
y: 0
.from(title.words, {
opacity: 0, y: 20, duration: .2, stagger: 0.05
}, .5)
- .to(text.words, {
- opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
- amount: 0.2
- }
- }, .7);
+ .fromTo("#welcome .markdown", {opacity: 0, y: 20}, {opacity: 1, y: 0, duration: .5})
+ // .to(text.words, {
+ // opacity: 1, y: 0, duration: .8, ease: "power4.easeInOut", stagger: {
+ // amount: 0.2
+ // }
+ // }, .7);
+
},
resize: function (ww, hh) {
- let intro_text_mobile = this.quiz.data.intro_text_mobile || this.quiz.data.intro_text;
- let intro_text = this.quiz.data.intro_text;
- if (this.quiz.resize.isMobile()) {
- $("#welcome p").html(this.quiz.utils.nl2br(intro_text_mobile))
- } else {
- $("#welcome p").html(this.quiz.utils.nl2br(intro_text))
- }
this.animate();
},
#welcome
top: 225px
+
h2
font-size: 40px
text-align: center
+font-size(20)
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
- p
+ .markdown
+font-size(16)
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%)
- white-space: pre-wrap
- .word
- opacity: 0
- transform: translateY(100px)
+ strong
+ font-weight: bold
+
+ em
+ font-style: italic
+
+ a
+ text-decoration: underline
+ color: $texts-color
+
+ li
+ +font-size(16)
+ margin: 0.5em 0
+ list-style: disc inside
.m
#welcome
@include('header_title', ['data'=> $headerData])
<div class="screen vertical-center-screen" id="welcome">
<h2>{{$data->intro_title?:$__('Welcome')}}</h2>
- <p>{{$data->intro_text}}</p>
+ <div class="markdown only-desktop">{!! $markdownToHTML($data->intro_text) !!}</div>
+ <div class="markdown only-mobile">{!! $markdownToHTML($data->intro_text_mobile?:$data->intro_text) !!}</div>
</div>
<footer class="footer">
<a id="start" aria-keyshortcuts="Space" class="btn primary">