CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Scott
Scott

Reputation: 139

Rotating an image when user scrolls up and down the screen

I am fairly new to writing in html, css, and coding in javascript. I digress; i am trying to have an image of a gear rotate when the a user scrolls up and down the screen (i am hoping to give it an elevator effect when i add a belt). I am using the jquery $(window).scroll(function(). I know it is working because when i use console.log("hi") it writes every time i scroll. My problem is the .animate() function that doesn't seem to work. I even tried downloading "http://jqueryrotate.com/" and using that to rotate. Any help would be much appreciated!

    ## HTML ##
    <div class="left_pulley">
    <img src="gear2.png" />
    </div>

    <div class="right_pulley">
    <img src="gear2.png" />
    </div>

    ## CSS ##
.left_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 263px;
  left: 87%;

  height: 35px;
  width: 35px;
}

.left_pulley img
{
  width: 100%;
}

.right_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  top: 263px;
  left: 94.2%;

  height: 35px;
  width: 35px;
}

.right_pulley img
      {
        width: 100%;
        }

 ## JS ##

First using .rotate({}) 

$(".left_pulley").rotate({bind:
  $(window).scroll(function() {
      if ($(this).scrollTop() > 0) {
        $(.left_pulley).rotate({
          angle: 0,
          animateTo: 180,
          })
      })
    })
  })

Now using .animate({}) to try and just move it at all.

$(window).scroll(function() {
    if ($(this).scrollTop() > 0) {
        var scott = $('img');
        scott.animate({
          left: 180
        }
    }
});


$(window).scroll(function() {
  if ($(this).scrollTop() > 0) {
    var scott = $('img');
    scott.animate({
        left: 180
      }

      function() {
        console.log("hi");
      }
    });
  console.log("hi2");
}
});
.left_pulley {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 263px;
  left: 87%;
  height: 35px;
  width: 35px;
}
.left_pulley img {
  width: 100%;
}
.right_pulley {
  position: absolute;
  margin: 0;
  padding: 0;
  top: 263px;
  left: 94.2%;
  height: 35px;
  width: 35px;
}
.right_pulley img {
  width: 100%;
}
<div class="left_pulley">
  <img src="gear2.png" />
</div>

<div class="right_pulley">
  <img src="gear2.png" />
</div>

[

picture of gears i want to rotate.

]1

Upvotes: 2

Views: 3940

Answers (4)

Scott
Scott

Reputation: 139

Thanks for all the help everyone!

Just want to post my finial code in case anyone else needs help in the future.

/* Scott Louzon 11/24/15
This code is used to rotate two images of a gears when user scrolls */

/*This function see's when user scrolls then calls rotate_right & rotate_left
accordingly */
var scroll_at = 0;                              //variable to keep track of
                                                //scroll postion
$(window).scroll(function() {
    if ($(this).scrollTop() > 0)                //if scroll postion is not at
    {                                           //top do this
      if ($(this).scrollTop() > scroll_at)      //if scroll postion is > than b4
      {
        rotate_down();
      }
      else if ($(this).scrollTop() < scroll_at) //if scroll postion is < than b4
      {
        rotate_up();
      }

      scroll_at = $(this).scrollTop();          //set varible to were scroll
                                                //postion is at now
    }
})

//Both these functions call css to rotate the image of a gear
var rotation = 0;

function rotate_down()
{
  rotation+= 8;
  $(".left_pulley").css("transform","rotate("+ rotation +"deg)");
  $(".right_pulley").css("transform","rotate("+ (-1 * rotation) +"deg)");
}

function rotate_up()
{
  rotation += 8;
  $(".left_pulley").css("transform","rotate("+ (-1 * rotation)+"deg)");
  $(".right_pulley").css("transform","rotate("+ rotation +"deg)");
}
.left_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  /*Used for gear rotation */
  transition: transform 1ms;
  transform-origin:50% 50%;

  top: 263px;
  left: 87%;

  height: 35px;
  width: 35px;
}

.left_pulley img
{
  width: 100%;
}

