var $animation_elements = $('.animation-element'); var $window = $(window); function check_if_in_view() { var window_height = $window.height(); var window_top_position = $window.scrollTop(); var window_bottom_position = (window_top_position + window_height); $.each($animation_elements, function() { var $element = $(this); var element_height = $element.outerHeight(); var element_top_position = $element.offset().top; var element_bottom_position = (element_top_position + element_height); //check to see if this current container is within viewport if ((element_bottom_position >= window_top_position) && (element_top_position <= window_bottom_position)) { $element.addClass('in-view'); } else { $element.removeClass('in-view'); } }); } $window.on('scroll resize', check_if_in_view); $window.trigger('scroll');
<div class="main-container"> <div class="container cf"> <!-- Box --> <div class="animation-element box bounce-up cf"> <div class="subject design"> <div class="category-color"></div> <h3 class="title">Example box</h3> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eu lacinia mi, non luctus purus. Pellentesque non erat vitae ligula tincidunt consequat. Integer ac risus massa.</div> <div class="enrole">Bla bla blah</div> </div> </div> </div>
/*These styles contain basic styles for fomatting along with our animation css*/ body { font-size: 16px; font-family: 'Open Sans', sans-serif; font-weight: 400; background: #efefef; line-height: 170%; } *, *:before, *:after { box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } /*clearfixes*/ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .main-container { background: #fff; max-width: 1000px; min-height: 3000px; margin: 25px 25px auto; position: relative; } .container { position: relative; padding: 25px; } .box { margin-top: 1000px; } /*animation element*/ .animation-element { position: relative; width: 30%; margin: 0% 1.33 2.66% 1.33%; float: left; } /*bounce up animation for the subject*/ .bounce-up .subject { opacity: 0; -moz-transition: all 700ms ease-out; -webkit-transition: all 700ms ease-out; -o-transition: all 700ms ease-out; transition: all 700ms ease-out; -moz-transform: translate3d(0px, 200px, 0px); -webkit-transform: translate3d(0px, 200px, 0px); -o-transform: translate(0px, 200px); -ms-transform: translate(0px, 200px); transform: translate3d(0px, 200, 0px); -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; backface-visibility: hidden; } .bounce-up.in-view .subject { opacity: 1; -moz-transform: translate3d(0px, 0px, 0px); -webkit-transform: translate3d(0px, 0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate3d(0px, 0px, 0px); } .subject { float: left; width: 100%; margin: 0% 1.33% 2.66% 1.33%; background: #F5F5F5; padding: 15px; box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2); border: solid 1px #EAEAEA; } x-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25); } .subject .header { margin: 8px 0px; } .subject .header .date, .subject .header .category { margin: 0px; clear: none; width: 50%; } .subject .header .date i, .subject .header .category i { margin-right: 5px; color: #333; -moz-transition: all 400ms linear; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; } .subject .header .date { float: left; text-align: left; } .subject .header .category { float: right; text-align: right; } /*subject icon at top*/ .subject .icon { position: absolute; top: -20px; left: 50%; left: calc(50% - 20px); } .subject .icon i { width: 40px; height: 40px; color: rgb(255, 255, 255); font-size: 150%; border-radius: 50%; text-align: center; padding: 7px; } /*Category color / icon color*/ .subject .category-color { height: 7px; position: absolute; top: 0px; left: 0px; width: 100%; } .subject.design .category-color, .subject.design .icon i { background: #c0392b; } .subject.development .category-color, .subject.development .icon i { background: #16a085; } .subject.photography .category-color, .subject.photography .icon i { background: #2980b9; } /*hovering over subject*/ .subject.development:hover .header i { color: #16a085; } .subject.design:hover .header i { color: #c0392b; } .subject.photography:hover .header i { color: #2980b9; } .subject .title { margin: 12px 0px; border-bottom: dashed 1px #ccc; padding-bottom: 10px; } .subject .content { margin-bottom: 8px; } .subject .enrole { position: relative; color: #333; padding: 5px 12px; cursor: pointer; float: right; display: inline-block; border: solid 1px #ccc; -moz-transition: all 400ms linear; -webkit-transition: all 400ms linear; -o-transition: all 400ms linear; transition: all 400ms linear; }