{"id":1273,"date":"2023-04-14T18:13:38","date_gmt":"2023-04-14T15:13:38","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1273"},"modified":"2023-04-11T18:17:21","modified_gmt":"2023-04-11T15:17:21","slug":"agency-website","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/other\/1273\/","title":{"rendered":"Agency website"},"content":{"rendered":"\n
<\/figure>\n\n\n\n
  <div class='cursor'>\n    <div class='cursor_point'><\/div>\n    <div class='cursor_outer'><\/div>\n  <\/div>\n  <div class='portfolio'>\n    <div class='portfolio_home'>\n      <div style='position: fixed; z-index: -99; width: 2320px; height: 180%; left: 0;top: -38%;'>\n        <iframe frameborder="0" height="100%" width="100%" src="https:\/\/youtube.com\/embed\/tz8Puc4W5BM?autoplay=1&controls=0&showinfo=0&autohide=1&mute=1"><\/iframe>\n      <\/div>\n      <div class='portfolio_home__header'>\n        <div class='hamburger trigger'>\n          <div class='hamburger_part'><\/div>\n          <div class='hamburger_part'><\/div>\n          <div class='hamburger_part'><\/div>\n        <\/div>\n      <\/div>\n      <div class='portfolio_home__title'>\n        <div class='logo'>\n          <img class='first' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/clogotemp.png'>\n          <img class='second' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/clogotemp2.png'>\n          <div class='page_portfolio'>\n            <div class='portfolio_home__header'>\n              <div class='logoMain'>\n                <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/cagencylogo.png'>\n              <\/div>\n              <div class='nav'>\n                <ul>\n                  <li class='active trigger'>Our work<\/li>\n                  <li class='trigger'>Our services<\/li>\n                  <li class='trigger'>About us<\/li>\n                  <li class='trigger'>Contact us<\/li>\n                <\/ul>\n              <\/div>\n              <div class='number black'>0161 345 3464<\/div>\n              <div class='hamburger black trigger'>\n                <div class='hamburger_part'><\/div>\n                <div class='hamburger_part'><\/div>\n                <div class='hamburger_part'><\/div>\n              <\/div>\n            <\/div>\n            <div class='slider_note'>\n              Drag through our work\n            <\/div>\n            <div class='portfolio_home__work'>\n              <div class='portfolio_home__header work'>\n                <div class='back'>\n                  <img class='trigger' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowDown.png'>\n                <\/div>\n                <div class='logoMain'>\n                  <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/slogowhite.png'>\n                <\/div>\n                <div class='nav'>\n                  <ul>\n                    <li class='active trigger'>Our work<\/li>\n                    <li class='trigger'>Our services<\/li>\n                    <li class='trigger'>About us<\/li>\n                    <li class='trigger'>Contact us<\/li>\n                  <\/ul>\n                <\/div>\n                <div class='number white'>0161 345 3464<\/div>\n                <div class='hamburger white trigger'>\n                  <div class='hamburger_part'><\/div>\n                  <div class='hamburger_part'><\/div>\n                  <div class='hamburger_part'><\/div>\n                <\/div>\n              <\/div>\n              <div class='slideClone'>\n                <div class='title f'>\n                  .01\n                  <br>\n                  My Protein\n                <\/div>\n                <div class='image'>\n                  <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/fud.png'>\n                  <div class='overlay'><\/div>\n                  <div class='cats'>ADVERTISING   DESIGN   DIGITAL<\/div>\n                  <div class='title'>My protein rebrand and digital campaign<\/div>\n                <\/div>\n              <\/div>\n              <div class='slideClone'>\n                <div class='title f'>\n                  .02\n                  <br>\n                  Nike Air Max\n                <\/div>\n                <div class='image'>\n                  <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/nike.png'>\n                  <div class='overlay'><\/div>\n                  <div class='cats'>ADVERTISING   DESIGN   DIGITAL   STRATEGY<\/div>\n                  <div class='title'>Nike Air max video campaign 2017<\/div>\n                <\/div>\n              <\/div>\n              <div class='slideClone'>\n                <div class='title f'>\n                  .03\n                  <br>\n                  Apple Watch\n                <\/div>\n                <div class='image'>\n                  <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/rpo.jpg'>\n                  <div class='overlay'><\/div>\n                  <div class='cats'>ADVERTISING   DIGITAL   STRATEGY<\/div>\n                  <div class='title'>The new Apple Watch digital campaign 2019<\/div>\n                <\/div>\n              <\/div>\n              <div class='slideClone'>\n                <div class='title f'>\n                  .04\n                  <br>\n                  Jade Teriyaki\n                <\/div>\n                <div class='image'>\n                  <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/orangetyhing.png'>\n                  <div class='overlay'><\/div>\n                  <div class='cats'>ADVERTISING   DESIGN   DIGITAL   STRATEGY<\/div>\n                  <div class='title'>Another agency did this campaign, not us<\/div>\n                <\/div>\n              <\/div>\n              <img class='scroll' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowDown.png'>\n            <\/div>\n            <div class='portfolio_home__slider'>\n              <div class='slider_inner'>\n                <div class='slider_inner__slide'>\n                  <div class='title'>\n                    .01\n                    <br>\n                    My Protein\n                  <\/div>\n                  <div class='image'>\n                    <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/fud.png'>\n                    <div class='overlay'><\/div>\n                    <div class='cats'>ADVERTISING   DESIGN   DIGITAL<\/div>\n                    <div class='title'>My protein rebrand and digital campaign<\/div>\n                    <div class='button'>\n                      View case study\n                      <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowbblakc.png'>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div class='slider_inner__slide'>\n                  <div class='title'>\n                    .02\n                    <br>\n                    Nike Air Max\n                  <\/div>\n                  <div class='image'>\n                    <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/nike.png'>\n                    <div class='overlay'><\/div>\n                    <div class='cats'>ADVERTISING   DESIGN   DIGITAL   STRATEGY<\/div>\n                    <div class='title'>Nike Air max video campaign 2017<\/div>\n                    <div class='button'>\n                      View case study\n                      <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowbblakc.png'>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div class='slider_inner__slide'>\n                  <div class='title'>\n                    .03\n                    <br>\n                    Apple Watch\n                  <\/div>\n                  <div class='image'>\n                    <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/rpo.jpg'>\n                    <div class='overlay'><\/div>\n                    <div class='cats'>ADVERTISING   DIGITAL   STRATEGY<\/div>\n                    <div class='title'>The new Apple Watch digital campaign 2019<\/div>\n                    <div class='button'>\n                      View case study\n                      <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowbblakc.png'>\n                    <\/div>\n                  <\/div>\n                <\/div>\n                <div class='slider_inner__slide'>\n                  <div class='title'>\n                    .04\n                    <br>\n                    Jade Teriyaki\n                  <\/div>\n                  <div class='image'>\n                    <img draggable='false' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/orangetyhing.png'>\n                    <div class='overlay'><\/div>\n                    <div class='cats'>ADVERTISING   DESIGN   DIGITAL   STRATEGY<\/div>\n                    <div class='title'>Another agency did this campaign, not us<\/div>\n                    <div class='button'>\n                      View case study\n                      <img src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowbblakc.png'>\n                    <\/div>\n                  <\/div>\n                <\/div>\n              <\/div>\n            <\/div>\n          <\/div>\n        <\/div>\n        <hr>\n        <h1>\n          We are an Independent\n          <span>Creative Advertising<\/span>\n          &amp;\n          <span>Branding Agency<\/span>\n        <\/h1>\n        <img class='trigger' src='https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/arrowDown.png'>\n      <\/div>\n    <\/div>\n  <\/div>\n  \n <script src="https:\/\/code.jquery.com\/jquery-2.2.4.min.js"><\/script><\/pre><\/div>\n\n\n\n
@font-face {\n  font-family: "Hurme";\n  src: url("https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/HurmeGeometricSans2-Bold.woff2") format("woff2"), url("https:\/\/s3-us-west-2.amazonaws.com\/s.cdpn.io\/217233\/HurmeGeometricSans2-Bold.woff") format("woff");\n  font-weight: bold;\n  font-style: normal;\n}\n.content {\n  z-index: 2;\n  position: absolute;\n  background: red;\n  top: 100%;\n}\n\n* {\n  box-sizing: border-box;\n}\n\nbody {\n  background: #07101d;\n  background-size: cover !important;\n  font-family: "Hurme";\n  font-weight: 500;\n  -webkit-user-select: none;\n     -moz-user-select: none;\n      -ms-user-select: none;\n          user-select: none;\n  margin: 0;\n  padding: 40px;\n  height: 100vh;\n}\nbody iframe {\n  opacity: 0;\n  -webkit-animation: fadeInVid 1s 1s forwards;\n          animation: fadeInVid 1s 1s forwards;\n}\nbody .portfolio .slider_note {\n  width: 100%;\n  position: absolute;\n  color: black;\n  left: 0;\n  top: 640px;\n  z-index: 2;\n  text-align: center;\n}\nbody .portfolio .slideClone {\n  width: 700px;\n  height: 450px;\n  margin: 0 auto;\n  top: 160px;\n  display: none;\n  position: fixed;\n  left: 0;\n  transition: all 0.5s;\n  right: 0;\n}\nbody .portfolio .slideClone .overlay,\nbody .portfolio .slideClone .cats,\nbody .portfolio .slideClone .title {\n  opacity: 1 !important;\n}\nbody .portfolio .slideClone .button {\n  display: none;\n}\nbody .portfolio .slideClone .title {\n  font-weight: 800;\n  color: #ffdc25;\n  position: relative;\n  z-index: 10;\n  font-size: 22px;\n  transform-style: preserve-3d;\n  left: 0;\n}\nbody .portfolio .slideClone .f {\n  position: relative;\n  top: 0;\n  transition: all 0.7s 0s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio .slideClone .image {\n  position: relative;\n  margin-top: 10px;\n  padding: 94px 94px;\n  height: 380px;\n  transform-style: preserve-3d;\n}\nbody .portfolio .slideClone .image img {\n  position: absolute;\n  left: 0;\n  z-index: -1;\n  top: 0;\n  transition: all 0.8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);\n  height: 100%;\n}\nbody .portfolio .slideClone .image .overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(11, 18, 27, 0.6);\n  z-index: -1;\n  opacity: 0;\n  transition: opacity 0.1s, transform 0.8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio .slideClone .image .cats {\n  color: #ffdc25;\n  font-weight: 700;\n  font-size: 12px;\n  transform-style: preserve-3d;\n  opacity: 0;\n  left: 0;\n  position: relative;\n  transition: all 0.8s 0.16s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio .slideClone .image .title {\n  font-weight: 800;\n  color: white;\n  width: 350px;\n  font-size: 28px;\n  margin-top: 10px;\n  line-height: 35px;\n  transform-style: preserve-3d;\n  position: relative;\n  transition: all 0.6s 0.2s;\n  margin: 22px 0 16px 0;\n  opacity: 0;\n}\nbody .portfolio .slideClone .image .button {\n  color: #07101d;\n  font-size: 14px;\n  cursor: pointer;\n  margin-top: 14px;\n  background: #ffdc25;\n  float: left;\n  padding: 12px 20px;\n  transform-style: preserve-3d;\n  position: relative;\n  transition: all 0.6s 0.3s;\n  opacity: 0;\n}\nbody .portfolio_home__work {\n  background: transparent;\n  padding: 40px;\n  position: fixed;\n  width: 100%;\n  z-index: 3;\n  position: fixed;\n  height: 100%;\n  pointer-events: none;\n  opacity: 0;\n  top: 0;\n  z-index: 4;\n  left: 0;\n  -webkit-clip-path: polygon(calc(50% - 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% - 353px) 225px);\n          clip-path: polygon(calc(50% - 353px) 613px, calc(50% + 359px) 613px, calc(50% + 359px) 226px, calc(50% - 353px) 225px);\n  transition: opacity 0.5s 0.67s, -webkit-clip-path 0.8s 0.1s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__work.expand {\n  -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);\n          clip-path: polygon(0 100%, 100% 100%, 100% 0%, 0 0%);\n  pointer-events: all;\n  opacity: 1;\n  transition: opacity 0.1s, -webkit-clip-path 0.8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__work.expand .scroll {\n  opacity: 1;\n  transition: all 0.8s 0.5s;\n}\nbody .portfolio_home__work.expand .slideClone img {\n  transition: all 0.8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);\n  transform: scale(2.9);\n}\nbody .portfolio_home__work.expand .slideClone .overlay {\n  transition: opacity 0.1s, transform 0.8s 0.23s cubic-bezier(0.79, -0.01, 0, 0.99);\n  transform: scale(2.9);\n}\nbody .portfolio_home__work.expand .slideClone .title.f {\n  position: relative;\n  top: 72px;\n  left: 0;\n  transition: all 0.8s 0.4s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__work.expand .slideClone .cats, body .portfolio_home__work.expand .slideClone .title {\n  left: -93px;\n  position: relative;\n}\nbody .portfolio_home__work.expand .slideClone .cats {\n  transition: all 0.8s 0.16s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__work.expand .slideClone .title {\n  transition: all 0.8s 0.19s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__slider {\n  position: relative;\n  transform: translateX(-800px);\n  perspective: 900px;\n  perspective-origin: 50% 200px;\n}\nbody .portfolio_home__slider .slider_inner {\n  transform: translateY(120px);\n  position: absolute;\n  left: 0;\n  right: 0;\n  width: 30000px;\n  transition: all 0.8s cubic-bezier(0, 0.6, 0.25, 1);\n  transform-style: preserve-3d;\n  pointer-events: none;\n}\nbody .portfolio_home__slider .slider_inner.in {\n  pointer-events: all;\n}\nbody .portfolio_home__slider .slider_inner.in .slider_inner__slide {\n  -webkit-animation: sliderIn 1.1s 0.65s cubic-bezier(0.79, -0.01, 0, 0.99) forwards;\n          animation: sliderIn 1.1s 0.65s cubic-bezier(0.79, -0.01, 0, 0.99) forwards;\n}\nbody .portfolio_home__slider .slider_inner__slide {\n  width: 700px;\n  height: 750px;\n  float: left;\n  margin-right: 60px;\n  transition: all 0.5s;\n  transform-style: preserve-3d;\n  transform: scale(0);\n}\nbody .portfolio_home__slider .slider_inner__slide .title {\n  font-weight: 800;\n  color: #060608;\n  position: relative;\n  font-size: 22px;\n  transform-style: preserve-3d;\n}\nbody .portfolio_home__slider .slider_inner__slide:nth-of-type(2) .image .overlay,\nbody .portfolio_home__slider .slider_inner__slide:nth-of-type(2) .image .cats,\nbody .portfolio_home__slider .slider_inner__slide:nth-of-type(2) .image .title,\nbody .portfolio_home__slider .slider_inner__slide:nth-of-type(2) .image .button {\n  opacity: 1;\n}\nbody .portfolio_home__slider .slider_inner__slide .image {\n  position: relative;\n  margin-top: 10px;\n  padding: 94px 94px;\n  height: 380px;\n  transform-style: preserve-3d;\n}\nbody .portfolio_home__slider .slider_inner__slide .image img {\n  position: absolute;\n  left: 0;\n  z-index: -1;\n  top: 0;\n  height: 100%;\n}\nbody .portfolio_home__slider .slider_inner__slide .image .overlay {\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  background: rgba(11, 18, 27, 0.7);\n  z-index: -1;\n  opacity: 0;\n  transition: opacity 0.1s, transform 0.8s 0.7s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\nbody .portfolio_home__slider .slider_inner__slide .image .cats {\n  color: #ffdc25;\n  font-weight: 700;\n  font-size: 12px;\n  left: 0;\n  transition: all 0.8s 0.16s cubic-bezier(0.79, -0.01, 0, 0.99);\n  transform-style: preserve-3d;\n  opacity: 0;\n}\nbody .portfolio_home__slider .slider_inner__slide .image .title {\n  font-weight: 800;\n  color: white;\n  width: 350px;\n  font-size: 28px;\n  margin-top: 10px;\n  line-height: 35px;\n  transform-style: preserve-3d;\n  position: relative;\n  transition: all 0.6s 0.2s;\n  margin: 22px 0 16px 0;\n  opacity: 0;\n}\nbody .portfolio_home__slider .slider_inner__slide .image .button {\n  color: #07101d;\n  font-size: 14px;\n  cursor: pointer;\n  margin-top: 14px;\n  background: #ffdc25;\n  float: left;\n  padding: 12px 40px 14px 20px;\n  transform-style: preserve-3d;\n  position: relative;\n  transition: all 0.6s 0.3s;\n  opacity: 0;\n}\nbody .portfolio_home__slider .slider_inner__slide .image .button img {\n  width: 14px;\n  height: auto;\n  position: absolute;\n  right: 17px;\n  left: auto;\n  top: 16px;\n}\nbody .portfolio_home__header {\n  float: right;\n  width: 100%;\n}\nbody .portfolio_home__header.work {\n  position: relative;\n  z-index: 1;\n}\nbody .portfolio_home__header.work ul li {\n  color: #fff;\n}\nbody .portfolio_home__header.work ul li.active {\n  border-bottom: 2px solid #ffdc25;\n  color: #ffdc25;\n}\nbody .portfolio_home__header ul {\n  padding: 0;\n  margin: 0;\n}\nbody .portfolio_home__header ul li {\n  display: inline;\n  margin-right: 10px;\n}\nbody .portfolio_home__header ul li.active {\n  font-size: 20px;\n  border-bottom: 2px solid #07101d;\n}\nbody .portfolio_home__header ul li:hover {\n  border-bottom: 2px solid #07101d;\n}\nbody .portfolio_home__header .nav {\n  position: absolute;\n  left: 0;\n  right: 0;\n  margin: auto;\n  width: 400px;\n  padding: 0;\n}\nbody .portfolio_home__header .logoMain {\n  float: left;\n  position: relative;\n  top: -3px;\n  width: 280px;\n}\nbody .portfolio_home__header .logoMain img {\n  width: 100% !important;\n  -webkit-animation: none !important;\n          animation: none !important;\n  opacity: 1 !important;\n}\nbody .portfolio_home__header .number {\n  color: white;\n  -webkit-animation: fade 1s 2.3s forwards;\n  animation: fade 1s 2.3s forwards;\n  opacity: 0;\n  float: right;\n  position: relative;\n  margin-right: 80px;\n  top: 5px;\n}\nbody .portfolio_home__header .number.black {\n  color: #07101d;\n  -webkit-animation: none;\n          animation: none;\n  opacity: 1;\n}\nbody .portfolio_home__header .number.white {\n  color: #fff;\n  -webkit-animation: none;\n          animation: none;\n  opacity: 1;\n}\nbody .portfolio_home__header .hamburger {\n  float: right;\n  position: absolute;\n  right: 40px;\n  top: 45px;\n  -webkit-animation: fade 1s 2.3s forwards;\n          animation: fade 1s 2.3s forwards;\n  opacity: 0;\n  height: 20px;\n  width: 30px;\n}\nbody .portfolio_home__header .hamburger.black {\n  opacity: 1 !important;\n}\nbody .portfolio_home__header .hamburger.black .hamburger_part {\n  background: #07101d;\n}\nbody .portfolio_home__header .hamburger.white {\n  opacity: 1 !important;\n  right: 0;\n  top: 5px;\n}\nbody .portfolio_home__header .hamburger.white .hamburger_part {\n  background: #ffdc25;\n}\nbody .portfolio_home__header .hamburger_part {\n  width: 30px;\n  height: 2px;\n  position: absolute;\n  background: #ffdc25;\n  right: 0;\n}\nbody .portfolio_home__header .hamburger_part:nth-of-type(1) {\n  top: 0px;\n}\nbody .portfolio_home__header .hamburger_part:nth-of-type(2) {\n  top: 8px;\n}\nbody .portfolio_home__header .hamburger_part:nth-of-type(3) {\n  top: 16px;\n}\nbody .portfolio_home__header .hamburger_part:last-child {\n  width: 20px;\n}\nbody .portfolio_home__title {\n  position: absolute;\n  bottom: 80px;\n  left: 80px;\n  max-width: 460px;\n}\nbody .portfolio_home__title .logo {\n  margin-bottom: 30px;\n}\nbody .portfolio_home__title .logo img.first {\n  margin-right: 0px;\n  position: relative;\n  top: 3px;\n  width: 135px;\n  opacity: 0;\n  -webkit-animation: fade 1s 1s forwards;\n  animation: fade 1s 1s forwards;\n}\nbody .portfolio_home__title .logo img.first.out {\n  -webkit-animation: fadeOut 0.4s 0.6s forwards;\n          animation: fadeOut 0.4s 0.6s forwards;\n  opacity: 1;\n}\nbody .portfolio_home__title .logo img.second {\n  width: 140px;\n  -webkit-animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;\n          animation: spark 1.3s 1.1s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;\n  -webkit-clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n          clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n}\nbody .portfolio_home__title hr {\n  width: 80px;\n  background: #ffdc25;\n  height: 2px;\n  border: none;\n  position: absolute;\n  left: 0;\n  width: 0;\n  top: 77px;\n  -webkit-animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;\n          animation: hr 1.3s 1.4s cubic-bezier(0.76, 0.01, 0.21, 1.02) forwards;\n}\nbody .portfolio_home__title hr.out {\n  -webkit-animation: hrOut 0.4s 0.4s forwards;\n          animation: hrOut 0.4s 0.4s forwards;\n  width: 70px;\n}\nbody .portfolio_home__title .trigger {\n  opacity: 0;\n  -webkit-animation: fade 1s 2.5s forwards;\n          animation: fade 1s 2.5s forwards;\n}\nbody .portfolio_home__title .trigger.out {\n  -webkit-animation: fadeOut 0.4s 0s forwards;\n          animation: fadeOut 0.4s 0s forwards;\n}\nbody .portfolio_home__title h1 {\n  color: white;\n  margin-top: 60px;\n  line-height: 30px;\n  font-weight: normal;\n  font-size: 18px;\n  opacity: 0;\n  margin-bottom: 30px;\n  -webkit-animation: fade 1s 1.9s forwards;\n          animation: fade 1s 1.9s forwards;\n}\nbody .portfolio_home__title h1.out {\n  -webkit-animation: fadeOut 0.4s 0.2s forwards;\n          animation: fadeOut 0.4s 0.2s forwards;\n  opacity: 1;\n}\nbody .portfolio_home__title h1 span {\n  color: #ffdc25;\n}\nbody .portfolio_home__title .page_portfolio {\n  background: #ffdc25;\n  padding: 40px;\n  position: fixed;\n  width: 100%;\n  z-index: 3;\n  position: fixed;\n  height: 100%;\n  opacity: 0;\n  top: 0;\n  left: 0;\n  -webkit-clip-path: polygon(226px calc(100% - 262px), 359px calc(100% - 262px), 359px calc(100% - 309px), 226px calc(100% - 309px));\n          clip-path: polygon(226px calc(100% - 262px), 359px calc(100% - 262px), 359px calc(100% - 309px), 226px calc(100% - 309px));\n  transition: opacity 0.6s 0.2s, -webkit-clip-path 1s 0.6s cubic-bezier(0.79, -0.01, 0, 0.99);\n  transition: opacity 0.6s 0.2s, clip-path 1s 0.6s cubic-bezier(0.79, -0.01, 0, 0.99);\n  transition: opacity 0.6s 0.2s, clip-path 1s 0.6s cubic-bezier(0.79, -0.01, 0, 0.99), -webkit-clip-path 1s 0.6s cubic-bezier(0.79, -0.01, 0, 0.99);\n}\n\n@-webkit-keyframes sliderIn {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n\n@keyframes sliderIn {\n  from {\n    transform: scale(0);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n@-webkit-keyframes fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fade {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@-webkit-keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@keyframes fadeOut {\n  from {\n    opacity: 1;\n  }\n  to {\n    opacity: 0;\n  }\n}\n@-webkit-keyframes fadeInVid {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.1;\n  }\n}\n@keyframes fadeInVid {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 0.1;\n  }\n}\n@-webkit-keyframes hr {\n  from {\n    width: 0;\n  }\n  to {\n    width: 70px;\n  }\n}\n@keyframes hr {\n  from {\n    width: 0;\n  }\n  to {\n    width: 70px;\n  }\n}\n@-webkit-keyframes hrOut {\n  from {\n    width: 70px;\n  }\n  to {\n    width: 0px;\n  }\n}\n@keyframes hrOut {\n  from {\n    width: 70px;\n  }\n  to {\n    width: 0px;\n  }\n}\n@-webkit-keyframes spark {\n  from {\n    -webkit-clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n            clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n  }\n  to {\n    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);\n            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);\n  }\n}\n@keyframes spark {\n  from {\n    -webkit-clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n            clip-path: polygon(0 0, 0% 0%, 0% 100%, 0% 100%);\n  }\n  to {\n    -webkit-clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);\n            clip-path: polygon(0 0, 100% 0%, 100% 100%, 0% 100%);\n  }\n}\n.scroll {\n  position: absolute;\n  left: calc(50% - 348px);\n  top: 458px;\n  transition: all 0.8s 0s;\n  opacity: 0;\n}\n\n.back {\n  position: absolute;\n  height: 100vh;\n}\n.back img {\n  -webkit-animation: none !important;\n          animation: none !important;\n  opacity: 1 !important;\n  transform: rotate(90deg);\n  bottom: 73px !important;\n  position: absolute;\n}<\/pre><\/div>\n\n\n\n
$('.trigger').click(function () {\n  $('.page_portfolio').css('opacity', '1');\n  $('.page_portfolio').css('clip-path', 'polygon(0 100%, 100% 100%, 100% 0%, 0 0%)');\n  $('.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger').addClass('out');\n  $('.slider_inner').addClass('in');\n  setTimeout(function () {\n    $('.slider_inner').click();\n\n  }, 2500);\n});\n\nintroComplete = false;\n\nsetTimeout(function () {\n  introComplete = true;\n}, 2500);\n\nvar scrollPosition = 0;\nwindow.addEventListener('wheel', function (e) {\n\n  if (e.deltaY > 0) {\n    scrollPosition += 10;\n    $('.content').css('top', -scrollPosition + 'px');\n    console.log(e.deltaY);\n    if (introComplete) {\n      $('.page_portfolio').css('opacity', '1');\n      $('.page_portfolio').css('clip-path', 'polygon(0 100%, 100% 100%, 100% 0%, 0 0%)');\n      $('.logo img, .portfolio_home__title h1, .portfolio_home__title hr, .portfolio_home__title img.trigger').addClass('out');\n      $('.slider_inner').addClass('in');\n      setTimeout(function () {\n        $('.slider_inner').click();\n\n      }, 2000);\n\n\n    }\n  } else {\n    scrollPosition -= 10;\n  }\n});\n\n$('.button').click(function () {\n  $(this).parent().addClass('clicked');\n  $(this).parent().parent().parent().addClass('clicked');\n  \/\/$('.portfolio_home__work').css('opacity', 1);\n  $('.portfolio_home__work').addClass('expand');\n\n});\n\n\/\/ Gross but only a demo\n\n$(window).resize(function () {\n  $('.slider_inner').css('left', $(document).width() \/ 2 - $('.slider_inner__slide').width() \/ 2);\n});\n\n$('.slider_inner').css('left', $(document).width() \/ 2 - $('.slider_inner__slide').width() \/ 2);\n\nvar dragging = false;\nvar endPosition = 0;\nvar threshold = 100;\n\n$('.slider_inner').click(function () {\n  $('.slider_inner__slide').css('animation', 'none');\n  $('.slider_inner__slide').css('transform', 'rotateY(0deg) scale(1)');\n});\n$('.slider_inner').mousedown(function (e) {\n  initX = e.clientX;\n  dragging = true;\n  \/\/$('.slider_inner__slide').css('animation', 'none')\n  cursor.style.transition = `transform 0s 0s`;\n\n  console.log(cursor);\n});\n\n$('.slider_inner').mousemove(function (e) {\n\n  if (dragging) {\n    let mouseX = e.clientX;\n    difference = mouseX - initX;\n\n\n    \/\/$('.slider_inner__slide').css('transform', 'rotateY(' + direction + pps \/ 110 + 'deg) scale(1)')\n    position = parseInt($('.slider_inner').css('transform').split(',')[4]);\n    \/\/console.log('position is ' + position)\n    $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('opacity', 1 - Math.abs(difference \/ 200));\n\n    $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('transition', 'all .2s');\n\n    $('.slider_inner').css('transform', `translateX(${difference + endPosition}px) translateY(120px)`);\n\n\n  }\n});\n\n\/\/ 520 -40 -600 -1150\n\n\/\/ 560 \n\n\nvar offset = 760;\nvar margin = 0;\n\nvar index = 1;\n\n$('.slider_inner').mouseup(function () {\n  cursor.style.transition = `transform ${cursorSettings.transitionTime} ${cursorSettings.transitionEase}, width ${cursorSettings.expandSpeed}s .2s, height ${cursorSettings.expandSpeed}s .2s, opacity 1s .2s`;\n  endPosition = parseInt($('.slider_inner').css('transform').split(',')[4]);\n\n\n  if (difference < -160) {\n    console.log('snap to next');\n    if (index < 3) {\n      index++;\n      var threshold = offset - (offset + margin) * index;\n      $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);\n      endPosition = threshold;\n\n    } else {\n      var threshold = offset - (offset + margin) * index;\n      $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);\n      endPosition = threshold;\n\n    }\n\n  } else {\n    if (difference > 160) {\n      if (index > 0) {\n        index--;\n        var threshold = offset - (offset + margin) * index;\n        $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);\n        endPosition = threshold;\n\n      } else {\n        var threshold = offset - (offset + margin) * index;\n        $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);\n        endPosition = threshold;\n\n      }\n\n    } else {\n      var threshold = offset - (offset + margin) * index;\n      $('.slider_inner').css('transform', `translateX(${threshold}px) translateY(120px)`);\n      endPosition = threshold;\n\n    }\n  }\n\n  dragging = false;\n  console.log('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ')');\n  $('.slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .overlay, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .title, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .cats, .slider_inner__slide:nth-of-type(' + parseInt(index + 1) + ') .image .button').css('opacity', 1);\n  $('.slider_inner__slide').css('transform', 'rotateY(0deg) scale(1)');\n  $('.slideClone').hide();\n  $('.slideClone:nth-of-type(' + parseInt(index + 2) + ')').show();\n  difference = 0;\n});\n\n\/\/ https:\/\/gist.github.com\/ripper234\/5757309\n\nfunction drawMouseSpeedDemo() {\n  var mrefreshinterval = 30; \/\/ update display every 500ms\n  var lastmousex = -1;\n  var lastmousey = -1;\n  var lastmousetime;\n  var mousetravel = 0;\n  var mpoints = [];\n  var mpoints_max = 30;\n  var direction;\n\n  $('html').mousemove(function (e) {\n    var mousex = e.pageX;\n    var mousey = e.pageY;\n    if (lastmousex > -1) {\n      mousetravel += Math.max(Math.abs(mousex - lastmousex), Math.abs(mousey - lastmousey));\n    }\n    \/\/ console.log(mousex-lastmousex)\n\n    if (mousex - lastmousex > 0) {\n      direction = '+';\n    } else {\n      direction = '-';\n    }\n\n    \/\/console.log(direction);\n\n    lastmousex = mousex;\n    lastmousey = mousey;\n  });\n  var mdraw = function () {\n    var md = new Date();\n    var timenow = md.getTime();\n    if (lastmousetime && lastmousetime != timenow) {\n      var pps = Math.round(mousetravel \/ (timenow - lastmousetime) * 1000);\n      mpoints.push(pps);\n      if (mpoints.length > mpoints_max)\n      mpoints.splice(0, 1);\n      mousetravel = 0;\n      \/\/console.log(pps)\n      if (dragging) {\n        let velocity = .5 - pps \/ 40000;\n\n\n\n        $('.slider_inner__slide').css('transform', 'rotateY(' + direction + pps \/ 110 + 'deg) scale(1)');\n        $('.slider_inner__slide').css('transition', 'all ' + velocity + 's');\n        \/\/console.log(velocity)\n      }\n\n    }\n    lastmousetime = timenow;\n    setTimeout(mdraw, mrefreshinterval);\n  };\n  \/\/ We could use setInterval instead, but I prefer to do it this way\n  setTimeout(mdraw, mrefreshinterval);\n};\n\ndrawMouseSpeedDemo();\n\n\/* -------------------------------------------------\n\nDynamic cursor\n\n--------------------------------------------------- *\/\n\nconst cursorSettings = {\n  'class': 'dynamicCursor',\n  'size': '18',\n  'expandedSize': '40',\n  'expandSpeed': 0.4,\n  'background': 'rgba(161, 142, 218, 0.25)',\n  'opacity': '1',\n  'transitionTime': '1.4s',\n  'transitionEase': 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n  'borderWidth': '0',\n  'borderColor': 'black',\n  'iconSize': '11px',\n  'iconColor': 'white',\n  'triggerElements': {\n    'trigger': {\n      'className': 'trigger',\n      'icon': '<i class="fa fa-plus"><\/i>' },\n\n    'trigger2': {\n      'className': 'slider_inner',\n      'icon': '<i class="fa fa-arrows-h"><\/i>' } } };\n\n\n\n\n\nfunction dynamicCursor(options) {\n\n  document.write('<link rel="stylesheet" href="https:\/\/maxcdn.icons8.com\/fonts\/line-awesome\/1.1\/css\/line-awesome-font-awesome.min.css">');\n\n  var hold;\n  cursor = document.createElement('div');\n  let cursorIcon = document.createElement('div');\n\n  cursorIcon.classList.add('cursorIcon');\n  cursorIcon.style.position = 'absolute';\n  cursorIcon.style.fontFamily = 'Raleway';\n  cursorIcon.style.textTransform = 'uppercase';\n  cursorIcon.style.fontWeight = '800';\n  cursorIcon.style.textAlign = 'center';\n  cursorIcon.style.top = '50%';\n  cursorIcon.style.width = '100%';\n  cursorIcon.style.transform = 'translateY(-50%)';\n  cursorIcon.style.color = options.iconColor;\n  cursorIcon.style.fontSize = options.iconSize;\n  cursorIcon.style.opacity = 0;\n  cursorIcon.style.transition = `opacity ${options.expandSpeed}s`;\n\n  cursor.classList.add(options.class);\n  cursor.style.boxSizing = 'border-box';\n  cursor.style.width = `${options.size}px`;\n  cursor.style.height = `${options.size}px`;\n  cursor.style.borderRadius = `${options.expandedSize}px`;\n  cursor.style.opacity = 0;\n\n  cursor.style.pointerEvents = 'none';\n  cursor.style.zIndex = 999;\n  cursor.style.transition = `transform ${options.transitionTime} ${options.transitionEase}, width ${options.expandSpeed}s .2s, height ${options.expandSpeed}s .2s, opacity 1s .2s`;\n  cursor.style.border = `${options.borderWidth}px solid ${options.borderColor}`;\n  cursor.style.position = 'fixed';\n  cursor.style.background = options.background;\n\n  cursor.appendChild(cursorIcon);\n  document.body.appendChild(cursor);\n\n  setTimeout(function () {\n    cursor.style.opacity = options.opacity;\n  }, 500);\n\n  var idle;\n\n  document.onmousemove = e => {\n    console.log('test');\n    x = e.pageX;\n    y = e.pageY;\n\n    cursor.style.opacity = options.opacity;\n    clearInterval(idle);\n\n    idle = setTimeout(function () {\n      cursor.style.opacity = 0;\n    }, 4000);\n\n    cursor.style.top = '0';\n    cursor.style.left = '0';\n    cursor.style.transform = `translateX(calc(${x}px - 50%)) translateY(calc(${y}px - 50%))`;\n  };\n\n  for (i in options.triggerElements) {\n\n    let trigger = $(`.${options.triggerElements[i].className}`);\n\n    console.log(trigger);\n\n\n    let icon = options.triggerElements[i].icon;\n\n    if (!trigger) {\n      console.warn('You dont have any triggers');\n    } else {\n      trigger.each(function (el) {\n\n        console.log();\n        trigger[el].style.cursor = 'default';\n        trigger[el].addEventListener('mouseover', () => {\n          console.log('over');\n          cursor.style.width = `${options.expandedSize}px`;\n          cursor.style.height = `${options.expandedSize}px`;\n          cursorIcon.innerHTML = icon;\n          cursorIcon.style.opacity = 1;\n\n\n          console.log($(this));\n\n\n        });\n\n        trigger[el].addEventListener('mouseout', () => {\n          cursor.style.width = `${options.size}px`;\n          cursor.style.height = `${options.size}px`;\n          cursorIcon.style.opacity = 0;\n        });\n      });\n\n    }\n  }\n}\n\ndynamicCursor(cursorSettings);\n\n$('.back').click(function () {\n  $(this).parent().parent().removeClass('expand');\n});\n\n\/\/ make go back from page to slider again<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1274,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[67],"tags":[75],"class_list":["post-1273","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-other","tag-site"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1273","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=1273"}],"version-history":[{"count":1,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1273\/revisions"}],"predecessor-version":[{"id":1275,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1273\/revisions\/1275"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1274"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1273"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1273"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1273"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}