1

I am running into some issues trying to get a css transition/sequence to start once I scroll over its parent div. I have done this with javascript functions, just never a css transition.

Right now my image will not even show, let alone start at the sequence.If I comment out the javascript the sequence plays as normal.

How can I get the css transitions to start when I get into the parent div section1?

I put a jsfiddle of this in the comments as it is easier to see this.

/*$("#think").hide();

//init scrolling event heandler
$(document).scroll(function() {

  var docScroll = $(document).scrollTop(),
    boxCntOfset = $("#section1").offset().top - 100;


  //when rich top of boxex than fire
  if (docScroll >= boxCntOfset) {

    $("#think").fadeIn(200)

  } else {
    $("#think").fadeOut(200)

  }
})*/


//Scroll for think images
/*$("#think").hide();
$(function() {
  var oTop = $('##section1').offset().top - window.innerHeight;
  $(window).scroll(function() {

    var pTop = $('body').scrollTop();
    console.log(pTop + ' - ' + oTop);
    if (pTop > oTop) {
      $("#think").fadeIn(200)
    }
  });
});*/
#red {
  width: 100%;
  height: 700px;
  background:red;
}
#section1 {
  width: 100%;
  height: 600px;
  background:blue;
}
#think {
/*opacity: 0;*/
 margin-left: 200px;
 width: auto;
 height: 500px;
 -webkit-animation-name: think;
         animation-name: think;
 -webkit-animation-duration: 8s;
         animation-duration: 8s;
    -webkit-animation-direction: normal;
            animation-direction: normal;
 -webkit-animation-fill-mode: forwards;
         animation-fill-mode: forwards;
 /*min-height: 500px; min-width: 500px;*/
 background-repeat: no-repeat;
 /*background-size: 100% auto;*/
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="red"></div>
<div class="section" id="section1">
  <div id="section1-right-container">
    <div id="think"></div>
  </div>
</div>
Becky
  • 2,253
  • 15
  • 38
  • https://jsfiddle.net/#&togetherjs=yjijgkGMs3 – Becky Feb 26 '16 at 15:43
  • Possible duplicate: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 – Zach Feb 26 '16 at 15:45
  • I'm not just trying to figure out if something is in the viewport? I want to initialize something? How is that even close???? – Becky Feb 26 '16 at 15:47
  • You would create a window scroll jquery function and inside you would determine if the element is in the viewport; then run your function. – Zach Feb 26 '16 at 15:49
  • I don't have a function! I am using CSS. Plus my question clearly states what I am doing now is making my image not even appear. – Becky Feb 26 '16 at 15:50

2 Answers2

0

You can use the jquery.visible plugin to easily determine if the element is in the viewport: http://www.jsdelivr.com/projects/jquery.visible

Next you will need to determine if is visible in a window scroll function and add a css class that holds the animations:

$(window).on("scroll", function(){
    // Determine if the element is in the viewport
    if($('.body-main').visible(true)) {
        $('.body-main').addClass("think");
    }
});

JSfiddle Example: https://jsfiddle.net/Zachary1748/tqh00p9n/

Zach
  • 457
  • 1
  • 5
  • 19
  • I made some progress and it works in this fiddle, but whenever I have `#think.start` in my css file on the live page, it doesn't even show the image. https://jsfiddle.net/nn0mazs6/#&togetherjs=PlyTzciKDM – Becky Feb 26 '16 at 16:23
  • whenever I have #think.start in my css file on the live page, it doesn't even show the image ... it works in the jsfiddle, but not on my live page whenever I put .start after #think. – Becky Feb 26 '16 at 16:37
  • Now I am trying your script, which worked in the fiddle, but it is not adding the class to my page. http://optimumwebdesigns.com/approach#secondPage ... it is in the second section, where it says, it all starts with a strategic plan. – Becky Feb 26 '16 at 16:41
  • It's because you page isn't actually scrolling. – Zach Feb 26 '16 at 16:47
  • Not exactly because the function is only called when document is scrolled. – Zach Feb 26 '16 at 16:50
  • What about with the jsfiddle I sent you? – Becky Feb 26 '16 at 16:50
  • You can do something like this: `#section1.active #section1-right-container #think {}` as a css selector, and ignore the script part. Although once the `active` class is removed and added again, it will replay the animation. – Zach Feb 26 '16 at 17:03
0

This is a small and easy to use js library which can helpful for you: jeremenichelli.github.io/hunt

Rakesh Mali
  • 9
  • 1
  • 2