{"id":1457,"date":"2023-05-20T20:54:52","date_gmt":"2023-05-20T17:54:52","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1457"},"modified":"2023-05-20T20:54:56","modified_gmt":"2023-05-20T17:54:56","slug":"scrollmagic-one-page-two-navs","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1457\/","title":{"rendered":"One-page two navs"},"content":{"rendered":"\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"ScrollMagic One-page two navs\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/Q1aU7ZdVSOo?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;htmlmixed&quot;,&quot;mime&quot;:&quot;text\/html&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;HTML&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;html&quot;}\">&lt;body class=&quot;is-loading&quot;&gt;\n\n    &lt;div id=&quot;preloader&quot;&gt;\n        &lt;div class=&quot;txt&quot;&gt;\n            &lt;p class=&quot;txt-perc&quot;&gt;0%&lt;\/p&gt;\n            &lt;div class=&quot;progress&quot;&gt;&lt;span&gt;&lt;\/span&gt;&lt;\/div&gt;\n        &lt;\/div&gt;\n    &lt;\/div&gt;\n\n    &lt;div id=&quot;intro&quot; class=&quot;header-container fs&quot;&gt;\n        &lt;div class=&quot;bcg&quot;&gt;&lt;\/div&gt;\n        &lt;header class=&quot;wrapper&quot;&gt;\n            &lt;h1 class=&quot;title&quot;&gt;Unleash Your Potentional!&lt;\/h1&gt;\n            &lt;p&gt;Learn GreenSock and ScrollMagic and create something amazing!&lt;\/p&gt;\n        &lt;\/header&gt;\n        &lt;span class=&quot;scroll-hint&quot;&gt;Scroll Down&lt;\/span&gt;\n    &lt;\/div&gt;\n\n\n    &lt;nav&gt;\n        &lt;ul class=&quot;horizontal-nav&quot;&gt;\n            &lt;li&gt;&lt;a href=&quot;#intro&quot;&gt;&lt;span class=&quot;nav-horizontal&quot;&gt;&lt;\/span&gt;Intro&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide01&quot;&gt;&lt;span class=&quot;nav-horizontal&quot;&gt;&lt;\/span&gt;Images&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide02&quot;&gt;&lt;span class=&quot;nav-horizontal&quot;&gt;&lt;\/span&gt;Position and Timing&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide03&quot;&gt;&lt;span class=&quot;nav-horizontal&quot;&gt;&lt;\/span&gt;Download&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/nav&gt;\n\n  \n\n    &lt;div id=&quot;nav-dots&quot;&gt;\n        &lt;ul&gt;\n            &lt;li&gt;&lt;a href=&quot;#intro&quot;&gt;&lt;span class=&quot;nav-dot&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;nav-label&quot;&gt;Intro&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide01&quot;&gt;&lt;span class=&quot;nav-dot&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;nav-label&quot;&gt;Images&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide02&quot;&gt;&lt;span class=&quot;nav-dot&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;nav-label&quot;&gt;Position and Timing&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n            &lt;li&gt;&lt;a href=&quot;#slide03&quot;&gt;&lt;span class=&quot;nav-dot&quot;&gt;&lt;\/span&gt;&lt;span class=&quot;nav-label&quot;&gt;Download&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\n        &lt;\/ul&gt;\n    &lt;\/div&gt;\n\n\n    &lt;div id=&quot;main&quot; class=&quot;main-container&quot;&gt;\n\n        &lt;article id=&quot;cb01&quot; class=&quot;content-block&quot;&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n                &lt;header class=&quot;slideInUp&quot;&gt;\n                    &lt;h1&gt;SIMPLIFY&lt;\/h1&gt;\n                &lt;\/header&gt;\n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;Simplify your content to a MINIMUM.&lt;\/p&gt;\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n        \n        &lt;article id=&quot;slide01&quot; class=&quot;slide fs&quot;&gt;\n            &lt;div class=&quot;bcg&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n                &lt;header class=&quot;slideInUp&quot;&gt;\n                    &lt;h1&gt;A picture is worth a thousand words&lt;\/h1&gt;\n                &lt;\/header&gt;\n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;Let the images do the talking and use text for short summaries.&lt;\/p&gt;\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n\n        &lt;article id=&quot;cb02&quot; class=&quot;content-block&quot;&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n                &lt;header class=&quot;slideInUp&quot;&gt;\n                    &lt;h1&gt;FOCUS&lt;\/h1&gt;\n                &lt;\/header&gt;\n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;Focus on the most IMPORTANT thing. The one thing!&lt;\/p&gt;\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n\n        &lt;article id=&quot;slide02&quot; class=&quot;slide fs&quot;&gt;\n            &lt;div class=&quot;bcg&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n                &lt;header class=&quot;slideInUp&quot;&gt;\n                    &lt;h1&gt;Position and Timing&lt;\/h1&gt;\n                &lt;\/header&gt;\n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;Position elements based on the background image and trigger animation at the right time.&lt;\/p&gt;\n                    &lt;p class=&quot;slideInUp slideInUp3&quot;&gt;Use different triggerElements in combination with offsets to be in full control.&lt;\/p&gt;\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n\n        &lt;article id=&quot;cb03&quot; class=&quot;content-block&quot;&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n                &lt;header class=&quot;slideInUp&quot;&gt;\n                    &lt;h1&gt;ASK&lt;\/h1&gt;\n                &lt;\/header&gt;\n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;You don't ask, you don't get. Always end with CALL TO ACTION.&lt;\/p&gt;\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n\n        &lt;article id=&quot;slide03&quot; class=&quot;slide fs&quot;&gt;\n            &lt;div class=&quot;bcg&quot;&gt;&lt;\/div&gt;\n            &lt;div class=&quot;wrapper&quot;&gt;\n            \n                &lt;section&gt;\n                    &lt;p class=&quot;slideInUp slideInUp2&quot;&gt;You don't ask, you don't get. Always end with CALL TO ACTION.&lt;\/p&gt;\n                    &lt;div class=&quot;slideInUp slideInUp3&quot;&gt;\n                        &lt;a href=&quot;#&quot; class=&quot;button&quot;&gt;PUSH&lt;\/a&gt;\n                    &lt;\/div&gt;\n\n                &lt;\/section&gt;\n            &lt;\/div&gt; &lt;!-- .wrapper --&gt;\n        &lt;\/article&gt;\n\n    &lt;\/div&gt; &lt;!-- #main-container --&gt;\n\n\n    &lt;script src=&quot;\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js&quot;&gt;&lt;\/script&gt;\n    &lt;script&gt;window.jQuery || document.write('&lt;script src=&quot;js\/vendor\/jquery-1.11.2.min.js&quot;&gt;&lt;\\\/script&gt;')&lt;\/script&gt;\n\n&lt;\/body&gt;\n\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.18.2\/TweenMax.min.js&quot;&gt;&lt;\/script&gt;\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/jquery.imagesloaded\/3.2.0\/imagesloaded.pkgd.min.js&quot;&gt;&lt;\/script&gt;\n \n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ScrollMagic\/2.0.5\/ScrollMagic.min.js&quot;&gt;&lt;\/script&gt;\n\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ScrollMagic\/2.0.5\/plugins\/animation.gsap.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/gsap\/1.18.2\/plugins\/ScrollToPlugin.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/ScrollMagic\/2.0.5\/plugins\/debug.addIndicators.min.js&quot;&gt;&lt;\/script&gt;\n&lt;script src=&quot;https:\/\/ihatetomatoes.net\/demos\/scrollmagic-templates\/scrollmagic-template-04\/js\/vendor\/modernizr-2.8.3-respond-1.4.2.min.js&quot;&gt;&lt;\/script&gt;\n<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;css&quot;,&quot;mime&quot;:&quot;text\/css&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;CSS&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;css&quot;}\">.clear:before,\n.clear:after {\n  content: ' ';\n  display: table;\n}\n\n.clear {\n  *zoom: 1;\n}\n\n.clear:after {\n  clear: both;\n}\n\n\n\/*! normalize.css v3.0.2 | MIT License | git.io\/normalize *\/\n\nhtml {\n  font-family: sans-serif;\n  -ms-text-size-adjust: 100%;\n  -webkit-text-size-adjust: 100%;\n}\n\nbody {\n  margin: 0;\n}\n\narticle,\naside,\ndetails,\nfigcaption,\nfigure,\nfooter,\nheader,\nhgroup,\nmain,\nmenu,\nnav,\n#nav-dots,\nsection,\nsummary {\n  display: block;\n}\n\naudio,\ncanvas,\nprogress,\nvideo {\n  display: inline-block;\n  vertical-align: baseline;\n}\n\naudio:not([controls]) {\n  display: none;\n  height: 0;\n}\n\n[hidden],\ntemplate {\n  display: none;\n}\n\na {\n  background-color: transparent;\n}\n\na:active,\na:hover {\n  outline: 0;\n}\n\nabbr[title] {\n  border-bottom: 1px dotted;\n}\n\nb,\nstrong {\n  font-weight: 700;\n}\n\ndfn {\n  font-style: italic;\n}\n\nh1 {\n  font-size: 2em;\n  margin: .67em 0;\n}\n\nmark {\n  background: #ff0;\n  color: #000;\n}\n\nsmall {\n  font-size: 80%;\n}\n\nsub,\nsup {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\n\nsup {\n  top: -.5em;\n}\n\nsub {\n  bottom: -.25em;\n}\n\nimg {\n  border: 0;\n}\n\nsvg:not(:root) {\n  overflow: hidden;\n}\n\nfigure {\n  margin: 1em 40px;\n}\n\nhr {\n  box-sizing: content-box;\n  height: 0;\n}\n\npre {\n  overflow: auto;\n}\n\ncode,\nkbd,\npre,\nsamp {\n  font-family: monospace, monospace;\n  font-size: 1em;\n}\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  color: inherit;\n  font: inherit;\n  margin: 0;\n}\n\nbutton {\n  overflow: visible;\n}\n\nbutton,\nselect {\n  text-transform: none;\n}\n\nbutton,\nhtml input[type=button],\ninput[type=reset],\ninput[type=submit] {\n  -webkit-appearance: button;\n  cursor: pointer;\n}\n\nbutton[disabled],\nhtml input[disabled] {\n  cursor: default;\n}\n\nbutton::-moz-focus-inner,\ninput::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\ninput {\n  line-height: normal;\n}\n\ninput[type=checkbox],\ninput[type=radio] {\n  box-sizing: border-box;\n  padding: 0;\n}\n\ninput[type=number]::-webkit-inner-spin-button,\ninput[type=number]::-webkit-outer-spin-button {\n  height: auto;\n}\n\ninput[type=search] {\n  -webkit-appearance: textfield;\n  box-sizing: content-box;\n}\n\ninput[type=search]::-webkit-search-cancel-button,\ninput[type=search]::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n\nfieldset {\n  border: 1px solid silver;\n  margin: 0 2px;\n  padding: .35em .625em .75em;\n}\n\nlegend {\n  border: 0;\n  padding: 0;\n}\n\ntextarea {\n  overflow: auto;\n}\n\noptgroup {\n  font-weight: 700;\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\ntd,\nth {\n  padding: 0;\n}\n\n\n\/*! HTML5 Boilerplate v5.0 | MIT License | http:\/\/h5bp.com\/ *\/\n\nhtml {\n  color: #222;\n  font-size: 1em;\n  line-height: 1.4;\n}\n\n::-moz-selection {\n  background: #b3d4fc;\n  text-shadow: none;\n}\n\n::selection {\n  background: #b3d4fc;\n  text-shadow: none;\n}\n\nhr {\n  display: block;\n  height: 1px;\n  border: 0;\n  border-top: 1px solid #ccc;\n  margin: 1em 0;\n  padding: 0;\n}\n\naudio,\ncanvas,\niframe,\nimg,\nsvg,\nvideo {\n  vertical-align: middle;\n}\n\nfieldset {\n  border: 0;\n  margin: 0;\n  padding: 0;\n}\n\ntextarea {\n  resize: vertical;\n}\n\n.browserupgrade {\n  margin: 0.2em 0;\n  background: #ccc;\n  color: #000;\n  padding: 0.2em 0;\n}\n\n\n\/* ===== Initializr Styles ==================================================\n   Author: Jonathan Verrecchia - verekia.com\/initializr\/responsive-template\n   ========================================================================== *\/\n\nbody {\n  font: 16px\/1.5 'Raleway', Helvetica, Helvetica Neue, Arial, sans-serif;\n  background-color: #212121;\n}\n\n.wrapper {\n  width: 80%;\n  margin: 0 10%;\n}\n\n\n\/* Make the body 100% of the browser viewport height *\/\n\nhtml,\nbody {\n  height: 100%;\n  margin: 0;\n}\n\nh1 {\n  font-size: 2em;\n  margin-top: 0;\n  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;\n  font-weight: 700;\n}\n\n\n\/* ==========================================================================\n   Author's custom styles\n   ========================================================================== *\/\n\n\n\/* =Preloader *\/\n\n#preloader {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 101;\n  background-color: #212121;\n  color: #ffffff;\n}\n\n#preloader .txt {\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n}\n\n#preloader .txt-perc {\n  font-size: 35px;\n  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;\n  opacity: 1;\n  margin: 0 0 6px 0;\n  max-width: 400px;\n  text-align: center;\n}\n\n#preloader .progress {\n  width: 100px;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  margin: 0 auto 15px auto;\n}\n\n#preloader .progress span {\n  display: block;\n  width: 0;\n  height: 100%;\n  background-color: rgba(255, 255, 255, 0.8);\n}\n\n#preloader.is-hidden {\n  visibility: hidden;\n  opacity: 0;\n}\n\n.is-loading {\n  overflow: hidden;\n}\n\n\n\/* =Header *\/\n\n.header-container {\n  text-align: center;\n  color: #ffffff;\n}\n\n.header-container .wrapper {\n  padding-top: 120px;\n  z-index: 2;\n  position: relative;\n}\n\n.header-container .bcg {\n  -webkit-transition: -webkit-transform 4s ease-out;\n  transition: transform 4s ease-out;\n  -webkit-transform: scale(1.05);\n  -ms-transform: scale(1.05);\n  transform: scale(1.05);\n  -webkit-transform-origin: top center;\n  -ms-transform-origin: top center;\n  transform-origin: top center;\n}\n\n.header-container.is-loaded .bcg {\n  -webkit-transform: scale(1);\n  -ms-transform: scale(1);\n  transform: scale(1);\n}\n\n.bcg {\n  background: no-repeat center center;\n  background-size: cover;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n  opacity: 0.5;\n}\n\n.header-container .bcg {\n  background-image: url(https:\/\/ihatetomatoes.net\/demos\/scrollmagic-templates\/scrollmagic-template-04\/img\/img_mountains01.jpg);\n  background-size: cover;\n}\n\n#slide01 .bcg {\n  background: url(https:\/\/ihatetomatoes.net\/demos\/scrollmagic-templates\/scrollmagic-template-04\/img\/img_mountains02.jpg) no-repeat center center;\n  background-size: cover;\n}\n\n#slide02 .bcg {\n  background: url(https:\/\/ihatetomatoes.net\/demos\/scrollmagic-templates\/scrollmagic-template-04\/img\/img_mountains03.jpg) no-repeat center center;\n  background-size: cover;\n}\n\n#slide03 .bcg {\n  background: url(https:\/\/ihatetomatoes.net\/demos\/scrollmagic-templates\/scrollmagic-template-04\/img\/img_mountains04.jpg) no-repeat center center;\n  background-size: cover;\n  opacity: 0.7;\n}\n\n\n\/* =Navigation *\/\nul.horizontal-nav {\n  position: fixed;\n  left: 0;\n  top: 5%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  text-align: center;\n  z-index: 100;\n}\n\n.horizontal-nav a {\n  display: block;\n  line-height: 25px;\n  position: relative;\n  padding-right: 20px;\n  color: #ffffff;\n  text-decoration: none;\n}\n\n.horizontal-nav a:hover {\n  -webkit-transform: translateX(0);\n  -ms-transform: translateX(0);\n  transform: translateX(0);\n  opacity: 1;\n  visibility: visible;\n}\n\n.horizontal-nav .nav-horizontal {\n  display: block;\n  width: auto;\n  height: 10px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n}\n\n\n.horizontal-nav ul {\n  margin: 0;\n  padding: 0;\n}\n\n.horizontal-nav li {\n  width: auto;\n  list-style: none;\n  display: inline-block;\n}\n\n\n\n\/* =Navigation Dots *\/\n#nav-dots {\n  display: none;\n  position: fixed;\n  right: 30px;\n  top: 50%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  text-align: right;\n  z-index: 100;\n}\n\n#nav-dots a {\n  display: block;\n  line-height: 25px;\n  position: relative;\n  padding-right: 20px;\n  color: #ffffff;\n  text-decoration: none;\n}\n\n#nav-dots a:hover .nav-label {\n  -webkit-transform: translateX(0);\n  -ms-transform: translateX(0);\n  transform: translateX(0);\n  opacity: 1;\n  visibility: visible;\n}\n\n#nav-dots .nav-dot {\n  display: block;\n  width: 10px;\n  height: 10px;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  background-color: rgba(255, 255, 255, 0.9);\n  border-radius: 100%;\n  -webkit-transform: translateY(-50%);\n  -ms-transform: translateY(-50%);\n  transform: translateY(-50%);\n  -webkit-transition: all 0.3s linear;\n  transition: all 0.3s linear;\n}\n\n#nav-dots .nav-label {\n  display: block;\n  opacity: 0.5;\n  visibility: hidden;\n  -webkit-transform: translateX(-10px);\n  -ms-transform: translateX(-10px);\n  transform: translateX(-10px);\n  -webkit-transition: all 0.2s cubic-bezier(.17, .67, .83, .67);\n  transition: all 0.2s cubic-bezier(.17, .67, .83, .67);\n}\n\n#nav-dots.is-dark a {\n  color: #212121;\n}\n\n#nav-dots.is-dark .nav-dot {\n  background-color: rgba(0, 0, 0, 0.5);\n}\n\n#nav-dots.is-light a {\n  color: #ffffff;\n}\n\n#nav-dots.is-light .nav-dot {\n  background-color: rgba(255, 255, 255, 0.5);\n}\n\n#nav-dots ul {\n  margin: 0;\n  padding: 0;\n}\n\n#nav-dots li {\n  width: auto;\n  list-style: none;\n}\n\n.scroll-hint {\n  color: #212121;\n  position: absolute;\n  bottom: 30px;\n  left: 50%;\n  -webkit-transform: translate(-50%, -50%);\n  -ms-transform: translate(-50%, -50%);\n  transform: translate(-50%, -50%);\n  padding: 10px 40px;\n  border: 3px #ffffff solid;\n  font-size: 13px;\n  font-weight: bold;\n  font-family: 'Roboto Condensed', Helvetica, Helvetica Neue, Arial, sans-serif;\n  background-color: rgba(255, 255, 255, 0.9);\n  z-index: 2;\n}\n\n\n\/* =Main *\/\n\np {\n  font-size: 16px;\n}\n\n.fs {\n  height: 100vh;\n}\n\n.slide {\n  color: #ffffff;\n  position: relative;\n}\n\n.slide .wrapper {\n  padding-top: 30px;\n  text-align: center;\n  position: relative;\n  z-index: 2;\n}\n\n.slide#slide01 .wrapper {\n  position: absolute;\n  top: 10%;\n}\n\n.slide#slide02 .wrapper {\n  position: absolute;\n  bottom: 10%;\n}\n\n.slide#slide03 .button {\n  border-color: #ffffff;\n  color: #212121;\n  background-color: rgba(255, 255, 255, 0.9);\n}\n\n.slide#slide03 .button:hover {\n  border-color: #212121;\n  background-color: #212121;\n  color: #ffffff;\n}\n\n.slide#slide03 .wrapper {\n  padding-top: 100px;\n}\n\n.slide#slide04 {\n  background-color: #be4c2c;\n}\n\n.button {\n  text-decoration: none;\n  color: #ffffff;\n  border: 1px rgba(255, 255, 255, 0.7) solid;\n  padding: 8px 15px;\n  margin-top: 15px;\n  display: inline-block;\n  position: relative;\n}\n\n.button:hover {\n  border-color: #ffffff;\n  background-color: #ffffff;\n  color: #000000;\n}\n\n\n\/* =Content Block *\/\n\n.content-block {\n  background-color: #212121;\n  color: rgba(255, 255, 255, 0.9);\n}\n\n.content-block .wrapper {\n  padding: 30px 0;\n  text-align: center;\n}\n\n.no-touch .content-block .wrapper {\n  visibility: hidden;\n  opacity: 0;\n}\n\n.no-touch .content-block.is-active .wrapper {\n  visibility: visible;\n  opacity: 1;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n\n\/* =Footer *\/\n\n.footer-container {\n  text-align: center;\n  font-size: 14px;\n  color: rgba(255, 255, 255, 0.5);\n  background-color: #06060d;\n}\n\n.footer-container h3 {\n  margin: 0;\n  padding: 20px 0;\n  font-weight: normal;\n}\n\n.footer-container a {\n  color: rgba(255, 255, 255, 0.5);\n}\n\n\n\/* =Simple animation up *\/\n\n.no-touch .slideInUp {\n  visibility: hidden;\n  opacity: 0;\n  -webkit-transition: all 0.7s ease-out;\n  transition: all 0.7s ease-out;\n  -webkit-transform: translate3d(0, 50px, 0);\n  transform: translate3d(0, 50px, 0);\n}\n\n.no-touch .is-active .slideInUp {\n  visibility: visible;\n  opacity: 1;\n  -webkit-transform: translate3d(0, 0, 0);\n  transform: translate3d(0, 0, 0);\n}\n\n.slideInUp.slideInUp2 {\n  -webkit-transition-delay: 0.2s;\n  transition-delay: 0.2s;\n}\n\n.slideInUp.slideInUp3 {\n  -webkit-transition-delay: 0.4s;\n  transition-delay: 0.4s;\n}\n\n#iht_logo {\n  width: 100px;\n  margin-bottom: 30px;\n}\n\n\n\/* ==========================================================================\n   Media Queries\n   ========================================================================== *\/\n\n@media only screen and (min-width: 768px) {\n  body {\n    font-weight: 100;\n  }\n  h1 {\n    font-size: 3em;\n  }\n  p {\n    font-size: 20px;\n  }\n  \/* =Header *\/\n  .header-container {\n    overflow: hidden;\n    position: relative;\n  }\n  .header-container .wrapper {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -webkit-transform: translate(-50%, -120%);\n    -ms-transform: translate(-50%, -120%);\n    transform: translate(-50%, -120%);\n    margin: 0;\n    padding: 0;\n  }\n  .header-container:before {\n    font-size: 70em;\n  }\n  .scroll-hint {\n    font-size: 20px;\n  }\n  .bcg {\n    opacity: 1;\n  }\n  .slide {\n    overflow: hidden;\n    overflow-x: hidden;\n  }\n  .slide section {\n    max-width: 400px;\n  }\n  .slide .wrapper {\n    padding-top: 120px;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    -webkit-transform: translate(-50%, -50%);\n    -ms-transform: translate(-50%, -50%);\n    transform: translate(-50%, -50%);\n    text-align: left;\n    width: 100%;\n    margin: 0;\n  }\n  .slide#slide01,\n  .slide#slide02,\n  .slide#slide03 {\n    color: #212121;\n  }\n  .slide#slide01 .wrapper,\n  .slide#slide02 .wrapper,\n  .slide#slide03 .wrapper {\n    top: 20%;\n    text-align: center;\n  }\n  .slide#slide01 section,\n  .slide#slide02 section,\n  .slide#slide03 section {\n    margin: 0 auto;\n  }\n  .slide#slide02 {\n    color: #ffffff;\n  }\n  .slide#slide02 .wrapper {\n    top: auto;\n    bottom: 40%;\n    left: 10%;\n    text-align: left;\n    -webkit-transform: translate(0);\n    -ms-transform: translate(0);\n    transform: translate(0);\n    padding: 0;\n  }\n  .slide#slide02 section {\n    margin: 0;\n  }\n  .slide#slide03 .wrapper {\n    padding: 0;\n    top: 15%;\n    -webkit-transform: translate(-50%, 0);\n    -ms-transform: translate(-50%, 0);\n    transform: translate(-50%, 0);\n  }\n  .slide#slide03 section {\n    margin: 0 auto;\n    max-width: 570px;\n  }\n  .slide#slide03 .button {\n    border-color: rgba(0, 0, 0, 0.7);\n    background-color: transparent;\n    color: #212121;\n  }\n  .slide#slide03 .bcg {\n    opacity: 1;\n  }\n  #nav-dots {\n    display: block;\n  }\n  .content-block .wrapper {\n    padding: 120px 0;\n  }\n}\n\n\n\/* ==========================================================================\n   Helper classes\n   ========================================================================== *\/\n\n.hidden {\n  display: none !important;\n  visibility: hidden;\n}\n\n.visuallyhidden {\n  border: 0;\n  clip: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  width: 1px;\n}\n\n.visuallyhidden.focusable:active,\n.visuallyhidden.focusable:focus {\n  clip: auto;\n  height: auto;\n  margin: 0;\n  overflow: visible;\n  position: static;\n  width: auto;\n}\n\n.invisible {\n  visibility: hidden;\n}\n\n.clearfix:before,\n.clearfix:after {\n  content: &quot; &quot;;\n  display: table;\n}\n\n.clearfix:after {\n  clear: both;\n}\n\n.clearfix {\n  *zoom: 1;\n}\n\n\n\/* ==========================================================================\n   Print styles\n   ========================================================================== *\/\n\n@media print {\n  *,\n  *:before,\n  *:after {\n    background: transparent !important;\n    color: #000 !important;\n    box-shadow: none !important;\n    text-shadow: none !important;\n  }\n  a,\n  a:visited {\n    text-decoration: underline;\n  }\n  a[href]:after {\n    content: &quot; (&quot; attr(href) &quot;)&quot;;\n  }\n  abbr[title]:after {\n    content: &quot; (&quot; attr(title) &quot;)&quot;;\n  }\n  a[href^=&quot;#&quot;]:after,\n  a[href^=&quot;javascript:&quot;]:after {\n    content: &quot;&quot;;\n  }\n  pre,\n  blockquote {\n    border: 1px solid #999;\n    page-break-inside: avoid;\n  }\n  thead {\n    display: table-header-group;\n  }\n  tr,\n  img {\n    page-break-inside: avoid;\n  }\n  img {\n    max-width: 100% !important;\n  }\n  p,\n  h2,\n  h3 {\n    orphans: 3;\n    widows: 3;\n  }\n  h2,\n  h3 {\n    page-break-after: avoid;\n  }\n}\n\n@media print {\n  * {\n    background: transparent !important;\n    color: #000 !important;\n    box-shadow: none !important;\n    text-shadow: none !important;\n  }\n  a,\n  a:visited {\n    text-decoration: underline;\n  }\n  a[href]:after {\n    content: &quot; (&quot; attr(href) &quot;)&quot;;\n  }\n  abbr[title]:after {\n    content: &quot; (&quot; attr(title) &quot;)&quot;;\n  }\n  .ir a:after,\n  a[href^=&quot;javascript:&quot;]:after,\n  a[href^=&quot;#&quot;]:after {\n    content: &quot;&quot;;\n  }\n  pre,\n  blockquote {\n    border: 1px solid #999;\n    page-break-inside: avoid;\n  }\n  thead {\n    display: table-header-group;\n  }\n  tr,\n  img {\n    page-break-inside: avoid;\n  }\n  img {\n    max-width: 100% !important;\n  }\n  @page {\n    margin: 0.5cm;\n  }\n  p,\n  h2,\n  h3 {\n    orphans: 3;\n    widows: 3;\n  }\n  h2,\n  h3 {\n    page-break-after: avoid;\n  }\n}<\/pre><\/div>\n\n\n\n<div class=\"wp-block-codemirror-blocks-code-block code-block\"><pre class=\"CodeMirror\" data-setting=\"{&quot;showPanel&quot;:true,&quot;languageLabel&quot;:&quot;language&quot;,&quot;fullScreenButton&quot;:true,&quot;copyButton&quot;:true,&quot;mode&quot;:&quot;javascript&quot;,&quot;mime&quot;:&quot;text\/javascript&quot;,&quot;theme&quot;:&quot;cobalt&quot;,&quot;lineNumbers&quot;:true,&quot;styleActiveLine&quot;:true,&quot;lineWrapping&quot;:true,&quot;readOnly&quot;:false,&quot;fileName&quot;:&quot;&quot;,&quot;TrpContentRestriction&quot;:{&quot;restriction_type&quot;:&quot;exclude&quot;,&quot;selected_languages&quot;:[],&quot;panel_open&quot;:true},&quot;language&quot;:&quot;JavaScript&quot;,&quot;maxHeight&quot;:&quot;400px&quot;,&quot;modeName&quot;:&quot;js&quot;}\">(function($) {\n\n  \/\/ Init ScrollMagic\n  var controller = new ScrollMagic.Controller();\n\n  \/\/ get all slides\n  var slides = [&quot;#slide01&quot;, &quot;#slide02&quot;, &quot;#slide03&quot;];\n\n  \/\/ get all headers in slides that trigger animation\n  var headers = [&quot;#slide01 header&quot;, &quot;#slide02 header&quot;, &quot;#slide03 header&quot;];\n\n  \/\/ get all break up sections\n  var breakSections = [&quot;#cb01&quot;, &quot;#cb02&quot;, &quot;#cb03&quot;];\n\n  \/\/ number of loaded images for preloader progress \n  var loadedCount = 0; \/\/current number of images loaded\n  var imagesToLoad = $('.bcg').length; \/\/number of slides with .bcg container\n  var loadingProgress = 0; \/\/timeline progress - starts at 0\n\n  $('.bcg').imagesLoaded({\n    background: true\n  }).progress(function(instance, image) {\n    loadProgress();\n  });\n\n  function loadProgress(imgLoad, image) {\n    \/\/one more image has been loaded\n    loadedCount++;\n\n    loadingProgress = (loadedCount \/ imagesToLoad);\n\n    \/\/console.log(loadingProgress);\n\n    \/\/ GSAP timeline for our progress bar\n    TweenLite.to(progressTl, 0.7, {\n      progress: loadingProgress,\n      ease: Linear.easeNone\n    });\n\n  }\n\n  \/\/progress animation instance. the instance's time is irrelevant, can be anything but 0 to void  immediate render\n  var progressTl = new TimelineMax({\n    paused: true,\n    onUpdate: progressUpdate,\n    onComplete: loadComplete\n  });\n\n  progressTl\n  \/\/tween the progress bar width\n    .to($('.progress span'), 1, {\n    width: 100,\n    ease: Linear.easeNone\n  });\n\n  \/\/as the progress bar witdh updates and grows we put the precentage loaded in the screen\n  function progressUpdate() {\n    \/\/the percentage loaded based on the tween's progress\n    loadingProgress = Math.round(progressTl.progress() * 100);\n    \/\/we put the percentage in the screen\n    $(&quot;.txt-perc&quot;).text(loadingProgress + '%');\n\n  }\n\n  function loadComplete() {\n\n    \/\/ preloader out\n    var preloaderOutTl = new TimelineMax();\n\n    preloaderOutTl\n      .to($('.progress'), 0.3, {\n        y: 100,\n        autoAlpha: 0,\n        ease: Back.easeIn\n      })\n      .to($('.txt-perc'), 0.3, {\n        y: 100,\n        autoAlpha: 0,\n        ease: Back.easeIn\n      }, 0.1)\n      .set($('body'), {\n        className: '-=is-loading'\n      })\n      .set($('#intro'), {\n        className: '+=is-loaded'\n      })\n      .to($('#preloader'), 0.7, {\n        yPercent: 100,\n        ease: Power4.easeInOut\n      })\n      .set($('#preloader'), {\n        className: '+=is-hidden'\n      })\n      .from($('#intro .title'), 1, {\n        autoAlpha: 0,\n        ease: Power1.easeOut\n      }, '-=0.2')\n      .from($('#intro p'), 0.7, {\n        autoAlpha: 0,\n        ease: Power1.easeOut\n      }, '+=0.2')\n      .from($('.scroll-hint'), 0.3, {\n        y: -20,\n        autoAlpha: 0,\n        ease: Power1.easeOut\n      }, '+=0.1');\n\n    return preloaderOutTl;\n  }\n\n  \/\/ Enable ScrollMagic only for desktop, disable on touch and mobile devices\n  if (!Modernizr.touch) {\n\n    \/\/ SCENE 1\n    \/\/ create scenes for each of the headers\n    headers.forEach(function(header, index) {\n\n      \/\/ number for highlighting scenes\n      var num = index + 1;\n\n      \/\/ make scene\n      var headerScene = new ScrollMagic.Scene({\n          triggerElement: header, \/\/ trigger CSS animation when header is in the middle of the viewport \n          offset: -95 \/\/ offset triggers the animation 95 earlier then middle of the viewport, adjust to your liking\n        })\n        .setClassToggle('#slide0' + num, 'is-active') \/\/ set class to active slide\n        \/\/.addIndicators() \/\/ add indicators (requires plugin), use for debugging\n        .addTo(controller);\n    });\n\n    \/\/ SCENE 2\n    \/\/ change color of the nav for dark content blocks\n    breakSections.forEach(function(breakSection, index) {\n\n      \/\/ number for highlighting scenes\n      var breakID = $(breakSection).attr('id');\n\n      \/\/ make scene\n      var breakScene = new ScrollMagic.Scene({\n          triggerElement: breakSection, \/\/ trigger CSS animation when header is in the middle of the viewport \n          triggerHook: 0.75\n        })\n        .setClassToggle('#' + breakID, 'is-active') \/\/ set class to active slide\n        .on(&quot;enter&quot;, function(event) {\n          $('#nav-dots').attr('class','is-light');\n        })\n        .addTo(controller);\n    });\n\n    \/\/ SCENE 3\n    \/\/ change color of the nav back to dark\n    slides.forEach(function(slide, index) {\n\n      var slideScene = new ScrollMagic.Scene({\n          triggerElement: slide \/\/ trigger CSS animation when header is in the middle of the viewport\n        })\n        .on(&quot;enter&quot;, function(event) {\n          $('#nav-dots').removeAttr('class');\n        })\n        .addTo(controller);\n    });\n\n    \/\/ SCENE 4 - parallax effect on each of the slides with bcg\n    \/\/ move bcg container when slide gets into the view\n    slides.forEach(function(slide, index) {\n\n      var $bcg = $(slide).find('.bcg');\n\n      var slideParallaxScene = new ScrollMagic.Scene({\n          triggerElement: slide,\n          triggerHook: 1,\n          duration: &quot;100%&quot;\n        })\n        .setTween(TweenMax.from($bcg, 1, {\n          y: '-40%',\n          autoAlpha: 0.3,\n          ease: Power0.easeNone\n        }))\n        .addTo(controller);\n    });\n\n    \/\/ SCENE 5 - parallax effect on the intro slide\n    \/\/ move bcg container when intro gets out of the the view\n\n    var introTl = new TimelineMax();\n\n    introTl\n      .to($('#intro header, .scroll-hint'), 0.2, {\n        autoAlpha: 0,\n        ease: Power1.easeNone\n      })\n      \/\/.to($('#intro .bcg'), 1.4, {y: '20%', ease:Power1.easeOut}, '-=0.2')\n      .to($('#intro'), 0.7, {\n        autoAlpha: 0.5,\n        ease: Power1.easeNone\n      }, 0);\n\n    var introScene = new ScrollMagic.Scene({\n        triggerElement: '#intro',\n        triggerHook: 0,\n        duration: &quot;100%&quot;\n      })\n      .setTween(introTl)\n      .addTo(controller);\n\n    \/\/ change behaviour of controller to animate scroll instead of jump\n    controller.scrollTo(function(newpos) {\n      TweenMax.to(window, 1, {\n        scrollTo: {\n          y: newpos\n        },\n        ease: Power1.easeInOut\n      });\n    });\n\n    \/\/  bind scroll to anchor links\n    $(document).on(&quot;click&quot;, &quot;a[href^='#']&quot;, function(e) {\n      var id = $(this).attr(&quot;href&quot;);\n      if ($(id).length &gt; 0) {\n        e.preventDefault();\n\n        \/\/ trigger scroll\n        controller.scrollTo(id);\n\n        \/\/ if supported by the browser we can even update the URL.\n        if (window.history &amp;&amp; window.history.pushState) {\n          history.pushState(&quot;&quot;, document.title, id);\n        }\n      }\n    });\n\n  }\n\n}(jQuery));<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1458,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[27,17,43,39],"class_list":["post-1457","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-gsap","tag-jquery","tag-menu","tag-tweenmax"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1457","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/comments?post=1457"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1457\/revisions"}],"predecessor-version":[{"id":1459,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1457\/revisions\/1459"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1458"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1457"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1457"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1457"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}