Как создать выделение с помощью CSS или Javascript - PullRequest
Новая
       20

Как создать выделение с помощью CSS или Javascript

3 голосов
/ 10 июня 2019

Мне нужно создать две области (одна с повторяющимся изображением, а другая с повторяющимися ссылками), которые охватывают окно браузера любого размера; элементы выделения должны отображаться с самого начала и не должны занимать несколько секунд, чтобы появиться на экране, а каждый из них должен находиться на расстоянии около 20 или 30 пикселей друг от друга. Когда пользователь наводит курсор на него, область должна перестать перемещаться по странице.

Я создаю веб-сайт для клиента, и на одной странице мы решили выделить шатер для отображения логотипа, а на другой - шатер для отображения ссылок на социальные сети клиента. Я не уверен, как рассчитать необходимую продолжительность анимации, исходя из размера текста или изображения, чтобы оно выглядело бесконечным. Я изучил и опробовал опции CSS и спросил только, чтобы найти, что Javascript обычно рекомендуется для этого. Я только начал погружаться в Javascript, поэтому я совершенно не знаю, с чего начать этот проект. Это на самом деле очень похоже на то, что мне нужно: https://stackoverflow.com/a/45103608/11623961. Это пример того, чего я пытаюсь достичь: http://maxsiedentopf.com/work-2 (только один внизу, но без наложения слева сторона, просто двигаясь слева направо). Вот что я пытался использовать для достижения желаемого эффекта: https://codepen.io/jamesbarnett/pen/kfmKa.

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 100%;

  overflow: hidden;
  position: relative;
  background-color: #e9e5fb;  
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  padding: 8px 0 4px 0;
}

.marquee div {
  display: inline-block;
  width: 300%;
  height: 40px;

  position: absolute;
  overflow: hidden;

  animation: marquee 12s linear infinite;
}

.marquee span {
  float: left;
  width: 25%;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -150%; }
}
        <div class="marquee">
            <div>
                <span><a href="#">twitter</a></span>
                <span><a href="#">instagram</a></span> 
                <span><a href="#">pinterest</a></span>
                <span><a href="#">spotify</a></span> 
                <span><a href="#">magazine</a></span>
            </div>
        </div>

Очевидно, есть много проблем с тем, что я пытался сделать. Шатер не выглядит бесконечным, я не разобрался, как сделать паузу при наведении, предметы находятся слишком далеко друг от друга. Любая помощь будет принята с благодарностью. Спасибо!

Ответы [ 5 ]

1 голос
/ 10 июня 2019

Вот несколько способов добиться результата, вы можете выбрать тот, который вам нравится больше всего.

  • HTML-тэг marquee
  • CSS-анимация и текстовый отступ
  • CSS анимация и относительное положение
  • JS vanilla (без ограничений)
  • JS Jquery animate 

/* Vanilla JS */

var rightJS = {
  init: function(){
    rightJS.Tags = document.querySelectorAll('.rightJS');
    for(var i = 0; i < rightJS.Tags.length; i++){
      rightJS.Tags[i].style.overflow = 'hidden';
    }
    rightJS.Tags = document.querySelectorAll('.rightJS div');
    for(var i = 0; i < rightJS.Tags.length; i++){
      rightJS.Tags[i].style.position = 'relative';
      rightJS.Tags[i].style.right = '-'+rightJS.Tags[i].parentElement.offsetWidth+'px';
    }
    rightJS.loop();
  },
  loop: function(){
    for(var i = 0; i < rightJS.Tags.length; i++){
      var x = parseFloat(rightJS.Tags[i].style.right);
      x ++;
      var W = rightJS.Tags[i].parentElement.offsetWidth;
      var w = rightJS.Tags[i].offsetWidth;
      if((x/100) * W  > w) x = -W;
      if (rightJS.Tags[i].parentElement.parentElement.querySelector(':hover') !== rightJS.Tags[i].parentElement) rightJS.Tags[i].style.right = x + 'px';
    } 
    requestAnimationFrame(this.loop.bind(this));
  }
};
window.addEventListener('load',rightJS.init);

/* JQUERY */

