How to get a css transition to not start until scrolled into a specific div

Question

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>

Possible duplicate: http://stackoverflow.com/questions/123999/how-to-tell-if-a-dom-element-is-visible-in-the-current-viewport/7557433#7557433 — ZZZZtop, 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. — ZZZZtop, 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

ZZZZtop · Answer 1 · 2016-02-26T16:31:36.950

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/

edited Feb 26 '16 at 16:31

answered Feb 26 '16 at 16:20

ZZZZtop

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. – ZZZZtop Feb 26 '16 at 16:47
Not exactly because the function is only called when document is scrolled. – ZZZZtop 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. – ZZZZtop Feb 26 '16 at 17:03

score 0 · Answer 2 · edited Jul 07 '21 at 23:17

You can use IntersectionObserver object like I show below so when your div element comes into view you can add a class or remove a class:

const observer = new IntersectionObserver(elements => {
    elements.forEach( entry => {
        // if the element is present
        if(entry.isIntersecting){
            removableClass.classList.add('class-to-add');
            return;
        }
        // if not then remove the class
        removableClass.classList.remove('class-to-remove');

    })
})

And to observe the division:

observer.observe(document.querySelector('.any-class'));

And remember that if you want to do some transition then always put the class which shows the content and then remove it afterwards because even if the JS fails to load your content it would still be displayed.

How to get a css transition to not start until scrolled into a specific div

2 Answers2