Легкий паралакс

#jquery #css #html5 #css3

Добрый день, подскажите, вероятно у кого-нибудь есть на примете паралакс, только
что бы он несильно ресурсоемкий был, лайт скажем так, может кроссбарузерная реализация
на css.
И может есть на примете похожий плагин для реализации эффекта как на первом экране,
движение мыши приводит в действие 5 блоков с информацией.
    

Ответы

Ответ 1

По parallax эффекту:



$(document).ready(function() {
  var wHeight = $(window).height();
  
  function parallax() {
    var pHeight = $(this).outerHeight();
    var pMiddle = pHeight / 2;
    var wMiddle = wHeight / 2;
    var fromTop = $(this).offset().top;
    var scrolled = $(window).scrollTop();
    var speed = $(this).attr('data-parallax-speed');
    var rangeA = (fromTop - wHeight);
    var rangeB = (fromTop + pHeight);
    var rangeC = (fromTop - wHeight);
    var rangeD = (pMiddle + fromTop) - (wMiddle + (wMiddle / 2));
    
    if (rangeA < 0) {
      rangeA = 0;
      rangeB = wHeight
    }

    var percent = (scrolled - rangeA) / (rangeB - rangeA);
    percent = percent * 100;
    percent = percent * speed;
    percent = percent.toFixed(2);
    
    var animFromBottom = (scrolled - rangeC) / (rangeD - rangeC);
    animFromBottom = animFromBottom.toFixed(2);
    
    if (animFromBottom >= 1) {
      animFromBottom = 1;
    }

    $(this).css('background-position', 'center ' + percent + '%');
    $(this).find('.parallax-content').css('opacity', animFromBottom);
    $(this).find('.parallax-content').css('transform', 'scale(' + animFromBottom + ')');
  }
  $('.parallax').each(parallax);
  $(window).scroll(function(e) {
    $('.parallax').each(parallax);
  });
}); 
body {
  margin: 0;
  padding: 0;
height: 800px;
}
.main-slide {
  width: 100%;
  height: 100vh;
  margin-bottom: 400px;
}






Тут можно посмотреть.

Что касается движения блоков, то я обычно использую jParallax для таких решений.

http://stephen.band/jparallax/


Ответ 2

Вот решение для второго parallax-эффекта:



 var $layerParallax = $('.layer-parallax');
	if ( ! Modernizr.touch ) {
		if ( $layerParallax.length > 0 ) {
		$layerParallax.parallax();
	}
}
.layer-parallax {
  display:flex;
  margin: 0 auto;
  width: 800px;
  margin-top: 20vh;
}
.layer {
  background: red;
  color: white;
  float: left;
  width: 10%;
  height: 100px; 
  border: 1px solid black;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.layer:nth-child(1) {
  left: 0;
  z-index: 1;
}
.layer:nth-child(2) {
  left: 10% !important;
  z-index: 2;
}
.layer:nth-child(3) {
  left: 20% !important;
  z-index: 3;
}
.layer:nth-child(4) {
  left: 30% !important;
  z-index: 4;
}
.layer:nth-child(5) {
  left: 40% !important;
  z-index: 3;
}
.layer:nth-child(6) {
  left: 50% !important;
  z-index: 2;
}
.layer:nth-child(7) {
  left: 60% !important;
  z-index: 1;
}




  
1
  
2
  
3
  
4
  
5
  
6
  
7





Думаю, принцип будет понятен, а остальное уже самостоятельно доработаете.