Вопросы Теги

изменить свойство css элементов, если они 300px сверху окна просмотра

Взгляните на этот пример . Этот запрос должен работать: 

var leftFinal = from left in lefts
                join right in rights on left equals right.Left into leftRights
                from leftRight in leftRights.DefaultIfEmpty()
                select new { LeftId = left.Id, RightId = left.Key==leftRight.Key ? leftRight.Id : 0 };

1
задан emanuele1994 13 July 2018 в 12:57
поделиться

2 ответа

Попробуйте функцию .each(), как показано ниже: 

function getViewportOffset($e) {
  var $window = $(window),
      scrollLeft = $window.scrollLeft(),
      scrollTop = $window.scrollTop(),
      offset = $e.offset(),
      rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
      rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}
$(window).on("load scroll resize", function() {
    $(".element").each(function(){
          var viewportOffset = getViewportOffset ($(this));
          var valueprimo = viewportOffset.top - 350;
          if  (viewportOffset.top < 130)  {
             $(this).css("transform", "rotatez(-55deg) rotate(-45deg)  translate(0,0)");
          } 
          else if (viewportOffset.top > 343) {
                $(this).css("transform", "rotatez(0deg) rotate(-45deg)  translate(0,0)");
          } 
          else if (viewportOffset.top > 130) {
                $(this).css("transform", "rotatez(" + valueprimo / 4 + "deg) rotate(-45deg)) translate(0,0)");
          }
    });
});
body {height: 2048px}
.element {position: absolute;
  top: 400px; left: 30px;
  width: 107px;
  height:107px;
  background-color: #707070}
#secondo {position: absolute;
  top: 450px; left: 150px;
}
#terzo {position: absolute;
  top: 550px; left: 270px;
}
#quarto {position: absolute;
  top: 650px; left: 150px;
}
#quinto {position: absolute;
  top: 450px; left: 510px;
}
#sesto {position: absolute;
  top: 350px; left: 630px;
}
#settimo {position: absolute;
  top: 650px; left: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primo" class="element" name="element"></div>
<div id="secondo" class="element" name="element"></div>
<div id="terzo" class="element" name="element"></div>
<div id="quarto" class="element" name="element"></div>
<div id="quinto" class="element" name="element"></div>
<div id="sesto" class="element" name="element"></div>
<div id="settimo" class="element" name="element"></div>

1
ответ дан G Dillon 17 August 2018 в 12:48
поделиться

Вы можете предоставить идентификаторы элементов, которые будут анимированы при прокрутке, их нижних / верхних положениях прокрутки, чтобы начать / остановить анимацию, начальные / конечные значения анимированного свойства и информацию о том, какое свойство оживить для нее в массиве или объект, а затем прокрутите его, например например: 

var settings = {
   primo: {
      minTop: 130,
      maxTop: 350,
      // animates rotation from -55 deg to 0
      valAtMin: -55,
      valAtMax: 0,
      transformTemplate: "rotatez({X}deg) rotate(-45deg)  translate(0,0)"
   },
   secondo: {
      minTop: 20,
      maxTop: 160,
      // animates rotation from 175 deg to -30deg
      valAtMin: 175,
      valAtMax: -30,
      transformTemplate: "rotatez({X}deg) rotate(-45deg)  translate(0,0)"
   },
   terzo: {
      minTop: 50,
      maxTop: 180,
      // this time, animates the horizontal shift from 0 to 90px
      valAtMin: 0,
      valAtMax: 90,
      transformTemplate: "rotate(-45deg) translate({X}px,0)"
   }
}

// no need to redefine this on each call
var $window = $(window);
 
function getViewportOffset($e) {
  var scrollLeft = $window.scrollLeft(),
      scrollTop = $window.scrollTop(),
      offset = $e.offset(),
      rect1 = { x1: scrollLeft, y1: scrollTop, x2: scrollLeft + $window.width(), y2: scrollTop + $window.height() },
      rect2 = { x1: offset.left, y1: offset.top, x2: offset.left + $e.width(), y2: offset.top + $e.height() };
  return {
    left: offset.left - scrollLeft,
    top: offset.top - scrollTop,
    insideViewport: rect1.x1 < rect2.x2 && rect1.x2 > rect2.x1 && rect1.y1 < rect2.y2 && rect1.y2 > rect2.y1
  };
}

$(window).on("load scroll resize", function() {
   for (var id in settings) {
      var elem = $('#'+id);
      if (!elem) continue; // skip if element with this id doesn't exist
      var elemSettings = settings[id];
      var offsetTop = getViewportOffset(elem).top;
      var value;
      // calculate the value proportionally to scrolling position between limits
      if (offsetTop <= elemSettings.minTop) value = elemSettings.valAtMin;
      else if (offsetTop >= elemSettings.maxTop) value = elemSettings.valAtMax;
      else value = elemSettings.valAtMin + (elemSettings.valAtMax - elemSettings.valAtMin) * (offsetTop - elemSettings.minTop) / (elemSettings.maxTop - elemSettings.minTop);
      // store the current value in the same object
      elemSettings.value = value;
   }

   // if this is the first call, start the animation 
   if (!animationStarted) requestAnimationFrame(doAnimation);     
});

// a small performance optimization:
// use requestAnimationFrame for animation to avoid too frequent redrawings
function doAnimation() {
   for (var id in settings) {
      var elem = $('#'+id);
      if (!elem) continue; // skip if element with this id doesn't exist
      var elemSettings = settings[id];
      elem.css('transform', elemSettings.transformTemplate.replace('{X}', elemSettings.value));
   }
   requestAnimationFrame(doAnimation);
}

animationStarted = false;
body {height: 2048px}
.element {position: absolute;
  top: 400px; left: 30px;
  width: 107px;
  height:107px;
  background-color: #707070}
#secondo {position: absolute;
  top: 450px; left: 150px;
}
#terzo {position: absolute;
  top: 550px; left: 270px;
}
#quarto {position: absolute;
  top: 650px; left: 150px;
}
#quinto {position: absolute;
  top: 450px; left: 510px;
}
#sesto {position: absolute;
  top: 350px; left: 630px;
}
#settimo {position: absolute;
  top: 650px; left: 450px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="primo" class="element" name="element"></div>
<div id="secondo" class="element" name="element"></div>
<div id="terzo" class="element" name="element"></div>
<div id="quarto" class="element" name="element"></div>
<div id="quinto" class="element" name="element"></div>
<div id="sesto" class="element" name="element"></div>
<div id="settimo" class="element" name="element"></div>

0
ответ дан Ilya Streltsyn 17 August 2018 в 12:48
поделиться
Другие вопросы по тегам:

Похожие вопросы: