Ответы пользователя по тегу HTML
  • Как сделать некоторый текст статическим?

    @Khalit
    function setTyper(element, words) {
    
      const LETTER_TYPE_DELAY = 75;
      const WORD_STAY_DELAY = 2000;
    
      const DIRECTION_FORWARDS = 0;
      const DIRECTION_BACKWARDS = 1;
    
      var direction = DIRECTION_FORWARDS;
      var wordIndex = 0;
      var letterIndex = 0;
    
      var wordTypeInterval;
    
      var preffix = "static-"
      
      startTyping();
    
      function startTyping() {
        wordTypeInterval = setInterval(typeLetter, LETTER_TYPE_DELAY);
      }
    
      function typeLetter() {
        const word = preffix+words[wordIndex];
    
        if (direction == DIRECTION_FORWARDS) {
          letterIndex++;
    
          if (letterIndex == word.length) {
            direction = DIRECTION_BACKWARDS;
            clearInterval(wordTypeInterval);
            setTimeout(startTyping, WORD_STAY_DELAY);
          }
    
        } else if (direction == DIRECTION_BACKWARDS) {
          letterIndex--;
    
          if (letterIndex == preffix.length) {
            nextWord();
          }
        }
    
        const textToType = word.substring(0, letterIndex);
    
        element.textContent = textToType;
      }
    
      function nextWord() {
    
        letterIndex = preffix.length;
        direction = DIRECTION_FORWARDS;
        wordIndex++;
    
        if (wordIndex == words.length) {
          wordIndex = 0;
        }
    
      }
    }
    Ответ написан
    1 комментарий
  • Как правильно доработать слайдер?

    @Khalit
    let startElement = 2
    
    var servicesSwiper = new Swiper ('#services', {
     slidesPerView: 1,
        speed: 750,
        spaceBetween: 32,
        virtualTranslate: true,
        slideToClickedSlide: true,
        draggable: true,
        initialSlide: startElement
    });
    
    $(".services .swiper-wrapper").css(
          "transform",
          `translateX(calc(${startElement * -360 + "px"}))`
        );
    
      servicesSwiper.on("slideChangeTransitionStart", function () {
        let transformValue = 0;
        //if ($(window).width() >= 1024) {
          transformValue = this.activeIndex * -360 + "px";
        // } else {
        //   transformValue =
        //     this.activeIndex * -100 + "% - 16px *" + this.activeIndex;
        // }
    
        $(".services .swiper-wrapper").css(
          "transform",
          `translateX(calc(${transformValue}))`
        );
      });
    Ответ написан
    Комментировать