Движущиеся фигуры на заднем фоне

Question

Как сделать, что бы треугольники или прямоугольники двигались немного в состоянии ожидания, а при скролле поворачивались немного как здесь во втором блоке P.S.: блок назывется о нас

Answer 1

Это простой эффект а-ля параллакса. Вот один из примеров:

$(document).ready(function() {
  $(".parallax").each(function() {
    var $this = $(this);
    $this.data("top", $this.offset().top);
    $this.data("rate", $this.attr("data-parallax-rate"));
  });
  $(window).scroll(function() {
    $(".parallax").each(function() {
      var scrollTop = $(window).scrollTop();
      var rate = $(this).data("rate");
      var thisTop = scrollTop - scrollTop * rate
      $(this).css("top", $(this).data("top") + thisTop);
    });
  });
});

body {height: 1000px;}

#rate__one, #rate__two, #rate__three {
  position: fixed;
  top: 40px;
  width: 25%;
  padding-top: 25%;
}
#rate__one {left: 10%; background-color: chocolate;}
#rate__two {left: 40%; background-color: deepskyblue;}
#rate__three {left: 70%; background-color: brown;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="rate__one" class="parallax" data-parallax-rate="1.5"></div>
<div id="rate__two" class="parallax" data-parallax-rate="2.5"></div>
<div id="rate__three" class="parallax" data-parallax-rate="0.8"></div>

Answer 2

Вариант с transform: rotate.

А чтобы треугольники или прямоугольники жили своей жизнью, независимо от скролла, вот здесь есть ряд интересных решений: Как сделать такой parallax эффект?

var scrollTop = 0;
function parallax(elem, scrollTop) {
  var intensity = parseInt(elem.attr("data-parallax")) / 1000;
  if ($(window).width() <= 0) {
    intensity = intensity / 1000;
  }
  var containerOffset = elem.parents("[data-parallax-container]").offset().top,
    move = (scrollTop - containerOffset) * intensity * -1;
  elem.css({
    "-webkit-transform": "rotate(" + move + "deg)",
    "-ms-transform": "rotate(" + move + "deg)",
    transform: "rotate(" + move + "deg)"
  });
}
$(window).on("load resize", function() {
  scrollTop = $(document).scrollTop();
  $("[data-parallax]").each(function() {
    parallax($(this), scrollTop);
  });
});
$(document).scroll(function() {
  scrollTop = $(document).scrollTop();
  $("[data-parallax]").each(function() {
    parallax($(this), scrollTop);
  });
});

.container {
  width: 100%;
  height: 500vh;
  position: relative;
  overflow: hidden;
}

#rate__one, #rate__two, #rate__three {
  position: fixed;
  top: 40px;
  width: 25%;
  padding-top: 25%;
  /*transition: all 1s;*/
}
#rate__one {left: 5%; background-color: chocolate;}
#rate__two {left: 37%; background-color: deepskyblue;}
#rate__three {left: 70%; background-color: brown;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header"></div>
<div class="container" data-parallax-container>
<div id="rate__one" class="parallax" data-parallax="-1000"></div>
<div id="rate__two" class="parallax" data-parallax="-100"></div>
<div id="rate__three" class="parallax" data-parallax="500"></div>
</div>

Или чуть проще:

$(document).ready(function() {
  function parallax(intensity, element) {
    $(window).scroll(function() {
      var scrollTop = $(window).scrollTop();
      var rotate = scrollTop / intensity + 'deg';
      $('.' + element).css('transform', 'rotate(' + rotate + ')');
    });
  }
  $(window).scroll(function() {
    parallax(2, 'parallax');
  });
});

.container {
  width: 100%;
  height: 500vh;
  position: relative;
  overflow: hidden;
}

#rate__one, #rate__two, #rate__three {
  position: fixed;
  top: 40px;
  width: 25%;
  padding-top: 25%;
  /*transition: all 1s;*/
}
#rate__one {left: 5%; background-color: chocolate;}
#rate__two {left: 37%; background-color: deepskyblue;}
#rate__three {left: 70%; background-color: brown;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div id="rate__one" class="parallax"></div>
  <div id="rate__two" class="parallax"></div>
  <div id="rate__three" class="parallax"></div>
</div>

БЛОГ НА HUSL

Движущиеся фигуры на заднем фоне

Ответы (2 шт):