.right_pulley
{
  position: absolute;

  margin: 0;
  padding: 0;

  /* Used for gear rotation */
  transition: transform 1ms;
  transform-origin:50% 50%;

  top: 263px;
  left: 94.2%;

  height: 35px;
  width: 35px;
}

.right_pulley img
{
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="left_pulley">
  <img src="gear2.png" />
</div>

<div class="right_pulley">
  <img src="gear2.png" />
</div>

Upvotes: 0

Mi-Creativity
Mi-Creativity

Reputation: 9664

JS Fiddle-Updated, now they rotate together same direction but the rotation is depending on whether the scroll is up or down:

JS:

var $gears = $('.gear'),
    $i = 0,
    $scrollBefore = 0;
$(window).scroll(function () {
    if($(this).scrollTop() > $scrollBefore){
        $scrollBefore = $(this).scrollTop();
        $gears.css("transform", "rotate(" + ($i+=4) + "deg)");
    }else if($(this).scrollTop() < $scrollBefore){
       $scrollBefore = $(this).scrollTop();
        $gears.css("transform", "rotate(" + ($i-=4) + "deg)"); 
    }
});

this JS Fiddle 2, makes them rotate in opposite directions, and each gear direction switches depending if the scrolling is up or down:

JS:

var $gearLeft = $('.left_pulley'),
  $gearRight = $('.right_pulley'),
  $i = 0,
  $j = 0,
  $scrollBefore = 0;
$(window).scroll(function() {
  if ($(this).scrollTop() > $scrollBefore) {
    $scrollBefore = $(this).scrollTop();
    $gearLeft.css("transform", "rotate(" + ($i += 4) + "deg)");
    $gearRight.css("transform", "rotate(" + ($j -= 4) + "deg)");
  } else if ($(this).scrollTop() < $scrollBefore) {
    $scrollBefore = $(this).scrollTop();
    $gearLeft.css("transform", "rotate(" + ($i -= 4) + "deg)");
    $gearRight.css("transform", "rotate(" + ($j += 4) + "deg)");
  }
});

Upvotes: 0

jmunsch
jmunsch

Reputation: 24139

Borrowing heavily from https://stackoverflow.com/a/17348698/2026508

You could do something like this:

var degrees = 0;
var prevScroll = 0;
$(window).scroll(function() {
  if ($(window).scrollTop() > 0) {
    if (prevScroll > $(window).scrollTop()) {
      $('.woo').css({
        '-webkit-transform': 'rotate(' + degrees+++'deg)',
        '-moz-transform': 'rotate(' + degrees+++'deg)',
        '-ms-transform': 'rotate(' + degrees+++'deg)',
        'transform': 'rotate(' + degrees+++'deg)'
      });
      console.log('prevScroll greater:', prevScroll)
    } else if (prevScroll < $(window).scrollTop()) {
      $('.woo').css({
        '-webkit-transform': 'rotate(' + degrees--+'deg)',
        '-moz-transform': 'rotate(' + degrees--+'deg)',
        '-ms-transform': 'rotate(' + degrees--+'deg)',
        'transform': 'rotate(' + degrees--+'deg)'
      });
      console.log('prevScroll less:', prevScroll)
    }
    prevScroll = $(window).scrollTop()
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="height: 40px; width: 100px;background-image: url(' gear2.png ');background-color:blue;" class="woo">turn</div>

Upvotes: 0

BBales
BBales

Reputation: 6638

You should look into the CSS3 transform property, more specifically the rotate() function. Here

It would also be beneficial to add a transistion property to create an animated 'tween' between rotation values. Here. Make sure to add this transition to the transition property (as this is where rotation is set).\

You can then change the rotation of the gear (with automatic animation!) using jquery by setting the css value of the transition property, for example:

#gear{

transition: transform 300ms;
transform: rotate(7deg);
transform-origin:90% 90%;

position:absolute;
left:100px;
top:100px;
font-size:10rem;
width:100px;
height:100px;

}

You can test it out here by hitting run.

https://jsfiddle.net/oc4hhons/

Upvotes: 1

Related Questions