Profidev

Разное

One-page two navs

Май 20, 2023 #gsap, #jquery, #menu, #tweenMax 
<body class="is-loading">

    <div id="preloader">
        <div class="txt">
            <p class="txt-perc">0%</p>
            <div class="progress"><span></span></div>
        </div>
    </div>

    <div id="intro" class="header-container fs">
        <div class="bcg"></div>
        <header class="wrapper">
            <h1 class="title">Unleash Your Potentional!</h1>
            <p>Learn GreenSock and ScrollMagic and create something amazing!</p>
        </header>
        <span class="scroll-hint">Scroll Down</span>
    </div>


    <nav>
        <ul class="horizontal-nav">
            <li><a href="#intro"><span class="nav-horizontal"></span>Intro</a></li>
            <li><a href="#slide01"><span class="nav-horizontal"></span>Images</a></li>
            <li><a href="#slide02"><span class="nav-horizontal"></span>Position and Timing</a></li>
            <li><a href="#slide03"><span class="nav-horizontal"></span>Скачать</a></li>
        </ul>
    </nav>

  

    <div id="nav-dots">
        <ul>
            <li><a href="#intro"><span class="nav-dot"></span><span class="nav-label">Intro</span></a></li>
            <li><a href="#slide01"><span class="nav-dot"></span><span class="nav-label">Images</span></a></li>
            <li><a href="#slide02"><span class="nav-dot"></span><span class="nav-label">Position and Timing</span></a></li>
            <li><a href="#slide03"><span class="nav-dot"></span><span class="nav-label">Скачать</span></a></li>
        </ul>
    </div>


    <div id="main" class="main-container">

        <article id="cb01" class="content-block">
            <div class="wrapper">
                <header class="slideInUp">
                    <h1>SIMPLIFY</h1>
                </header>
                <section>
                    <p class="slideInUp slideInUp2">Simplify your content to a MINIMUM.</p>
                </section>
            </div> <!-- .wrapper -->
        </article>
        
        <article id="slide01" class="slide fs">
            <div class="bcg"></div>
            <div class="wrapper">
                <header class="slideInUp">
                    <h1>A picture is worth a thousand words</h1>
                </header>
                <section>
                    <p class="slideInUp slideInUp2">Let the images do the talking and use text for short summaries.</p>
                </section>
            </div> <!-- .wrapper -->
        </article>

        <article id="cb02" class="content-block">
            <div class="wrapper">
                <header class="slideInUp">
                    <h1>FOCUS</h1>
                </header>
                <section>
                    <p class="slideInUp slideInUp2">Focus on the most IMPORTANT thing. The one thing!</p>
                </section>
            </div> <!-- .wrapper -->
        </article>

        <article id="slide02" class="slide fs">
            <div class="bcg"></div>
            <div class="wrapper">
                <header class="slideInUp">
                    <h1>Position and Timing</h1>
                </header>
                <section>
                    <p class="slideInUp slideInUp2">Position elements based on the background image and trigger animation at the right time.</p>
                    <p class="slideInUp slideInUp3">Use different triggerElements in combination with offsets to be in full control.</p>
                </section>
            </div> <!-- .wrapper -->
        </article>

        <article id="cb03" class="content-block">
            <div class="wrapper">
                <header class="slideInUp">
                    <h1>ASK</h1>
                </header>
                <section>
                    <p class="slideInUp slideInUp2">You don't ask, you don't get. Always end with CALL TO ACTION.</p>
                </section>
            </div> <!-- .wrapper -->
        </article>

        <article id="slide03" class="slide fs">
            <div class="bcg"></div>
            <div class="wrapper">
            
                <section>
                    <p class="slideInUp slideInUp2">You don't ask, you don't get. Always end with CALL TO ACTION.</p>
                    <div class="slideInUp slideInUp3">
                        <a href="#" class="button">PUSH</a>
                    </div>

                </section>
            </div> <!-- .wrapper -->
        </article>

    </div> <!-- #main-container -->


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="js/vendor/jquery-1.11.2.min.js"><\/script>')</script>

</body>

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/TweenMax.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.2.0/imagesloaded.pkgd.min.js"></script>
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.2/plugins/ScrollToPlugin.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>
<script src="https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/js/vendor/modernizr-2.8.3-respond-1.4.2.min.js"></script>

.clear:before,
.clear:after {
  content: ' ';
  display: table;
}

.clear {
  *zoom: 1;
}

.clear:after {
  clear: both;
}


/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
#nav-dots,
section,
summary {
  display: block;
}

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline;
}

