javascript - How to slide div in when it is in viewport and then out when it is no longer in viewport -
i trying have div slide in , out of view on scroll. slide view when in viewport , out of view when out of viewport. when slides out, replaced div(next div in code) sliding in.
the problem having each div want show/hide shares class next div. so, code showing/hiding 3 divs @ once instead of showing/hiding according there place in viewport.
thanks help!
html:
<body> <header id="legendary__intro"> <div class="section__title"> <h1 class="header__title">lorem ipsum</h1> <p class="header__description"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> <div class="header__subtitle uppercase"> <p>lorem ipsum</p> </div> <div class="line"></div> <i class="fa fa-chevron-down" aria-hidden="true"></i> </div> </header> <main class="main"> <section class="century"> <div class="decade"> <div class="year"> <div class="year__copy slide__left"> <div class="year__data"> <h2 class="date">2018</h2> <h3 class="subtitle">lorem ipsum</h3> <p class="description">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> </div> <div class="year__images slide__right"> <div class="images is-hidden"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> </div> <div class="fs__icon" title="expand/close"></div> </div> </div> </div> <div class="year"> <div class="year__images slide__left"> <div class="images"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> </div> <div class="fs__icon" title="expand/close"></div> </div> <div class="year__copy slide__right"> <div class="year__data"> <h2 class="date">lorem ipsum</h2> <h3 class="subtitle">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</h3> <p class="description">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> </div> </div> <div class="year"> <div class="year__copy slide__left"> <div class="year__data"> <h2 class="date">2016</h2> <h3 class="subtitle">lorem ipsum</h3> <p class="description">lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum</p> </div> </div> <div class="year__images slide__right"> <div class="images"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> <img class="images__image" src="https://placebear.com/600/600"> </div> <div class="fs__icon" title="expand/close"></div> </div> </div> </div> </main> <script type="text/javascript" src="../bower_components/jquery/dist/jquery.min.js"></script> <!-- latest compiled , minified javascript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-tc5iqib027qvyjsmfhjomalkfuwvxzxupncja7l2mcwnipg9mgcd8wgnicpd7txa" crossorigin="anonymous"></script> <script type="text/javascript" src="../bower_components/slick-carousel/slick/slick.min.js"></script> <script type="text/javascript" src="slick-lightbox.js"></script> </body> </html> javascript:
$(document).ready(function() { triggeranimation(); function triggeranimation(){ $(window).on('scroll', function(){ window.requestanimationframe(animateslide); }); } function animateslide(){ var divtop = $(window).scrolltop(), divbottom = $('.year').offset().top + $('.year').outerheight(); $('.year').each(function(){ if (divbottom > divtop) { $('.slide__left').css({ '-moz-transform': 'translate3d(0px, 0, 0)', '-webkit-transform': 'translate3d(0px, 0, 0)', '-ms-transform': 'translate3d(0px, 0, 0)', '-o-transform': 'translate3d(0px, 0, 0)', 'transform': 'translate3d(0px, 0, 0)', 'opacity': 1, 'left': 0 }); $('.slide__right').css({ '-moz-transform': 'translate3d(0px, 0, 0)', '-webkit-transform': 'translate3d(0px, 0, 0)', '-ms-transform': 'translate3d(0px, 0, 0)', '-o-transform': 'translate3d(0px, 0, 0)', 'transform': 'translate3d(0px, 0, 0)', 'opacity': 1, 'right': 0 }); } else { $('.slide__left').css({ '-moz-transform': 'translate3d(0px, 0, 0)', '-webkit-transform': 'translate3d(0px, 0, 0)', '-ms-transform': 'translate3d(0px, 0, 0)', '-o-transform': 'translate3d(0px, 0, 0)', 'transform': 'translate3d(0px, 0, 0)', 'opacity': 0, 'left': '-150px' }); $('.slide__right').css({ '-moz-transform': 'translate3d(0px, 0, 0)', '-webkit-transform': 'translate3d(0px, 0, 0)', '-ms-transform': 'translate3d(0px, 0, 0)', '-o-transform': 'translate3d(0px, 0, 0)', 'transform': 'translate3d(0px, 0, 0)', 'opacity': 0, 'right': '-150px' }); } }); } $('.images').on('init reinit afterchange', function(event, slick, currentslide, nextslide) { console.log(event); var = (currentslide ? currentslide : 0) + 1; slick.$nextarrow.text(i + '/' + slick.slidecount + ' next'); }); $(".images").slick(); $('.images').slicklightbox({ src: 'src', itemselector: 'img', prevarrow: false, nextarrow: false }); }); scss:
// // app // ---------------------------------------- html, body{ background-color: #efefef; padding: 0; overflow-x: hidden; } .uppercase{ text-transform: uppercase } header{ color: #fff; .section__title{ display: flex; justify-content: center; align-items: center; flex-direction: column; height: 100%; width: 50%; margin: auto; text-align: center; h1{ font-size: 48px; } p { font-size: 20px; } .header__subtitle{ margin-top: 100px; padding: 10px; } .line{ width: 50px; height: 1px; background-color: #fff; border-radius: 1px; } i{ padding: 20px; } } } #legendary__intro{ background: url(../images/fpo-spotlight.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; width: 100%; height: 100%; } main{padding: 15px;} .year { display: flex; flex-flow: row wrap; padding: 40px 0; &__copy { flex: 0 0 50%; display: flex; justify-content: flex-end; margin: auto; opacity: 0; transition: .2s ease-in-out; transform: translate3d(0px, 30px, 0); opacity: 0; &__.active{ transform: translate3d(0px, 0, 0); opacity: 1; } .year__data{ width: 75%; line-height: 1.5; letter-spacing: 1px; .date, .description{ font-size: 26px; } .subtitle{ font-size: 48px; margin: 0; } } } &__images { align-items: flex-end; display: flex; flex: 0 0 50%; justify-content: flex-end; max-height: 600px; } .slide__left{ opacity: 0; transition: .8s ease-in-out; transform: translate3d(0px, 30px, 0); opacity: 0; left: -150px; position: relative; } .slide__right{ opacity: 0; transition: .8s ease-in-out; transform: translate3d(0px, 30px, 0); opacity: 0; right: -150px; position: relative; } } .images { width: 600px; &__image { display: block; float: left; width: 100%; } } .fs__icon { bottom :0px; right: 0px; margin-left: -45px; width:45px; height:45px; background: url(../fullscreen.png) no-repeat 0 0; z-index:2; opacity:1; } .slick-slider { position: relative; .slick-list { overflow: hidden; } .slick-prev { display: none !important; } .slick-next { left: -32px; position: absolute; top: 50%; background-color: #cc0000; border: none; } } .slick-lightbox-slick{ .slick-next{ display: none !important; } }
Comments
Post a Comment