{"id":1197,"date":"2023-04-06T19:34:16","date_gmt":"2023-04-06T16:34:16","guid":{"rendered":"https:\/\/notes.profidev.online\/?p=1197"},"modified":"2023-04-06T19:34:18","modified_gmt":"2023-04-06T16:34:18","slug":"animation-slider-effect","status":"publish","type":"post","link":"https:\/\/notes.profidev.online\/ru\/slider\/1197\/","title":{"rendered":"Animation slider effect"},"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=\"Animation slider effect\" width=\"640\" height=\"360\" src=\"https:\/\/www.youtube.com\/embed\/d0GJCfB8K3o?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;div id=&quot;app&quot; class=&quot;wrapper&quot; v-cloak v-bind:class=&quot;{'is-previous': isPreviousSlide, 'first-load': isFirstLoad}&quot;&gt;\n    &lt;div class=&quot;slide-wrapper&quot; \n         v-for=&quot;(slide, index) in slides&quot; \n         v-bind:class=&quot;{ active: index === currentSlide }&quot;\n         v-bind:style=&quot;{ 'z-index': (slides.length - index), 'background-image': 'url(' + slide.bgImg + ')' }&quot;&gt;\n        &lt;div class=&quot;slide-inner&quot;&gt;\n            &lt;div class=&quot;slide-bg-text&quot;&gt;\n                &lt;p&gt;{{ slide.headlineFirstLine }}&lt;\/p&gt;\n                &lt;p&gt;{{ slide.headlineSecondLine }}&lt;\/p&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;slide-rect-filter&quot;&gt;\n                &lt;div class=&quot;slide-rect&quot; v-bind:style=&quot;{'border-image-source': 'url(' + slide.rectImg + ')'}&quot;&gt;&lt;\/div&gt;\n            &lt;\/div&gt;\n            &lt;div class=&quot;slide-content&quot;&gt;\n                &lt;h1 class=&quot;slide-content-text&quot;&gt;&lt;p&gt;{{ slide.headlineFirstLine }}&lt;\/p&gt;&lt;p&gt;{{ slide.headlineSecondLine }}&lt;\/p&gt;&lt;\/h1&gt;&lt;a class=&quot;slide-content-cta&quot;&gt;Call To Action&lt;\/a&gt;&lt;\/div&gt;\n            &lt;h2 class=&quot;slide-side-text&quot;&gt;&lt;span&gt;{{ slide.sublineFirstLine }} \/ &lt;\/span&gt;&lt;span&gt;{{ slide.sublineSecondLine }}&lt;\/span&gt;&lt;\/h2&gt;&lt;\/div&gt;\n    &lt;\/div&gt;\n&lt;div class=&quot;controls-container&quot;&gt;\n    &lt;button class=&quot;controls-button&quot; \n            v-for=&quot;(slide, index) in slides&quot;\n            v-bind:class=&quot;{ active: index === currentSlide }&quot;\n            v-on:click=&quot;updateSlide(index)&quot;&gt;{{ slide.headlineFirstLine }} {{ slide.headlineSecondLine }}&lt;\/button&gt;\n&lt;\/div&gt;\n&lt;div class=&quot;pagination-container&quot;&gt;\n    &lt;span class=&quot;pagination-item&quot;\n          v-for=&quot;(slide, index) in slides&quot;\n          v-bind:class=&quot;{ active: index === currentSlide }&quot;\n          v-on:click=&quot;updateSlide(index)&quot;&gt;&lt;\/span&gt;\n&lt;\/div&gt;\n&lt;\/div&gt;\n\n  &lt;script src=&quot;https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.1.8\/vue.min.js&quot;&gt;&lt;\/script&gt;<\/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;}\">html {\n  box-sizing: border-box;\n}\n\n*,\n*:before,\n*:after {\n  box-sizing: inherit;\n}\n\n.controls-button, .slide-side-text, .slide-content-cta {\n  font-family: &quot;Montserrat&quot;;\n  text-transform: uppercase;\n  color: #fff;\n  letter-spacing: 0.12rem;\n  font-size: 0.7rem;\n  line-height: 1;\n}\n\n[v-cloak] {\n  opacity: 0;\n}\n\nbody {\n  cursor: default;\n}\nbody ::-moz-selection {\n  background-color: rgba(46, 49, 52, 0.7);\n  color: #f5f5f1;\n}\nbody ::selection {\n  background-color: rgba(46, 49, 52, 0.7);\n  color: #f5f5f1;\n}\nbody ::-moz-selection {\n  background-color: rgba(46, 49, 52, 0.7);\n  color: #f5f5f1;\n}\n\n.wrapper {\n  height: calc(100vh - 50px);\n  min-height: 36rem;\n  position: relative;\n}\n@media (max-width: 630px) {\n  .wrapper {\n    height: 100vh;\n    min-height: 0;\n  }\n}\n\n.slide-wrapper {\n  background-size: cover;\n  height: 100%;\n  background-position: center center;\n  position: absolute;\n  width: 100%;\n  background-blend-mode: darken;\n}\n.slide-wrapper:nth-child(1) {\n  background-color: rgba(115, 129, 153, 0.4);\n}\n.slide-wrapper:nth-child(1):before {\n  background-color: rgba(115, 129, 153, 0.25);\n}\n.slide-wrapper:nth-child(1) .slide-content-text {\n  text-shadow: 2px 5px 45px rgba(85, 96, 113, 0.25);\n}\n.slide-wrapper:nth-child(2) {\n  background-color: rgba(144, 171, 184, 0.7);\n}\n.slide-wrapper:nth-child(2):before {\n  background-color: rgba(144, 171, 184, 0.3);\n}\n.slide-wrapper:nth-child(2) .slide-content-text {\n  text-shadow: 2px 5px 45px rgba(121, 142, 152, 0.2);\n}\n.slide-wrapper:nth-child(3) {\n  background-color: rgba(86, 125, 156, 0.5);\n}\n.slide-wrapper:nth-child(3):before {\n  background-color: rgba(86, 125, 156, 0.2);\n}\n.slide-wrapper:nth-child(3) .slide-content-text {\n  text-shadow: 2px 5px 55px rgba(57, 83, 103, 0.4);\n}\n.slide-wrapper:before {\n  content: &quot;&quot;;\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  z-index: 1;\n}\n.slide-inner {\n  position: relative;\n  z-index: 2;\n  height: 100%;\n  overflow: hidden;\n}\n.slide-bg-text {\n  font-family: &quot;Playfair Display&quot;;\n  color: #000;\n  font-size: 42vh;\n  line-height: 0.8;\n  opacity: 0.03;\n  font-weight: 900;\n  margin-top: -4rem;\n  position: absolute;\n  top: 50%;\n  left: 5vw;\n  transform: translateY(-50%);\n}\n.slide-bg-text &gt; p:last-child {\n  padding-left: 4rem;\n}\n.slide-content {\n  color: #fff;\n  margin-top: 5rem;\n  position: absolute;\n  top: 50%;\n  left: calc(13vw + (.7) * 48vh);\n  transform: translateY(-50%);\n  display: flex;\n  flex-direction: column;\n}\n@media (max-width: 1000px) {\n  .slide-content {\n    left: calc(13vw + 1rem);\n  }\n}\n@media (max-height: 730px) {\n  .slide-content {\n    top: 30%;\n    transform: translateY(-30%);\n    left: calc(9vw + (.7) * 16vw);\n  }\n}\n.slide-content-text {\n  font-family: &quot;Playfair Display&quot;;\n  font-size: 9rem;\n  letter-spacing: 0.2rem;\n  line-height: 0.87;\n  font-weight: 700;\n  will-change: auto;\n}\n@media (max-height: 790px) {\n  .slide-content-text {\n    font-size: 7rem;\n  }\n}\n@media (max-width: 1150px) {\n  .slide-content-text {\n    font-size: 7rem;\n  }\n}\n@media (max-width: 840px) {\n  .slide-content-text {\n    font-size: 5.5rem;\n  }\n}\n@media (max-width: 630px) {\n  .slide-content-text {\n    margin-bottom: 5.5rem;\n  }\n}\n@media (max-width: 500px) {\n  .slide-content-text {\n    font-size: 3.5rem;\n  }\n}\n.slide-content-text &gt; p:last-child {\n  padding-left: 3rem;\n}\n.slide-content-cta {\n  cursor: pointer;\n  align-self: flex-start;\n  margin-top: 4.5rem;\n  margin-left: calc((.3) * 48vh + 4.5rem);\n  padding: 0.9rem 2.2rem;\n  border-left: 1px solid #fff;\n  border-right: 1px solid #fff;\n  transition: 0.18s ease-in-out;\n  font-weight: 700;\n}\n@media (max-width: 1000px) {\n  .slide-content-cta {\n    background-color: rgba(255, 255, 255, 0.3);\n    padding-top: 1.2rem;\n    padding-bottom: 1.2rem;\n  }\n}\n@media (max-width: 630px) {\n  .slide-content-cta {\n    display: none;\n  }\n}\n.slide-content-cta:hover {\n  color: #000;\n  background-color: #fff;\n}\n.slide-rect {\n  height: 62vh;\n  width: 48vh;\n  border-image-slice: 10%;\n  position: absolute;\n  top: 50%;\n  transform: translateY(-50%);\n  left: 13vw;\n  border-width: 5vh;\n  border-style: solid;\n  box-shadow: 2px 2px 90px 30px rgba(41, 50, 61, 0.22);\n  will-change: auto;\n}\n@media (max-height: 790px) {\n  .slide-rect {\n    left: 9vw;\n    height: 20vw;\n    width: 16vw;\n    border-width: 5vh;\n  }\n}\n@media (max-height: 730px) {\n  .slide-rect {\n    top: 30%;\n    transform: translateY(-30%);\n  }\n}\n.slide-rect-filter {\n  filter: brightness(110%) contrast(110%) saturate(110%);\n}\n.slide-side-text {\n  position: absolute;\n  left: calc(13vw - 3rem);\n  -ms-writing-mode: tb-rl;\n      writing-mode: vertical-rl;\n  top: calc((50% - (62vh \/ 2)) + (5vh \/ 2));\n}\n@media (max-height: 790px) {\n  .slide-side-text {\n    left: calc(9vw - 3rem);\n    top: calc((50% - (20vw \/ 2)) + (5vh \/ 2));\n  }\n}\n@media (max-height: 730px) {\n  .slide-side-text {\n    top: calc((40% - (20vw \/ 2)) + (5vh \/ 2));\n  }\n}\n.slide-side-text &gt; span:first-child {\n  font-weight: 700;\n}\n.slide-side-text:after {\n  content: &quot;&quot;;\n  width: 1px;\n  background-color: #fff;\n  height: 40px;\n  display: block;\n  position: absolute;\n  top: calc(100% + 25px);\n  left: 50%;\n  transform: translateX(-50%);\n}\n\n.controls-container {\n  position: absolute;\n  z-index: 200;\n  display: flex;\n  bottom: 0;\n  right: 0;\n  align-items: flex-end;\n}\n@media (max-width: 630px) {\n  .controls-container {\n    display: none;\n  }\n}\n.controls-button {\n  cursor: pointer;\n  background-color: rgba(208, 206, 204, 0.32);\n  border: 0;\n  padding: 1.6rem 2.2rem;\n  flex-basis: 0;\n  flex-grow: 1;\n  min-width: 15rem;\n  transition: 0.25s ease-in-out;\n  outline: 0;\n}\n@media (max-width: 730px) {\n  .controls-button {\n    padding: 1.2rem 1.4rem;\n    min-width: 13rem;\n  }\n}\n.controls-button:not(.active):hover {\n  color: #000;\n  background-color: #fff;\n}\n.controls-button.active {\n  cursor: default;\n  font-weight: 700;\n  background-color: #3b3e45;\n  padding-top: 1.9rem;\n  padding-bottom: 1.9rem;\n  margin-bottom: -0.3rem;\n  position: relative;\n}\n@media (max-width: 730px) {\n  .controls-button.active {\n    padding-top: 1.4rem;\n    padding-bottom: 1.4rem;\n    margin-bottom: -0.15rem;\n  }\n}\n.controls-button.active:after {\n  content: &quot;&quot;;\n  background-color: #e3e3e3;\n  height: 5px;\n  width: calc(100% - 8px);\n  position: absolute;\n  top: 100%;\n  left: 4px;\n}\n.controls-button:not(.active) + .controls-button {\n  border-left: 1px solid rgba(255, 255, 255, 0.2);\n}\n\n.pagination-container {\n  position: absolute;\n  z-index: 200;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n  right: 2rem;\n  top: 50%;\n  transform: translateY(-50%);\n}\n@media (max-width: 920px) {\n  .pagination-container {\n    display: none;\n  }\n}\n.pagination-item {\n  width: 30px;\n  height: 1px;\n  background-color: rgba(255, 255, 255, 0.6);\n  transition: 0.18s ease-in-out;\n}\n.pagination-item + .pagination-item {\n  margin-top: 1rem;\n}\n.pagination-item.active {\n  background-color: #fff;\n  position: relative;\n  transform: translateX(-0.6rem);\n  width: 35px;\n}\n.pagination-item.active:after {\n  content: &quot;&quot;;\n  height: 4px;\n  width: 2px;\n  border-radius: 35%;\n  background-color: #fff;\n  display: inline-block;\n  position: absolute;\n  right: 0;\n  top: 50%;\n  transform: translateX(0.6rem) translateY(-50%);\n}\n.pagination-item:not(.active) {\n  cursor: pointer;\n}\n.pagination-item:not(.active):hover {\n  background-color: #fff;\n  width: 35px;\n}\n\n@-webkit-keyframes slideLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n\n@keyframes slideLeft {\n  from {\n    transform: translateX(0);\n  }\n  to {\n    transform: translateX(-100%);\n  }\n}\n@-webkit-keyframes slideRight {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@keyframes slideRight {\n  from {\n    transform: translateX(-100%);\n  }\n  to {\n    transform: translateX(0);\n  }\n}\n@-webkit-keyframes cutTextUp {\n  from {\n    -webkit-clip-path: inset(0 0 -10% 0);\n            clip-path: inset(0 0 -10% 0);\n  }\n  to {\n    -webkit-clip-path: inset(0 0 100% 0);\n            clip-path: inset(0 0 100% 0);\n  }\n}\n@keyframes cutTextUp {\n  from {\n    -webkit-clip-path: inset(0 0 -10% 0);\n            clip-path: inset(0 0 -10% 0);\n  }\n  to {\n    -webkit-clip-path: inset(0 0 100% 0);\n            clip-path: inset(0 0 100% 0);\n  }\n}\n@-webkit-keyframes cutTextDown {\n  from {\n    -webkit-clip-path: inset(100% 0 0 0);\n            clip-path: inset(100% 0 0 0);\n  }\n  to {\n    -webkit-clip-path: inset(-10% 0 -20% 0);\n            clip-path: inset(-10% 0 -20% 0);\n    opacity: 1;\n  }\n}\n@keyframes cutTextDown {\n  from {\n    -webkit-clip-path: inset(100% 0 0 0);\n            clip-path: inset(100% 0 0 0);\n  }\n  to {\n    -webkit-clip-path: inset(-10% 0 -20% 0);\n            clip-path: inset(-10% 0 -20% 0);\n    opacity: 1;\n  }\n}\n@-webkit-keyframes cutTextDownFromTop {\n  from {\n    -webkit-clip-path: inset(0 0 100% 0);\n            clip-path: inset(0 0 100% 0);\n  }\n  to {\n    -webkit-clip-path: inset(0 0 -30% 0);\n            clip-path: inset(0 0 -30% 0);\n    opacity: 1;\n  }\n}\n@keyframes cutTextDownFromTop {\n  from {\n    -webkit-clip-path: inset(0 0 100% 0);\n            clip-path: inset(0 0 100% 0);\n  }\n  to {\n    -webkit-clip-path: inset(0 0 -30% 0);\n            clip-path: inset(0 0 -30% 0);\n    opacity: 1;\n  }\n}\n@-webkit-keyframes rectMovement {\n  0% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n  }\n  60% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);\n    opacity: 0;\n  }\n}\n@keyframes rectMovement {\n  0% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n  }\n  60% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);\n    opacity: 0;\n  }\n}\n@media (max-height: 730px) {\n  @-webkit-keyframes rectMovement {\n    0% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n    60% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);\n      opacity: 0;\n    }\n  }\n  @keyframes rectMovement {\n    0% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n    60% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);\n      opacity: 0;\n    }\n  }\n}\n@-webkit-keyframes rectMovementFromRight {\n  0% {\n    transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%);\n    opacity: 0;\n  }\n  60% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n    opacity: 1;\n    @media (max-height: 730px) {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n  }\n}\n@keyframes rectMovementFromRight {\n  0% {\n    transform: translateX(calc(48vh)) rotate(12deg) translateY(-50%);\n    opacity: 0;\n  }\n  60% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n    opacity: 1;\n    @media (max-height: 730px) {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n  }\n}\n@media (max-height: 730px) {\n  @-webkit-keyframes rectMovementFromRight {\n    0% {\n      transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%);\n      opacity: 0;\n    }\n    60% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n      opacity: 1;\n    }\n  }\n  @keyframes rectMovementFromRight {\n    0% {\n      transform: translateX(calc(48vh)) rotate(12deg) translateY(-30%);\n      opacity: 0;\n    }\n    60% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n      opacity: 1;\n    }\n  }\n}\n@-webkit-keyframes rectMovementRight {\n  0% {\n    transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);\n  }\n  40% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n    opacity: 1;\n    @media (max-height: 730px) {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n  }\n}\n@keyframes rectMovementRight {\n  0% {\n    transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-50%);\n  }\n  40% {\n    opacity: 1;\n  }\n  100% {\n    transform: translateX(0) rotate(0) translateY(-50%);\n    opacity: 1;\n    @media (max-height: 730px) {\n      transform: translateX(0) rotate(0) translateY(-30%);\n    }\n  }\n}\n@media (max-height: 730px) {\n  @-webkit-keyframes rectMovementRight {\n    0% {\n      transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);\n    }\n    40% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n      opacity: 1;\n    }\n  }\n  @keyframes rectMovementRight {\n    0% {\n      transform: translateX(calc(-48vh + -13vw)) rotate(12deg) translateY(-30%);\n    }\n    40% {\n      opacity: 1;\n    }\n    100% {\n      transform: translateX(0) rotate(0) translateY(-30%);\n      opacity: 1;\n    }\n  }\n}\n@-webkit-keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n@keyframes fadeIn {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.slide-wrapper {\n  opacity: 0;\n  transition-delay: 1.4s;\n  transition-duration: 0s;\n  transition-property: opacity;\n  will-change: opacity, transform;\n}\n.slide-wrapper:not(.active) {\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s;\n  -webkit-animation-name: slideLeft;\n          animation-name: slideLeft;\n  -webkit-animation-duration: 0.9s;\n          animation-duration: 0.9s;\n  -webkit-animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);\n          animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);\n  pointer-events: none;\n}\n.slide-wrapper:not(.active) .slide-content-text &gt; p,\n.slide-wrapper:not(.active) .slide-side-text {\n  -webkit-animation-name: cutTextUp;\n          animation-name: cutTextUp;\n  -webkit-animation-duration: 0.5s;\n          animation-duration: 0.5s;\n  -webkit-animation-timing-function: ease-out;\n          animation-timing-function: ease-out;\n}\n.slide-wrapper:not(.active) .slide-rect {\n  -webkit-animation-name: rectMovement;\n          animation-name: rectMovement;\n  -webkit-animation-duration: 0.5s;\n          animation-duration: 0.5s;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n}\n.slide-wrapper.active {\n  transition-delay: 0s;\n  opacity: 1;\n}\n.slide-wrapper.active .slide-content-text &gt; p {\n  opacity: 0;\n  -webkit-animation-delay: 0.8s;\n          animation-delay: 0.8s;\n  -webkit-animation-name: cutTextDown;\n          animation-name: cutTextDown;\n  -webkit-animation-duration: 0.5s;\n          animation-duration: 0.5s;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n}\n.slide-wrapper.active .slide-rect {\n  opacity: 0;\n  -webkit-animation-name: rectMovementFromRight;\n          animation-name: rectMovementFromRight;\n  -webkit-animation-duration: 0.45s;\n          animation-duration: 0.45s;\n  -webkit-animation-timing-function: ease;\n          animation-timing-function: ease;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-delay: 0.9s;\n          animation-delay: 0.9s;\n}\n.is-previous .slide-wrapper:not(.active) {\n  -webkit-animation: none;\n          animation: none;\n}\n.is-previous .slide-wrapper:not(.active) .slide-rect {\n  -webkit-animation: none;\n          animation: none;\n}\n.is-previous .slide-wrapper.active {\n  transform: translateX(-100%);\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s;\n  -webkit-animation-name: slideRight;\n          animation-name: slideRight;\n  -webkit-animation-duration: 0.8s;\n          animation-duration: 0.8s;\n  -webkit-animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);\n          animation-timing-function: cubic-bezier(0.18, 0.54, 0.52, 0.93);\n}\n.is-previous .slide-wrapper.active .slide-rect {\n  opacity: 0;\n  -webkit-animation-name: rectMovementRight;\n          animation-name: rectMovementRight;\n  -webkit-animation-duration: 0.5s;\n          animation-duration: 0.5s;\n  -webkit-animation-timing-function: ease-out;\n          animation-timing-function: ease-out;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-delay: 0.9s;\n          animation-delay: 0.9s;\n}\n\n.first-load .slide-wrapper.active .slide-side-text,\n.first-load .slide-wrapper.active .slide-content-cta,\n.first-load .slide-wrapper.active .slide-rect,\n.first-load .controls-container {\n  opacity: 0;\n  -webkit-animation-name: fadeIn;\n          animation-name: fadeIn;\n  -webkit-animation-delay: 0.3s;\n          animation-delay: 0.3s;\n  -webkit-animation-duration: 0.3s;\n          animation-duration: 0.3s;\n  -webkit-animation-fill-mode: forwards;\n          animation-fill-mode: forwards;\n  -webkit-animation-timing-function: ease-in;\n          animation-timing-function: ease-in;\n}\n.first-load .slide-wrapper.active .slide-content-text &gt; p {\n  -webkit-animation-name: fadeIn;\n          animation-name: fadeIn;\n  -webkit-animation-delay: 0.5s;\n          animation-delay: 0.5s;\n  -webkit-animation-duration: 0.7s;\n          animation-duration: 0.7s;\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;}\">var app = new Vue({\n  el: '#app',\n  data: {\n      currentSlide: 0,\n      isPreviousSlide: false,\n      isFirstLoad: true,\n      slides: [\n          {\n              headlineFirstLine: &quot;Lorem&quot;,\n              headlineSecondLine: &quot;Vitaer&quot;,\n              sublineFirstLine: &quot;Nihil sub sole&quot;,\n              sublineSecondLine: &quot;novum&quot;,\n              bgImg: &quot;https:\/\/i.postimg.cc\/C5yvGSkm\/slide0.jpg&quot;,\n              rectImg: &quot;https:\/\/i.postimg.cc\/vTW0XkvM\/slide-rect0.jpg&quot;\n          },\n          {\n              headlineFirstLine: &quot;Nulla&quot;,\n              headlineSecondLine: &quot;Auctor&quot;,\n              sublineFirstLine: &quot;Il n'y a rien de neuf sous&quot;,\n              sublineSecondLine: &quot;le soleil&quot;,\n              bgImg: &quot;https:\/\/i.postimg.cc\/Qx34VNXM\/slide1.jpg&quot;,\n              rectImg: &quot;https:\/\/i.postimg.cc\/ryWZ8R2b\/slide-rect1.jpg&quot;\n          },\n          {\n              headlineFirstLine: &quot;Nullam&quot;,\n              headlineSecondLine: &quot;Ultricies&quot;,\n              sublineFirstLine: &quot;\u03a4\u03af\u03c0\u03bf\u03c4\u03b1 \u03ba\u03b1\u03b9\u03bd\u03bf\u03cd\u03c1\u03b3\u03b9\u03bf \u03ba\u03ac\u03c4\u03c9 \u03b1\u03c0\u03cc&quot;,\n              sublineSecondLine: &quot;\u03c4\u03bf\u03bd \u03ae\u03bb\u03b9\u03bf&quot;,\n              bgImg: &quot;https:\/\/i.postimg.cc\/t4RBtrnQ\/slide2.jpg&quot;,\n              rectImg: &quot;https:\/\/i.postimg.cc\/3JFLGMRF\/slide-rect2.jpg&quot;\n          }\n      ]\n  },\nmounted: function () {\n  var productRotatorSlide = document.getElementById(&quot;app&quot;);\n      var startX = 0;\n      var endX = 0;\n\n      productRotatorSlide.addEventListener(&quot;touchstart&quot;, (event) =&gt; startX = event.touches[0].pageX);\n\n      productRotatorSlide.addEventListener(&quot;touchmove&quot;, (event) =&gt; endX = event.touches[0].pageX);\n\n      productRotatorSlide.addEventListener(&quot;touchend&quot;, function(event) {\n          var threshold = startX - endX;\n\n          if (threshold &lt; 150 &amp;&amp; 0 &lt; this.currentSlide) {\n              this.currentSlide--;\n          }\n          if (threshold &gt; -150 &amp;&amp; this.currentSlide &lt; this.slides.length - 1) {\n              this.currentSlide++;\n          }\n      }.bind(this));\n},\n  methods: {\n      updateSlide(index) {\n          index &lt; this.currentSlide ? this.isPreviousSlide = true : this.isPreviousSlide = false;\n          this.currentSlide = index;\n          this.isFirstLoad = false;\n      }\n  }\n})<\/pre><\/div>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":1198,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[21],"tags":[68],"class_list":["post-1197","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-slider","tag-vuejs"],"_links":{"self":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1197","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=1197"}],"version-history":[{"count":2,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1197\/revisions"}],"predecessor-version":[{"id":1200,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/posts\/1197\/revisions\/1200"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media\/1198"}],"wp:attachment":[{"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/media?parent=1197"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/categories?post=1197"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notes.profidev.online\/ru\/wp-json\/wp\/v2\/tags?post=1197"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}