Scroll effect with opacity works but not with transfform

Question

Scroll effect with opacity works but not with transfform

Navigation

#1 by (0 votes)
#2 by (0 votes)

0

Good evening, I have this code that works one part and the other not.

    $(document).on('scroll', function() {
/* funciona */
    var max_opacity_arrow = 0.3;
    var min_opacity_arrow = 0.1;
    var opacity_arrow = max_opacity_arrow * (1 - $(this).scrollTop() / $(window).height());
    if (opacity_arrow > min_opacity_arrow) {
        opacity_arrow = opacity_arrow;
    } else {
        opacity_arrow = min_opacity_arrow; }
    $('div.home.show div.bottom.arrow').css('opacity', opacity_arrow);

/* não funciona */
    var max_pespective_rotatex = 0;
    var min_pespective_rotatex = 90;
    var rotateX = max_pespective_rotatex * (1 - $(this).scrollTop() / $(window).height());
    if (rotateX > min_pespective_rotatex) {
        rotateX = rotateX;
    } else {
        rotateX = min_pespective_rotatex; }
    $('div.primeirapagina div.mainpespective').css('transform', rotateX + 'deg'); });

The lower part in question is a copy of the above, but only when I use TRANSFORM that does not work, if I change there in the end .css ('transform' the transform to anything else, it works but if I return it the transform does not work, what I want is that just as when I scroll the page the arrow disappears, I want a div to go spinning until it is facing 0 or how could I do it any other way that works? / p>

javascript css transform efeito

asked by anonymous 28.10.2016 / 23:57

2 answers

0

With the observation of @Ricardo Moraleida I was able to get to the following code

        var max_pespective_rotatex = 90;
    var min_pespective_rotatex = 0;
    var rotateX = max_pespective_rotatex - ( max_pespective_rotatex * ($(this).scrollTop() / $(window).height()));
    console.log(rotateX);
    if (rotateX > max_pespective_rotatex) {
        rotateX = max_pespective_rotatex;
    } else {
        rotateX = rotateX; }
    if (rotateX < min_pespective_rotatex) {
        rotateX = min_pespective_rotatex;
    } else {
        rotateX = rotateX; }
    $('div.primeirapagina div.mainpespective').css('transform', 'rotatex(' + rotateX + 'deg)');

Where I put the stop and reformulate the logic, leaving here for anyone who needs a day.

30.10.2016 / 14:11

problems with php, json, javascript and mysql Error php 5.4 starting class made in php 5.2

score 0 · Accepted Answer

There were two problems with your code. One was that you were passing transform: 90deg instead of transform: rotate(90deg) . The other is that the function that calculates rotateX was always giving the same value so it did not rotate. This I did not completely fix, I just reversed the if sign and added a multiplier for the values to come out different and box run in the example.

$(document).on('scroll', function() {
/* funciona */
    var max_opacity_arrow = 0.3;
    var min_opacity_arrow = 0.1;
    var opacity_arrow = max_opacity_arrow * (1 - $(this).scrollTop() / $(window).height());
    if (opacity_arrow > min_opacity_arrow) {
        opacity_arrow = opacity_arrow;
    } else {
        opacity_arrow = min_opacity_arrow; }
    $('div.home.show div.bottom.arrow').css('opacity', opacity_arrow);

/* não funciona */
    var max_pespective_rotatex = 1;
    var min_pespective_rotatex = 9;
    var rotateX = max_pespective_rotatex * (1 - $(this).scrollTop() / $(window).height());
    if (rotateX < min_pespective_rotatex) {
        rotateX = rotateX;
    } else {
        rotateX = min_pespective_rotatex; }
    
    $('div.primeirapagina div.mainpespective').css('transform', 'rotate('+rotateX*100+'deg)');
  });

body {
    height: 5000px;
}
.bottom {
  background: black;
  width: 100px;
  height: 100px;
  display: block;
  position: fixed;
  top: 0; left: 0;
}

.mainpespective {
  background: blue;
  width: 100px;
  height: 100px;
  display: block;
  position: fixed;
  top: 0; left: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><divclass="home show">
  <div class="bottom arrow"></div>
</div>
<div class="primeirapagina">
  <div class="mainpespective"></div>
</div>