audio:not([controls]) {
  display: none;
  height: 0;
}

[hidden],
template {
  display: none;
}

a {
  background-color: transparent;
}

a:active,
a:hover {
  outline: 0;
}

abbr[title] {
  border-bottom: 1px dotted;
}

b,
strong {
  font-weight: 700;
}

dfn {
  font-style: italic;
}

h1 {
  font-size: 2em;
  margin: .67em 0;
}

mark {
  background: #ff0;
  color: #000;
}

small {
  font-size: 80%;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -.5em;
}

sub {
  bottom: -.25em;
}

img {
  border: 0;
}

svg:not(:root) {
  overflow: hidden;
}

figure {
  margin: 1em 40px;
}

hr {
  box-sizing: content-box;
  height: 0;
}

pre {
  overflow: auto;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0;
}

button {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button;
  cursor: pointer;
}

button[disabled],
html input[disabled] {
  cursor: default;
}

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

input {
  line-height: normal;
}

input[type=checkbox],
input[type=radio] {
  box-sizing: border-box;
  padding: 0;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  height: auto;
}

input[type=search] {
  -webkit-appearance: textfield;
  box-sizing: content-box;
}

input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

fieldset {
  border: 1px solid silver;
  margin: 0 2px;
  padding: .35em .625em .75em;
}

legend {
  border: 0;
  padding: 0;
}

textarea {
  overflow: auto;
}

optgroup {
  font-weight: 700;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}


/*! HTML5 Boilerplate v5.0 | MIT License | http://h5bp.com/ */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

textarea {
  resize: vertical;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}


/* ===== Initializr Styles ==================================================
   Author: Jonathan Verrecchia - verekia.com/initializr/responsive-template
   ========================================================================== */

body {
  font: 16px/1.5 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif;
  background-color: #212121;
}

.wrapper {
  width: 80%;
  margin: 0 10%;
}


/* Make the body 100% of the browser viewport height */

html,
body {
  height: 100%;
  margin: 0;
}

h1 {
  font-size: 2em;
  margin-top: 0;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  font-weight: 700;
}


/* ==========================================================================
   Author's custom styles
   ========================================================================== */


/* =Preloader */

#preloader {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 101;
  background-color: #212121;
  color: #ffffff;
}

#preloader .txt {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#preloader .txt-perc {
  font-size: 35px;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  opacity: 1;
  margin: 0 0 6px 0;
  max-width: 400px;
  text-align: center;
}

#preloader .progress {
  width: 100px;
  height: 3px;
  background-color: rgba(255, 255, 255, 0.2);
  margin: 0 auto 15px auto;
}

#preloader .progress span {
  display: block;
  width: 0;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.8);
}

#preloader.is-hidden {
  visibility: hidden;
  opacity: 0;
}

.is-loading {
  overflow: hidden;
}


/* =Header */

.header-container {
  text-align: center;
  color: #ffffff;
}

.header-container .wrapper {
  padding-top: 120px;
  z-index: 2;
  position: relative;
}

.header-container .bcg {
  -webkit-transition: -webkit-transform 4s ease-out;
  transition: transform 4s ease-out;
  -webkit-transform: scale(1.05);
  -ms-transform: scale(1.05);
  transform: scale(1.05);
  -webkit-transform-origin: top center;
  -ms-transform-origin: top center;
  transform-origin: top center;
}

.header-container.is-loaded .bcg {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.bcg {
  background: no-repeat center center;
  background-size: cover;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0.5;
}

.header-container .bcg {
  background-image: url(https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/img/img_mountains01.jpg);
  background-size: cover;
}

#slide01 .bcg {
  background: url(https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/img/img_mountains02.jpg) no-repeat center center;
  background-size: cover;
}

#slide02 .bcg {
  background: url(https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/img/img_mountains03.jpg) no-repeat center center;
  background-size: cover;
}

#slide03 .bcg {
  background: url(https://ihatetomatoes.net/demos/scrollmagic-templates/scrollmagic-template-04/img/img_mountains04.jpg) no-repeat center center;
  background-size: cover;
  opacity: 0.7;
}


/* =Navigation */
ul.horizontal-nav {
  position: fixed;
  left: 0;
  top: 5%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: center;
  z-index: 100;
}

.horizontal-nav a {
  display: block;
  line-height: 25px;
  position: relative;
  padding-right: 20px;
  color: #ffffff;
  text-decoration: none;
}

.horizontal-nav a:hover {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

.horizontal-nav .nav-horizontal {
  display: block;
  width: auto;
  height: 10px;
  position: absolute;
  right: 0;
  top: 50%;
}


.horizontal-nav ul {
  margin: 0;
  padding: 0;
}

.horizontal-nav li {
  width: auto;
  list-style: none;
  display: inline-block;
}



/* =Navigation Dots */
#nav-dots {
  display: none;
  position: fixed;
  right: 30px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  text-align: right;
  z-index: 100;
}

#nav-dots a {
  display: block;
  line-height: 25px;
  position: relative;
  padding-right: 20px;
  color: #ffffff;
  text-decoration: none;
}

#nav-dots a:hover .nav-label {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

#nav-dots .nav-dot {
  display: block;
  width: 10px;
  height: 10px;
  position: absolute;
  right: 0;
  top: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 100%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

#nav-dots .nav-label {
  display: block;
  opacity: 0.5;
  visibility: hidden;
  -webkit-transform: translateX(-10px);
  -ms-transform: translateX(-10px);
  transform: translateX(-10px);
  -webkit-transition: all 0.2s cubic-bezier(.17, .67, .83, .67);
  transition: all 0.2s cubic-bezier(.17, .67, .83, .67);
}

#nav-dots.is-dark a {
  color: #212121;
}

#nav-dots.is-dark .nav-dot {
  background-color: rgba(0, 0, 0, 0.5);
}

#nav-dots.is-light a {
  color: #ffffff;
}

#nav-dots.is-light .nav-dot {
  background-color: rgba(255, 255, 255, 0.5);
}

#nav-dots ul {
  margin: 0;
  padding: 0;
}

#nav-dots li {
  width: auto;
  list-style: none;
}

.scroll-hint {
  color: #212121;
  position: absolute;
  bottom: 30px;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  padding: 10px 40px;
  border: 3px #ffffff solid;
  font-size: 13px;
  font-weight: bold;
  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;
  background-color: rgba(255, 255, 255, 0.9);
  z-index: 2;
}


/* =Main */

p {
  font-size: 16px;
}

.fs {
  height: 100vh;
}

.slide {
  color: #ffffff;
  position: relative;
}

.slide .wrapper {
  padding-top: 30px;
  text-align: center;
  position: relative;
  z-index: 2;
}

.slide#slide01 .wrapper {
  position: absolute;
  top: 10%;
}

.slide#slide02 .wrapper {
  position: absolute;
  bottom: 10%;
}

.slide#slide03 .button {
  border-color: #ffffff;
  color: #212121;
  background-color: rgba(255, 255, 255, 0.9);
}

.slide#slide03 .button:hover {
  border-color: #212121;
  background-color: #212121;
  color: #ffffff;
}

.slide#slide03 .wrapper {
  padding-top: 100px;
}

.slide#slide04 {
  background-color: #be4c2c;
}

.button {
  text-decoration: none;
  color: #ffffff;
  border: 1px rgba(255, 255, 255, 0.7) solid;
  padding: 8px 15px;
  margin-top: 15px;
  display: inline-block;
  position: relative;
}

.button:hover {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #000000;
}


/* =Content Block */

.content-block {
  background-color: #212121;
  color: rgba(255, 255, 255, 0.9);
}

.content-block .wrapper {
  padding: 30px 0;
  text-align: center;
}

.no-touch .content-block .wrapper {
  visibility: hidden;
  opacity: 0;
}

.no-touch .content-block.is-active .wrapper {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}


/* =Footer */

.footer-container {
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  background-color: #06060d;
}

.footer-container h3 {
  margin: 0;
  padding: 20px 0;
  font-weight: normal;
}

.footer-container a {
  color: rgba(255, 255, 255, 0.5);
}


/* =Simple animation up */

.no-touch .slideInUp {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: all 0.7s ease-out;
  transition: all 0.7s ease-out;
  -webkit-transform: translate3d(0, 50px, 0);
  transform: translate3d(0, 50px, 0);
}

.no-touch .is-active .slideInUp {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}

.slideInUp.slideInUp2 {
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}

.slideInUp.slideInUp3 {
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

#iht_logo {
  width: 100px;
  margin-bottom: 30px;
}


/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 768px) {
  body {
    font-weight: 100;
  }
  h1 {
    font-size: 3em;
  }
  p {
    font-size: 20px;
  }
  /* =Header */
  .header-container {
    overflow: hidden;
    position: relative;
  }
  .header-container .wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -120%);
    -ms-transform: translate(-50%, -120%);
    transform: translate(-50%, -120%);
    margin: 0;
    padding: 0;
  }
  .header-container:before {
    font-size: 70em;
  }
  .scroll-hint {
    font-size: 20px;
  }
  .bcg {
    opacity: 1;
  }
  .slide {
    overflow: hidden;
    overflow-x: hidden;
  }
  .slide section {
    max-width: 400px;
  }
  .slide .wrapper {
    padding-top: 120px;
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: left;
    width: 100%;
    margin: 0;
  }
  .slide#slide01,
  .slide#slide02,
  .slide#slide03 {
    color: #212121;
  }
  .slide#slide01 .wrapper,
  .slide#slide02 .wrapper,
  .slide#slide03 .wrapper {
    top: 20%;
    text-align: center;
  }
  .slide#slide01 section,
  .slide#slide02 section,
  .slide#slide03 section {
    margin: 0 auto;
  }
  .slide#slide02 {
    color: #ffffff;
  }
  .slide#slide02 .wrapper {
    top: auto;
    bottom: 40%;
    left: 10%;
    text-align: left;
    -webkit-transform: translate(0);
    -ms-transform: translate(0);
    transform: translate(0);
    padding: 0;
  }
  .slide#slide02 section {
    margin: 0;
  }
  .slide#slide03 .wrapper {
    padding: 0;
    top: 15%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
  }
  .slide#slide03 section {
    margin: 0 auto;
    max-width: 570px;
  }
  .slide#slide03 .button {
    border-color: rgba(0, 0, 0, 0.7);
    background-color: transparent;
    color: #212121;
  }
  .slide#slide03 .bcg {
    opacity: 1;
  }
  #nav-dots {
    display: block;
  }
  .content-block .wrapper {
    padding: 120px 0;
  }
}


/* ==========================================================================
   Helper classes
   ========================================================================== */

.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before,
.clearfix:after {
  content: " ";
  display: table;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}


/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
  *,
  *:before,
  *:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  a[href^="#"]:after,
  a[href^="javascript:"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}