$(function(){
  var rightJQ = {
    init: function(){
      $('.rightJQ').css({
        overflow: 'hidden'
      });
      $('.rightJQ').on('mouseover',function(){
        $('div', this).stop();
      });
      $('.rightJQ').on('mouseout',function(){
        $('div', this).animate({
          right: '100%'
        }, 14000, 'linear' );
      });
      rightJQ.loop();
    },
    loop: function(){
      $('.rightJQ div').css({
        position: 'relative',
        right: '-100%'
      }).animate({
        right: '100%'
      }, 14000, 'linear', rightJQ.loop);
    }
  };
  rightJQ.init();
});
marquee { background: #0089fa; }

.rightTI { background: #ff002b;
  white-space: nowrap; 
  overflow: hidden;
  animation: marquee 18s linear infinite;
}
.rightTI:hover {
  animation-play-state: paused;
}
@-webkit-keyframes marquee {
  0% {text-indent: 100%;}
  100% {text-indent: -100%;}
}

.rightCSS { 
  background: #a35dc1;
  overflow: hidden;
} 
.rightCSS div {
  position: relative;
  animation: CSSright linear 18s infinite;
} 
@keyframes CSSright {
  0% { right: -100% }
  100% { right: 100% }
}
.rightCSS:hover div {
  animation-play-state: paused;
}

.rightJS { background: #ffa900; }

.rightJQ { background: #00a753; }

.li {
  float: left;
  width: 80%;
  padding: 1%;
  margin: 1% 10%;
  height: 20px;
  border-radius: 0.5em;
  box-shadow: 0 0.1em 0.5em;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<marquee class="li" direction=”right” onmouseover="stop()" onmouseout="start()">★ HTML tag &lt;marquee&gt; ★</marquee>
<div class="rightTI li">★ CSS animation and text-indent ★</div>
<div class="rightCSS li"><div>★ CSS animation and position relative ★</div></div>
<div class="rightJS li"><div>★ pure javascript ★</div></div>
<div class="rightJQ li"><div>★ Jquery animate ★</div></div>
0 голосов
/ 20 июня 2019

Если кто-то ищет ответ на ту же проблему, которая использует чисто CSS и отображает текст на экране бесконечно, вы можете проверить его здесь !

0 голосов
/ 10 июня 2019

Я думаю, что CSS будет лучшим вариантом для продолжения .. Для паузы и продолжения JavaScript должен работать ..

0 голосов
/ 10 июня 2019

Люсигузи, ваша проблема решена, и если вы хотите больше, чем вы, вам следует приложить больше усилий для этого 

body { 
  margin: 0;
  font-family: "UniversLTPro-Ex";
  font-size: 30px;
}

a {
    text-decoration: none;
    color: #000;
}

.marquee {
  height: 35px;
  width: 300%;
  position: relative;
  padding: 8px 0 4px 0;
  border: none;
}

.marq{
  background-color: #e9e5fb;
  border-top: 1px solid black;
  border-bottom: 1px solid black;
  
}


.marquee span {
  float: left;
  width: 300px;
}

@keyframes marquee {
  0% { left: 0; }
  100% { left: -150%; }
}
<div class="marq">  
<marquee onmouseover="this.stop();" onmouseout="this.start();">
           <div class="marquee">
                <span><a href="#">twitter</a></span>
                <span><a href="#">instagram</a></span> 
                <span><a href="#">pinterest</a></span>
                <span><a href="#">spotify</a></span> 
                <span><a href="#">magazine</a></span>
          </div>
 </marquee>     
</div>

Подробнее о теге Marquee

Документация по тегу Marquee - здесь

0 голосов
/ 10 июня 2019

Использование CSS всегда лучший вариант, но по вашему требованию необходимо приостановить при наведении курсора и возобновить с последней остановленной позиции, что невозможно при использовании CSS.Так что используйте Javascript для перемещения.Установите timeInterval, который изменяет свойство left элемента, чтобы переместить элемент влево с интервалами и при этом очистить интервал времени так, чтобы анимация остановилась на последнем левом значении.onmouseout снова запустить интервал, который продолжит анимацию.

...