Learn How To Code in Java !!!!!!

Introduction

These our best friends to help us make our website awesome! Let's take a look at some of great thing that we can do using them.

Here is my 3 examples of how you can use them toghether and make nice things!

logo

Tutorial #3 --> Scrolling

Scroll Up & Down...

landscape
landscape
landscape
landscape
landscape
landscape
landscape
landscape

#1 HTML is just adding img(s) with sliding left and right classes...



#2 on CSS there is lots of animation to define how the pictures should moving...

And also our old friend FLOAT !!!!

 
		.animation-element {
		  opacity: 0;
		  position: relative;
		}
		.animation-element.slide-left,
		.animation-element.slide-right {
		  opacity: 0;
		  transition: all 500ms linear;  
		}
		.animation-element.slide-left{
			transform: translate3d(-100px, 0px, 0px);
		}
		.animation-element.slide-right{
			transform: translate3d(100px, 0px, 0px);
		}
		.animation-element.slide-left.in-view,
		.animation-element.slide-right.in-view  {
		  opacity: 1;
		  transform: translate3d(0px, 0px, 0px);
		}
		animation-element.slide-left.img,
		.animation-element.slide-right.img {
			margin: 0% 1.5% 3% 1.5%;
		  width: 47%;
		  background: #F5F5F5;
		  padding: 15px;
		  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
		  border: solid 1px #A3A3A3;
		}
		.animation-element.slide-left.img{
			float: left;
		}
		.animation-element.slide-right.img{
			float: right;
		}
		.animation-element.slide-left.img:hover,
		.animation-element.slide-left.img:active,
		.animation-element.slide-right.img:hover,
		.animation-element.slide-right.img:active{
		  box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
		}


#3 And JavaScript which keep track of scrolling to animate img(s)


			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);
			 
			    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');

			$(document).ready(function () {
			    $(window).scroll(function () {
			        if ($(this).scrollTop() > 100) {
			            $('.scrollup').fadeIn();
			        } else {
			            $('.scrollup').fadeOut();
			        }
			    });

			    $('.scrollup').click(function () {
			        $("html, body").animate({
			            scrollTop: 0
			        }, 600);
			        return false;
			    });
			});