@media print {
  * {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
}
(function($) {

  // Init ScrollMagic
  var controller = new ScrollMagic.Controller();

  // get all slides
  var slides = ["#slide01", "#slide02", "#slide03"];

  // get all headers in slides that trigger animation
  var headers = ["#slide01 header", "#slide02 header", "#slide03 header"];

  // get all break up sections
  var breakSections = ["#cb01", "#cb02", "#cb03"];

  // number of loaded images for preloader progress 
  var loadedCount = 0; //current number of images loaded
  var imagesToLoad = $('.bcg').length; //number of slides with .bcg container
  var loadingProgress = 0; //timeline progress - starts at 0

  $('.bcg').imagesLoaded({
    background: true
  }).progress(function(instance, image) {
    loadProgress();
  });

  function loadProgress(imgLoad, image) {
    //one more image has been loaded
    loadedCount++;

    loadingProgress = (loadedCount / imagesToLoad);

    //console.log(loadingProgress);

    // GSAP timeline for our progress bar
    TweenLite.to(progressTl, 0.7, {
      progress: loadingProgress,
      ease: Linear.easeNone
    });

  }

  //progress animation instance. the instance's time is irrelevant, can be anything but 0 to void  immediate render
  var progressTl = new TimelineMax({
    paused: true,
    onUpdate: progressUpdate,
    onComplete: loadComplete
  });

  progressTl
  //tween the progress bar width
    .to($('.progress span'), 1, {
    width: 100,
    ease: Linear.easeNone
  });

  //as the progress bar witdh updates and grows we put the precentage loaded in the screen
  function progressUpdate() {
    //the percentage loaded based on the tween's progress
    loadingProgress = Math.round(progressTl.progress() * 100);
    //we put the percentage in the screen
    $(".txt-perc").text(loadingProgress + '%');

  }

  function loadComplete() {

    // preloader out
    var preloaderOutTl = new TimelineMax();

    preloaderOutTl
      .to($('.progress'), 0.3, {
        y: 100,
        autoAlpha: 0,
        ease: Back.easeIn
      })
      .to($('.txt-perc'), 0.3, {
        y: 100,
        autoAlpha: 0,
        ease: Back.easeIn
      }, 0.1)
      .set($('body'), {
        className: '-=is-loading'
      })
      .set($('#intro'), {
        className: '+=is-loaded'
      })
      .to($('#preloader'), 0.7, {
        yPercent: 100,
        ease: Power4.easeInOut
      })
      .set($('#preloader'), {
        className: '+=is-hidden'
      })
      .from($('#intro .title'), 1, {
        autoAlpha: 0,
        ease: Power1.easeOut
      }, '-=0.2')
      .from($('#intro p'), 0.7, {
        autoAlpha: 0,
        ease: Power1.easeOut
      }, '+=0.2')
      .from($('.scroll-hint'), 0.3, {
        y: -20,
        autoAlpha: 0,
        ease: Power1.easeOut
      }, '+=0.1');

    return preloaderOutTl;
  }

  // Enable ScrollMagic only for desktop, disable on touch and mobile devices
  if (!Modernizr.touch) {

    // SCENE 1
    // create scenes for each of the headers
    headers.forEach(function(header, index) {

      // number for highlighting scenes
      var num = index + 1;

      // make scene
      var headerScene = new ScrollMagic.Scene({
          triggerElement: header, // trigger CSS animation when header is in the middle of the viewport 
          offset: -95 // offset triggers the animation 95 earlier then middle of the viewport, adjust to your liking
        })
        .setClassToggle('#slide0' + num, 'is-active') // set class to active slide
        //.addIndicators() // add indicators (requires plugin), use for debugging
        .addTo(controller);
    });

    // SCENE 2
    // change color of the nav for dark content blocks
    breakSections.forEach(function(breakSection, index) {

      // number for highlighting scenes
      var breakID = $(breakSection).attr('id');

      // make scene
      var breakScene = new ScrollMagic.Scene({
          triggerElement: breakSection, // trigger CSS animation when header is in the middle of the viewport 
          triggerHook: 0.75
        })
        .setClassToggle('#' + breakID, 'is-active') // set class to active slide
        .on("enter", function(event) {
          $('#nav-dots').attr('class','is-light');
        })
        .addTo(controller);
    });

    // SCENE 3
    // change color of the nav back to dark
    slides.forEach(function(slide, index) {

      var slideScene = new ScrollMagic.Scene({
          triggerElement: slide // trigger CSS animation when header is in the middle of the viewport
        })
        .on("enter", function(event) {
          $('#nav-dots').removeAttr('class');
        })
        .addTo(controller);
    });

    // SCENE 4 - parallax effect on each of the slides with bcg
    // move bcg container when slide gets into the view
    slides.forEach(function(slide, index) {

      var $bcg = $(slide).find('.bcg');

      var slideParallaxScene = new ScrollMagic.Scene({
          triggerElement: slide,
          triggerHook: 1,
          duration: "100%"
        })
        .setTween(TweenMax.from($bcg, 1, {
          y: '-40%',
          autoAlpha: 0.3,
          ease: Power0.easeNone
        }))
        .addTo(controller);
    });

    // SCENE 5 - parallax effect on the intro slide
    // move bcg container when intro gets out of the the view

    var introTl = new TimelineMax();

    introTl
      .to($('#intro header, .scroll-hint'), 0.2, {
        autoAlpha: 0,
        ease: Power1.easeNone
      })
      //.to($('#intro .bcg'), 1.4, {y: '20%', ease:Power1.easeOut}, '-=0.2')
      .to($('#intro'), 0.7, {
        autoAlpha: 0.5,
        ease: Power1.easeNone
      }, 0);

    var introScene = new ScrollMagic.Scene({
        triggerElement: '#intro',
        triggerHook: 0,
        duration: "100%"
      })
      .setTween(introTl)
      .addTo(controller);

    // change behaviour of controller to animate scroll instead of jump
    controller.scrollTo(function(newpos) {
      TweenMax.to(window, 1, {
        scrollTo: {
          y: newpos
        },
        ease: Power1.easeInOut
      });
    });

    //  bind scroll to anchor links
    $(document).on("click", "a[href^='#']", function(e) {
      var id = $(this).attr("href");
      if ($(id).length > 0) {
        e.preventDefault();

        // trigger scroll
        controller.scrollTo(id);

        // if supported by the browser we can even update the URL.
        if (window.history && window.history.pushState) {
          history.pushState("", document.title, id);
        }
      }
    });

  }

}(jQuery));

Похожие записи

Разное

Scratch & Win

Июл 8, 2024 admin
Разное

Таймер обратного отсчета

Июн 14, 2024 admin
Разное

January 1

Дек 28, 2023 admin

Вы пропустили

Карточки ReactJS

Recipe Card React.js

18.06.2026 admin
Карточки

Recipe Card

18.06.2026 admin
ReactJS Слайдеры

Image Carousel React.js

08.06.2026 admin
Слайдеры

Image Carousel

08.06.2026 admin