Tengo un sitio web basado en bootstrap que está dividido en diferentes secciones. En una sección llamada características, tengo tres imágenes que quiero rotar cuando un usuario navega hacia ella o se desplaza hacia abajo hasta esa sección y también cuando el usuario pasa el mouse sobre ella. Sé cómo rotar las imágenes al pasar el mouse, pero no puedo pensar en una forma de hacerlo cuando un usuario se desplaza hacia abajo hasta esa sección.

El código de la sección html: -

<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>

El CSS para rotar imágenes al pasar el mouse: -

<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>

Siempre que un usuario vaya a esa sección, las imágenes rotarán una vez y también al pasar el cursor sobre la imagen. Proporcione una forma de hacerlo con CSS o JavaScript simple. No quiero usar ningún complemento de JavaScript como jquery. Cualquier ayuda es muy apreciada.

0
Kartikey Vishwakarma 3 ene. 2017 a las 09:30

4 respuestas

Puede utilizar Waypoint js: http://imakewebthings.com/waypoints/

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

Agregue una clase sobre cómo llegar al punto durante el desplazamiento.

1
Deepak Bandi 3 ene. 2017 a las 09:35
Cualquier forma posible de hacerlo con javascript simple.
 – 
Kartikey Vishwakarma
3 ene. 2017 a las 10:59

El uso de Appear del complemento de JQuery puede facilitarlo mucho.

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

Y agregue esta regla CSS.

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

Siéntase libre de cambiar los segundos de tiempo de espera, ya que no puedo predecir los tiempos que desee sin las manos

0
Riddler 3 ene. 2017 a las 10:56
De cualquier forma posible sin usar jquery o cualquier complemento. Estoy tratando de implementar cosas con javascript simple.
 – 
Kartikey Vishwakarma
3 ene. 2017 a las 10:58

Puede hacerlo con: target pseudo-class ( MDN )

Algo como esto con su código dado:

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>
0
VilleKoo 3 ene. 2017 a las 14:33
Las imágenes giran cuando se hace clic en la función por primera vez, pero después no.
 – 
Kartikey Vishwakarma
3 ene. 2017 a las 16:11
Eso es porque ya estás "en": target.
 – 
VilleKoo
3 ene. 2017 a las 16:14
De todos modos es posible rotarlo incluso después de la primera vez.
 – 
Kartikey Vishwakarma
3 ene. 2017 a las 17:00
Hice un violín para que demuestre cómo funciona eso: la pseudoclase de destino jsfiddle.net/VilleKoo/e0906yne / 2
 – 
VilleKoo
3 ene. 2017 a las 17:09

Aquí está el que tiene JavaScript, pero debe hacer algunos ajustes de acuerdo con los requisitos.

<!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>
0
Deepak Bandi 3 ene. 2017 a las 11:22