An error occurred while processing the template.
Expression video_staff is undefined on line 802, column 18 in 10157#10197#419869.
1<link href="/lsu-theme/images/preloader-fb.png" rel="prefetch" /> 2<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script> 3<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/css/swiper.min.css"></script> 4<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.0/js/swiper.min.js"></script> 5<script src="https://cdn.jsdelivr.net/g/mustache.js@2.2.1,lodash@4.12.0,babel@6.0.16"></script> 6<script src="http://athleticoffice.github.io/music-player-js/lib/aoMusicPlayer.min.js"></script> 7 8<style> 9 10#staff-profile.inactive { 11 visibility: hidden; 12 opacity: 0; 13} 14 15#staff-profile { 16 width: 100%; 17 height: 100vh; 18 background:#fdd023; 19 visibility: visible; 20 opacity: 1; 21 -webkit-transition: opacity 1s ease; 22 transition: opacity 1s ease; 23 -webkit-transition-delay: .1s; 24 transition-delay: .1s; 25 -webkit-transition: opacity 1s ease; 26 -webkit-transition-delay: opacity 1s ease; 27 } 28.swiper-container.staff-profile { 29 width: 100%; 30 height: 100vh; 31 } 32.staff-profile .swiper-slide { 33height: auto; 34min-height: auto; 35padding: 15vh 0; 36 position:relative; 37 color: #fff; 38 text-align: center; 39 display: -webkit-box; 40 display: -ms-flexbox; 41 display: -webkit-flex; 42 display: flex; 43 -webkit-box-pack: center; 44 -ms-flex-pack: center; 45 -webkit-justify-content: center; 46 justify-content: center; 47 -webkit-box-align: center; 48 -ms-flex-align: center; 49 -webkit-align-items: center; 50 align-items: center; 51 -webkit-flex-direction: column; 52 flex-direction: column; 53 } 54 55 .parallax-bg { 56 position: absolute; 57 left: 0; 58 top: 0; 59 width: 100%; 60 height: 103%; 61 -webkit-background-size: cover; 62 background-size: cover; 63 background-position: 50% 50%; 64 background-color: rgba(70,29,124,0.87); 65 background-position: 50% 25%; 66 67} 68.peveto .intro-text { 69font-size: 10vw; 70} 71.peveto #staff-name { 72word-spacing: -2vw; 73} 74#staff-profile .bg-overlay { 75background: rgba(17, 16, 16, 0.45); 76background: rgba(11, 15, 39, 0.52); 77} 78.portlet-asset-publisher .asset-full-content .asset-content br { 79display: none; 80} 81#staff-profile br { 82display: block; 83} 84 85#staff-profile hr { 86 content: " "; 87 height: 2px; 88 background-image: linear-gradient(to right,rgba(57, 41, 148, 0.75),rgba(110, 19, 204, 0.35),rgba(0,0,0,0)); 89 max-width: 150px; 90 margin-bottom: 15px; 91 margin-top: 5px; 92 display: block; 93 margin-left: auto; 94 margin-right: auto; 95 border: 0; 96 margin-left: 0; 97} 98.intro-text { 99 position: absolute; 100 width: 100%; 101 text-align: left; 102 font-size: 13vw; 103 bottom: 30%; 104 line-height: 1; 105 margin: 0; 106 font-family: "bebas-neue","Oswald",sans-serif; 107 font-weight: 400; 108 text-transform: uppercase; 109 color: #fdd023; 110 opacity: .9; 111 padding-left: 20px; 112 letter-spacing: .5vw; 113 z-index: 1; 114 mix-blend-mode: screenn; 115} 116html.ios { 117mix-blend-mode: unset; 118} 119.intro-text div { 120display: inline-block; 121} 122.intro-text span { 123 display: block; 124 font-size: 50%; 125 color: #fff; 126 font-weight: 300; 127 letter-spacing: 1vw; 128 line-height: .5; 129} 130.staff-profile .swiper-slide.bio { 131padding: 0; 132} 133ul.details { 134margin-bottom: 30px; 135} 136ul.details li > span { 137font-weight: 700; 138} 139#staff-profile dl { 140padding: 0 10px; 141} 142.aui dt { 143 position: relative; 144 color: #fdd023; 145 margin-top: 15px; 146} 147dt:before { 148 content: ""; 149 position: absolute; 150 height: calc(100% + 30px); 151 /* background: #fdd023; */ 152 top: calc(100% - 5px); 153 width: 2px; 154 right: calc(100% + 15px); 155 z-index: -1; 156 display: block; 157 border-right: 1px dotted #eee; 158 /* bottom: 0; */ 159 overflow: hidden; 160} 161dt:last-child:before { 162display: none; 163} 164dt:after { 165 content: ""; 166 position: absolute; 167 height: 10px; 168 background: #fdd023; 169 top: 50%; 170 width: 10px; 171 right: calc(100% + 10px); 172 z-index: -1; 173 display: block; 174 border-top: 1px dotted #fdd023; 175 border-radius: 50%; 176 transform: translate(-0%,-50%); 177} 178#staff-profile dd { 179 text-align: left; 180 font-family: 'Oswald',sans-serif; 181 text-transform: uppercase; 182 font-weight: 400; 183font-size: 14px; 184} 185#staff-profile dd.job-title { 186 187 text-transform: capitalize; 188 font-weight: 400; 189 font-family: inherit; 190 font-size: 75%; 191} 192ul.career-highlights, 193.aui .icons-ul.career-highlights { 194padding: 0; 195margin-left: 5px; 196} 197ul.career-highlights li { 198 position: relative; 199 margin-bottom: 15px; 200 font-size: 12px; 201} 202ul.career-highlights i, 203ul.career-highlights .lsu-icon { 204color: #fdd023; 205} 206ul.career-highlights li:first-letter { 207text-transform: uppercase; 208} 209 210.contact-info .box { 211margin-bottom: 45px; 212 213} 214.contact-info .lsu-icon:before { 215 font-size: 3em; 216 display: block; 217 color: #fdd023; 218} 219.contact-info .box > div { 220color: #fff; 221font-size: 12px; 222} 223.music-container .swiper-pagination.horiz { 224 bottom: 0!important; 225} 226 227.thomas .swiper-slide.music, 228.jenkins .swiper-slide.music, 229.johnson .swiper-slide.music, 230.canada .swiper-slide.music, 231.robinson .swiper-slide.music, 232.joseph .swiper-slide.music { 233display: none; 234} 235.staff-profile.thomas .swiper-slide.bio, 236.staff-profile.jenkins .swiper-slide.bio, 237.staff-profile.johnson .swiper-slide.bio, 238.canada .swiper-slide.bio, 239.robinson .swiper-slide.bio, 240.joseph .swiper-slide.bio { 241padding-bottom: 15vh; 242} 243 244@media(max-width:768px){ 245#controls-wrapper, 246#player .progress { 247display: none; 248} 249} 250 251 252@media(min-width:768px){ 253#staff-profile hr { 254 height: 3px; 255 max-width: 200px; 256 margin-bottom: 20px; 257 margin-top: 10px; 258} 259.intro-text span { 260 letter-spacing: 8px; 261} 262 263ul.career-highlights, 264.aui .icons-ul.career-highlights { 265margin: 0; 266padding: 0; 267} 268ul.career-highlights li { 269font-size: 16px; 270} 271#staff-profile dl { 272padding: 0 0; 273} 274#staff-profile dd { 275font-size: 20px; 276} 277#staff-profile dd.job-title { 278 font-size: 85%; 279} 280dt:before { 281 height: calc(100% + 40px); 282} 283.contact-info .lsu-icon:before { 284 font-size: 6em; 285 margin-bottom: 15px; 286} 287.contact-info .box > div { 288font-size: 20px; 289} 290 291.music h5 { 292 font-size: 24px; 293} 294} 295@media (min-width: 1200px) { 296.intro-text { 297padding-left: 100px; 298 font-size: 10vw; 299bottom: 10%; 300 line-height: .9; 301} 302.peveto .intro-text { 303font-size: 7vw; 304} 305.intro-text span { 306letter-spacing: 1vw; 307} 308.swiper-slide.tweet h5 { 309font-size: 64px; 310} 311.contact-info .lsu-icon:before { 312 font-size: 6em; 313} 314.contact-info .box > div { 315font-size: 20px; 316} 317.swiper-pagination.horiz { 318display: none; 319} 320} 321 322 323 324 325 326 327 328 329.spotify-logo { 330 position: absolute; 331 top: 0; 332 left: 0; 333 padding: 25px; 334 z-index: 2; 335 display: nonee; 336} 337 338.music-container { 339 height: auto!important; 340 width: 100%; 341 margin-right: auto; 342 margin-left: auto; 343} 344 345.music-container .swiper-slide { 346 text-align: center; 347 font-size: 18px; 348 background: none; 349 overflow: hidden; 350 color: #fff; 351 width: 90%; 352 height: 85vw; 353 min-height: auto; 354 /* Center slide text vertically */ 355 display: -webkit-box; 356 display: -ms-flexbox; 357 display: -webkit-flex; 358 display: flex; 359 -webkit-box-pack: center; 360 -ms-flex-pack: center; 361 -webkit-justify-content: center; 362 justify-content: center; 363 -webkit-box-align: center; 364 -ms-flex-align: center; 365 -webkit-align-items: center; 366 align-items: center; 367 background-size: cover; 368 -webkit-flex-direction: column; 369 flex-direction: column; 370 padding: 10px; 371} 372.music-container .slide-inner { 373position: relative; 374overflow: hidden; 375 height: 100%; 376 width: 100%; 377padding: 15px; 378 display: -webkit-box; 379 display: -ms-flexbox; 380 display: -webkit-flex; 381 display: flex; 382 -webkit-box-pack: center; 383 -ms-flex-pack: center; 384 -webkit-justify-content: center; 385 justify-content: center; 386 -webkit-box-align: center; 387 -ms-flex-align: center; 388 -webkit-align-items: center; 389 align-items: center; 390 background-size: cover; 391 -webkit-flex-direction: column; 392 flex-direction: column; 393 background-color: #000; 394} 395.bottom-stuff { 396 padding: 0px 0 50px 0; 397 background: #111; 398 z-index: 999; 399 bottom: 0; 400 left: 0; 401 right: 0; 402 width: 100%; 403 height: 33.333333vh; 404 text-align: center; 405} 406 407#controls-wrapper { 408position: relative; 409} 410 411#controls-wrapper .lsu-icon, 412.music-container .music-play-control { 413 color: #fdd023; 414 font-size: 1.5em; 415 vertical-align: middle; 416} 417 418#controls-wrapper .lsu-icon:before, 419.music-container .music-play-control:before { 420 vertical-align: middle; 421 border: 3px solid #fff; 422 background: rgba(0, 0, 0, 0.15); 423 padding: 15px; 424 border-radius: 50%; 425 display: inline-block; 426 margin-bottom: 25px; 427} 428 429 430.music-container .music-play-control { 431 font-size: 2em; 432 margin-left: 15px; 433 margin-right: 15px; 434} 435 436.music-container .music-play-control:before { 437 font-family: "lsu" !important; 438 font-style: normal !important; 439 font-weight: normal !important; 440 font-variant: normal !important; 441 text-transform: none !important; 442 speak: none; 443 line-height: 1; 444 -webkit-font-smoothing: antialiased; 445 -moz-osx-font-smoothing: grayscale; 446 content: "\2d"; 447 448} 449 450.music-container.playing .music-play-control:before { 451content: "\5c"; 452 font-family: "lsu" !important; 453 font-style: normal !important; 454 font-weight: normal !important; 455 font-variant: normal !important; 456 text-transform: none !important; 457 speak: none; 458 line-height: 1; 459 -webkit-font-smoothing: antialiased; 460 -moz-osx-font-smoothing: grayscale; 461} 462 463 464 465#player .progress { 466 margin-top: 0; 467 width: 35%; 468 border-radius: 0px; 469 height: 4px; 470 margin: auto; 471 position: absolute; 472 top: calc(100% - 204px); 473 z-index: 2; 474 /* left: 0; */ 475 /* width: 50%; */ 476 left: 50%; 477 -webkit-transform: translate(-50%,0%); 478 transform: translate(-50%,0%); 479 z-index: 999; 480 overflow: hidden; 481 background-color: rgba(0,0,0,0.4); 482 -webkit-box-shadow: none; 483 box-shadow: none; 484} 485 486 487 488#player .progress-bar { 489 float: left; 490 width: 0; 491 height: 100%; 492 font-size: 12px; 493 line-height: 20px; 494 color: #fff; 495 text-align: center; 496 background-color: #fdd023; 497 -webkit-box-shadow: none; 498 box-shadow: none; 499 -webkit-transition: width .6s ease; 500 -o-transition: width .6s ease; 501 transition: width .6s ease; 502} 503 504 505 506.music-progress-bar.reset { 507 width: 0%; 508 -webkit-transition: none; 509 transition: none; 510} 511 512.playlist-name { 513 514 z-index: 2; 515 text-transform: uppercase; 516 color: #fff; 517 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.75); 518 font-size: 120%; 519 font-family: 'Lato', sans-serif; 520 font-weight: 700; 521 letter-spacing: 6px; 522} 523 524 525.music-track { 526 padding: 0 10px; 527 font-size: 32px; 528 z-index: 2; 529 text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.55); 530 opacity: 0; 531 -webkit-transition: all .5s ease; 532 transition: all .5s ease; 533} 534.music-track-active .track-title { 535 display: block; 536 color: #fdd023; 537 -webkit-animation-duration: .75s; 538 animation-duration: .75s; 539 -webkit-animation-fill-mode: both; 540 animation-fill-mode: both; 541 -webkit-animation-iteration-count: infinite; 542 animation-iteration-count: infinite; 543 -webkit-animation-name: bounce; 544 animation-name: bounce; 545 -webkit-transform-origin: center bottom; 546 transform-origin: center bottom; 547} 548.music-container .swiper-slide-active .music-track { 549opacity: 1; 550} 551.music-track .track-title { 552 text-transform: uppercase; 553 text-transform: uppercase; 554 color: #fdd023; 555 line-height: 1; 556} 557 558.music-track .track-artist { 559 color: #fff; 560 font-size: 50%; 561 letter-spacing: 1px; 562 margin-top: 5px; 563 font-family: 'Lato', sans-serif; 564 font-weight: 700; 565 font-size: 35%; 566 line-height: 1; 567} 568 569.music-track .track-album { 570 font-family: 'Lato', sans-serif; 571 font-weight: 300; 572 font-size: 30%; 573color: #eee; 574} 575.music-track .track-album span { 576 font-weight: 700; 577} 578.music-container .swiper-slide .bg-image { 579 position: absolute; 580 top: 0; 581 left: 0; 582 height: 100%; 583 width: 100%; 584 background-size: cover; 585 background-position: 50% 50%; 586 -webkit-transition: all .5s ease; 587 transition: all .5s ease; 588 z-index: 0; 589} 590.music-container .swiper-slide-active .bg-image { 591 opacity: .65; 592} 593 594.music-track-active .artist-small-image { 595 display: block; 596} 597.animated { 598 -webkit-animation-duration: 1s; 599 animation-duration: 1s; 600 -webkit-animation-fill-mode: both; 601 animation-fill-mode: both; 602} 603 604.animated.infinite { 605 -webkit-animation-iteration-count: infinite; 606 animation-iteration-count: infinite; 607} 608@-webkit-keyframes bounce { 609 from, 20%, 53%, 80%, to { 610 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 611 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 612 -webkit-transform: translate3d(0,0,0); 613 transform: translate3d(0,0,0); 614 } 615 616 40%, 43% { 617 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 618 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 619 -webkit-transform: translate3d(0, -30px, 0); 620 transform: translate3d(0, -30px, 0); 621 } 622 623 70% { 624 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 625 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 626 -webkit-transform: translate3d(0, -15px, 0); 627 transform: translate3d(0, -15px, 0); 628 } 629 630 90% { 631 -webkit-transform: translate3d(0,-4px,0); 632 transform: translate3d(0,-4px,0); 633 } 634} 635 636@keyframes bounce { 637 from, 20%, 53%, 80%, to { 638 -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 639 animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); 640 -webkit-transform: translate3d(0,0,0); 641 transform: translate3d(0,0,0); 642 } 643 644 40%, 43% { 645 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 646 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 647 -webkit-transform: translate3d(0, -30px, 0); 648 transform: translate3d(0, -30px, 0); 649 } 650 651 70% { 652 -webkit-animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 653 animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060); 654 -webkit-transform: translate3d(0, -15px, 0); 655 transform: translate3d(0, -15px, 0); 656 } 657 658 90% { 659 -webkit-transform: translate3d(0,-4px,0); 660 transform: translate3d(0,-4px,0); 661 } 662} 663 664.bounce { 665 -webkit-animation-name: bounce; 666 animation-name: bounce; 667 -webkit-transform-origin: center bottom; 668 transform-origin: center bottom; 669} 670 671@media(min-width:768px) { 672.music-container { 673 width: 750px; 674} 675.music-container .swiper-slide { 676width: 33.333333%; 677 height: calc(700px / 3); 678 } 679 #player .progress { 680 top: calc(970px / 3); 681 width: 33.333333%; 682 width: calc(33.333333% - 30px); 683 left: calc(50% + 15px); 684 } 685} 686@media(min-width:992px) { 687.music-container { 688 width: 970px; 689} 690.music-container .swiper-slide { 691width: 33.333333%; 692 height: calc(1000px / 3); 693 } 694 #player .progress { 695 top: calc(970px / 3); 696 width: 33.333333%; 697 width: calc(33.333333% - 30px); 698 left: 50%; 699 } 700 701 #controls-wrapper .ao-icon { 702 font-size: 2em; 703 } 704 .music-container .music-play-control { 705 font-size: 4em; 706 margin-left: 25px; 707 margin-right: 25px; 708} 709 710 #controls-wrapper .ao-icon:before, .music-container .music-play-control:before { 711 vertical-align: middle; 712 padding: 20px; 713} 714 .music-track { 715 padding: 0 20px; 716 font-size: 56px; 717} 718} 719@media(min-width:1200px) { 720.music-container { 721 width: 1170px; 722} 723} 724 725 726</style> 727 728 729 730 <div id="team-loader"> 731 <div class="pulse-loader"></div> 732 <div class="football-loader"></div> 733</div> 734 735<section class="section inactive" id="staff-profile"> 736 737 738 <div class="swiper-container staff-profile ${last_name.getData()?lower_case}"> 739 740 <div class="parallax-bg" style="background-image:url(${image_bg.getData()});" data-swiper-parallax="-3%"></div> 741 <div class="bg-overlay" style="z-index: 0;"></div> 742 743 <div class="intro-text" data-swiper-parallax="-2000%"> 744 <div class="font-lsu" id="staff-name">${first_name.getData()}<br>${last_name.getData()}</div> 745 746 <span>${job_title.getData()}</span> 747 </div> 748 749 <div class="swiper-wrapper"> 750 751 752 <div class="swiper-slide intro" style="min-height: 100vh!important;padding: 0;background: none;"> 753 754</div> 755 756 757 758 <div class="swiper-slide bio"> 759 <div class="container"> 760 761 <div class="row row-flex"> 762 763<div class="col-sm-7 text-left"> 764<h3 class="text-secondary">Career</h3> 765<hr> 766 767<ul class="icons-ul career-highlights"> 768 <#if highlights.getSiblings()?has_content> 769 <#list highlights.getSiblings() as cur_highlights> 770 771 <li><i class="icon-li icon-angle-right"></i> ${cur_highlights.getData()}</li> 772 773 </#list> 774</#if> 775 776</ul> 777 778<h3 class="text-secondary">Personal</h3> 779<hr> 780 781<ul class="icons-ul career-highlights"> 782 783 784<#if personal.getSiblings()?has_content> 785 <#list personal.getSiblings() as cur_personal> 786 <li><i class="icon-li icon-angle-right"></i> ${cur_personal.getData()}</li> 787 </#list> 788</#if> 789</ul> 790 791 792</div> 793 <div class="col-sm-4 col-sm-offset-1 text-left"> 794<h3 class="text-secondary text-left">Experience</h3> 795<hr> 796 ${timeline.getData()} 797</div> 798 </div> 799 </div> 800 </div> 801 802 <#if video_staff.getSiblings()?trim?has_content> 803 <#list video_staff.getSiblings() as cur_video_staff> 804 <div class="swiper-slide video" id="staff-videos" style="padding: 15vh 0;"> 805 <div class="container"> 806<h1 class="font-alt text-uppercase text-secondary">Inside Look: Coach ${last_name.getData()} Mic'd Up</h1> 807 <a class="btn btn-white" social-id="${cur_video_staff.getData()}" trigger vimeo overlay><span class="lsu-icon lsu-play-2 color-secondary"></span> Play Video</a> 808 </div> 809 </div> 810 </#list> 811</#if> 812 813 814 <div class="swiper-slide music" style="min-height: 100vh!important;padding: 0;"> 815 <h5 class="text-secondary">${last_name.getData()}'s Gameday Mix</h5> 816 <hr style="margin-left: auto;"> 817 <div class="swiper-container music-container" id="player"> 818 819 <div class="progress"> 820 <div class="progress-bar music-progress-bar reset" role="progressbar" id="bar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"> 821 <span class="sr-only">60% Complete</span> 822 </div> 823 </div> 824 825 <!-- wrapper template applied by javascript --> 826 <div class="swiper-wrapper music-wrapper" id="tracks"></div> 827 828 <div class="swiper-pagination custom horiz"></div> 829<div id="controls-wrapper"> 830 <span id="prev" class="music-prev-control lsu-icon lsu-backward"> </span> 831 <span id="play" class="music-play-control"> </span> 832 <span id="next" class="lsu-icon lsu-forward music-next-control"> </span> 833 834 835 </div> 836 </div> 837 838 839 </div> 840 841 842 843 844 845 846 <div class="swiper-slide contact-info" style="padding-top: 0;padding-bottom: 30vh;"> 847 <div class="container"> 848 849 850 <div class="row"> 851 852 <div class="col-xs-6 col-lg-4 col-lg-offset-2"> 853 <a href="https://twitter.com/intent/follow?screen_name=${twitter.getData()}"> 854 <div class="box"> 855 <span class="lsu-icon lsu-twitter"></span> 856 <div>${twitter.getData()}</div> 857 </div> 858 </a> 859 </div> 860 861 862 <div class="col-xs-6 col-lg-4"> 863 <a href="mailto:football@lsu.edu?subject=To%20Coach%20${last_name.getData()}&body=Coach%20${last_name.getData()}%2C"> 864 <div class="box"> 865 <span class="lsu-icon lsu-email"></span> 866 <div>football@lsu.edu</div> 867 </div> 868 </a> 869 </div> 870 871 </div> 872 873 <div class="row"> 874 <div class="col-xs-6 col-lg-4 col-lg-offset-2"> 875 876 <div class="box"> 877 <span class="lsu-icon lsu-phone"></span> 878 <div>225-578-1151</div> 879 </div> 880 881 </div> 882 883 <div class="col-xs-6 col-lg-4"> 884 <a href="/-/recruiting-map"> 885 <div class="box"> 886 <span class="lsu-icon lsu-map"></span> 887 <div>Recruiting Areas</div> 888 </div> 889 </a> 890 </div> 891 892 </div> 893 </div> 894 </div> 895 896 897</div> 898</div> 899</section> 900 901 902 903 <script> 904 var swiper; 905 906 var teamloader = document.querySelector('#team-loader'); 907 908 var quote = document.getElementById('staff-name'); 909 quote.style.visibility = 'visible'; 910 var ST = new SplitText("#staff-name", {type:"words,chars", wordsClass: "line++"}), chars=ST.chars , l=ST.chars.length; 911 tl = new TimelineMax({delay:.5}), 912 913 914 915 tl.staggerFrom(chars,1,{y:100,opacity:0,cycle:{delay:function(i){return Math.abs(Math.floor(l/2)-i)*0.1}},ease:Back.easeOut, transform: "translateX( -100% ) rotateY( -180deg )"}); 916 917 918 tl.from(".intro-text span", 1.5, {opacity: 0, y:50},'-=1.5'); 919 920 921 922 imagesLoaded(document.querySelectorAll('.preload'), { 923 background: true 924 }, function () { 925 926 document.querySelector('#staff-profile').classList.remove('inactive'); 927 928 929 930 swiper = new Swiper('.staff-profile', { 931 paginationClickable: true, 932 // paginationType: 'progress', 933 nextButton:'.start-btn', 934 direction: 'vertical', 935 mousewheelControl: true, 936 keyboardControl: true, 937 parallax: true, 938 speed: 900, 939 preventClicks: false, 940 preventClicksPropagation: false, 941 slidesPerView: 'auto', 942 freeModeMomentum: true, 943 freeModeMomentumBounce: false, 944 freeMode: true, 945 centeredSlides: false, 946 onInit: function (swiper) { 947 setTimeout(function () { 948 teamloader.parentNode.removeChild(teamloader); 949 }, 2000); 950 }, 951 }); 952 953 tl.play(); 954 }); 955 956 957 958 959 960 var tpl = "<div class='swiper-slide'>" + 961 '<div class="slide-inner">' + 962 '<div class="bg-image" style="background-image:url({{imageUrl}})"></div>' + 963 '<div class="music-track" data-track="{{id}}" style="width:100%;">' + 964 '<div class="track-title font-alt">{{name}}</div>' + 965 '<div class="track-artist">{{artist}}</div>' + 966 '</div>' + 967 '</div>' + 968 '</div>' 969 970 aoMusicPlayer.setTpl(tpl); 971 var musicPlayer; 972 973 // var player; 974 var swiperMusic = new Swiper('.music-container', { 975 pagination: '.swiper-pagination.horiz', 976 paginationClickable: true, 977 spaceBetween: 0, 978 slideToClickedSlide: true, 979 preventClicks: false, 980 preventClicksPropagation: false, 981 slidesPerView: 3, 982 centeredSlides: true, 983 loop: true, 984 parallax: true, 985 initialSlide: 3, 986 autoplay: 3000, 987 //loop: true, 988 //loopedSlides: 6, 989 //loopAdditionalSlides: 6, 990 nextButton: '.music-next-control', 991 prevButton: '.music-prev-control', 992 993 breakpoints: { 994 // when window width is <= 640px 995 767: { 996 slidesPerView: 1, 997 } 998 } 999 1000 }); 1001 1002 1003 1004 1005 // .create([music-container],[remote URL or data object],[returns player if successful]); 1006 aoMusicPlayer.create('.music-container', 'http://athleticoffice.github.io/music-player-js/example/data/${last_name.getData()?lower_case}-playlist.json', function(player) { 1007 1008 swiperMusic.update(); 1009 musicPlayer = player; 1010 musicPlayer.on('trackchange', function(currentTrack, trackId) { 1011 var idx = currentTrack; 1012 swiperMusic.slideTo(idx); 1013 }); 1014 }); 1015 1016 1017 1018 1019 </script>