CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Kartikey Vishwakarma
Kartikey Vishwakarma

Reputation: 519

How to rotate images when you navigate to a particular section?

I have a bootstrap based website which is divided into different sections. In a section called features I have three images which I want to rotate when a user navigates to it or scroll downs to that section and also when the user hover overs it. I know how to rotate the images on hover but unable to think of a way to do it when a user scrolls down to that section.

The html section code:-

<section id="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading dark">Features</h2>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg1.png" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg2.png" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="bg3.png" class="feature-size">
                </div>
            </div>
        </div>
    </div>
</section>

The css for rotating images on hover:-

<style type="text/css">
    img { 
        transition: all 0.5s ease-in-out 0s; 
    }

    img:hover {
      cursor: default;
      transform: rotate(360deg);
      transition: all 0.5s ease-in-out 0s;
    }
</style>

Whenever a user goes to that section the images will rotate once and also on hovering over the image. Please provide a way to do it with css or plain javascript. I don't want to use any javascript plugins like jquery. Any help is highly appreciated.

Upvotes: 0

Views: 152

Answers (4)

VilleKoo
VilleKoo

Reputation: 2854

You could do it with :target pseudo-class (MDN)

Something like this with your given code: 

a {
  display: block;
  /* Just for demonstration */
  height: 100vh;
}

img { 
    transition: all 0.5s ease-in-out 0s;
}

:target img {
  cursor: pointer;
  transform: rotate(360deg);
}

:target img:hover {
  transform: rotate(720deg);
}
<a href="#features">Link to section</a>
<section id="features">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading dark">Features</h2>
            </div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
            <div class="col-lg-4 text-center">
                <div class="feature-box">
                    <img src="http://fillmurray.com/300/300" class="feature-size">
                </div>
            </div>
        </div>
    </div>
</section>

Upvotes: 0

Deepak Bandi
Deepak Bandi

Reputation: 1904

Here is the one with JavaScript, but you need to make some tweaks according to the requirements.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>

        <style>
            div{height: 100vh;}
        </style>
    </head>
    <body>
        <div>
            <script>

            </script>
        </div>
        <div>
            <script>

            </script>
        </div>
        <div id="foo" style="background-color:red;">
            <script>

            </script>
        </div>

        <script>
        function getPosition(el) {
            var xPos = 0;
            var yPos = 0;

            while (el) {
               if (el.tagName == "BODY") {
               // deal with browser quirks with body/window/document and page scroll
               var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
               var yScroll = el.scrollTop || document.documentElement.scrollTop;

               xPos += (el.offsetLeft - xScroll + el.clientLeft);
               yPos += (el.offsetTop - yScroll + el.clientTop);

               } else {
               // for all other non-BODY elements
               xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
               yPos += (el.offsetTop - el.scrollTop + el.clientTop);
          }

          el = el.offsetParent;
      }
      return {
      x: xPos,
      y: yPos
   };
}

// deal with the page getting resized or scrolled
window.addEventListener("scroll", checkPosition, false);
window.addEventListener("resize", checkPosition, false);

function checkPosition() {
  console.log(getPosition(myElement));
  console.log(position);

  if((getPosition(myElement)).y < 10 && (getPosition(myElement)).y > -10){
      alert("Here");
  }

}

var myElement = document.querySelector("#foo");
var position = getPosition(myElement);

        </script>
    </body>
</html>

Upvotes: 0

Riddler
Riddler

Reputation: 576

Using JQuery plugin Appear can make this a lot easier.

function toggleHover() {
  $(".feature-size").each(function() {
    $(this).toggleClass("hovered")
  });
}
$('#features').appear(function() {
  setTimeout(function() {
    toggleHover();
    setTimeout(toggleHover, 1000); //to revert the animation
  }, 1500);
});

and add this css rule.

img.hovered {
  cursor: default;
  transform: rotate(360deg);
  transition: all 0.5s ease-in-out 0s;
}

Feel free to change the timeout seconds, as i cannot predict the timings you may want without hands on

Upvotes: 0

Deepak Bandi
Deepak Bandi

Reputation: 1904

You can use Waypoint js : http://imakewebthings.com/waypoints/

var waypoint = new Waypoint({
    element: document.getElementById('waypoint'),
    handler: function(direction) {
        console.log('Scrolled to waypoint!')
    }
})

Add a class on reaching the point during the scroll.

Upvotes: 1

Related Questions