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>