Lien d’origine: https://codepen.io/mrspok407/pen/NRxBWa
HTML:
<section class="sliderBackground2"> <div class="cont"> <div class="app initial"> <div class="app__bgimg"> <div class="app__bgimg-image app__bgimg-image--1"></div> </div> <div class="app__img"> <img onmousedown="return false" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/whiteTest4.png" alt="city" /> </div> <div class="app__text app__text--1"> <div class="app__text-line app__text-line--4">imperdiet</div> <div class="app__text-line app__text-line--3">ut le</div> <div class="app__text-line app__text-line--2">non tincidunt</div> <div class="app__text-line app__text-line--1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /> </div> </div> <div class="app__text app__text--2"> <div class="app__text-line app__text-line--4">habitant</div> <div class="app__text-line app__text-line--3">ut eget</div> <div class="app__text-line app__text-line--2">Nam imperdiet</div> <div class="app__text-line app__text-line--1"> <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/opus-attachment.png" alt="" /> </div> </div> </div> <div class="pages"> <ul class="pages__list"> <li data-target="1" class="pages__item pages__item--1 page__item-active" ></li> <li data-target="2" class="pages__item pages__item--2"></li> </ul> </div> </div> <a href="https://dribbble.com/shots/2936160-Opus-Animation" target="_blank" class="icon-link" > </div> </a> <a href="https://twitter.com/mrspok407" target="_blank" class="icon-link icon-link--twitter" > </a> <script src="https://cpwebassets.codepen.io/assets/common/stopExecutionOnTimeout-1b93190375e9ccc259df3a57c1abc0e64599724ae30d7ea4c6877eb615f89387.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> <script src="http://localhost/wordpress/wp-content/themes/theme-bulma-v4.1.2/js/Curved_background.js"></script> </section>
CSS:
@keyframes scroll { 100% { transform: translate(-50%, 15px); } } .sliderBackground2 .pages { margin-left: 20px; } .sliderBackground2 .pages__list { list-style-type: none; } .sliderBackground2 .pages__item { position: relative; margin-bottom: 10px; width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; cursor: pointer; } .sliderBackground2 .pages__item:after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) scale(0, 0); width: 75%; height: 75%; border-radius: 50%; background-color: #fff; opacity: 0; transition: 500ms; } .sliderBackground2 .pages__item:hover:after { transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .sliderBackground2 .page__item-active:after { transform: translate(-50%, -50%) scale(1, 1); opacity: 1; } .sliderBackground2 .icon-link { position: absolute; left: 5px; bottom: 5px; width: 50px; } .sliderBackground2 .icon-link img { width: 100%; vertical-align: top; } .sliderBackground2 .icon-link--twitter { left: auto; right: 5px; }
JS:
$(document).ready(function () { const $app = $(".app"); const $img = $(".app__img"); const $pageNav1 = $(".pages__item--1"); const $pageNav2 = $(".pages__item--2"); let animation = true; let curSlide = 1; let scrolledUp, nextSlide; let pagination = function (slide, target) { animation = true; if (target === undefined) { nextSlide = scrolledUp ? slide - 1 : slide + 1; } else { nextSlide = target; } $(".pages__item--" + nextSlide).addClass("page__item-active"); $(".pages__item--" + slide).removeClass("page__item-active"); $app.toggleClass("active"); setTimeout(function () { animation = false; }, 3000); }; let navigateDown = function () { if (curSlide > 1) return; scrolledUp = false; pagination(curSlide); curSlide++; }; let navigateUp = function () { if (curSlide === 1) return; scrolledUp = true; pagination(curSlide); curSlide--; }; setTimeout(function () { $app.addClass("initial"); }, 1500); setTimeout(function () { animation = false; }, 4500); $(document).on("mousewheel DOMMouseScroll", function (e) { var delta = e.originalEvent.wheelDelta; if (animation) return; if (delta > 0 || e.originalEvent.detail < 0) { navigateUp(); } else { navigateDown(); } }); $(document).on( "click", ".pages__item:not(.page__item-active)", function () { if (animation) return; let target = +$(this).attr("data-target"); pagination(curSlide, target); curSlide = target; } ); });