with your

Pairing Wine

Favorite Dish

- Basic jQuery tutorials -

Scroll Down

Choose your wine

What's your favorite dish?

Great choice!!!
Now let's enjoy your dinner with an epic view!

Hint : Drag and drop the dish to an             empty plate

Seafood Pasta

Lobster

Chicken Salad

New York Steak

Lamb Chops

Smoked Salmon

Enjoy the rest of the day!

Animate On Click Function

Step 1 : : At the bottom of html, paste important jQuery scripts before your own script.

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
	

Step 2 : : Add class to the element you wish to animate.

  <img class="white-wine" src="images/white-wine.png">
  <img class="red-wine" src="images/red-wine.png">
  	

Step 3 : : Position absolute the elements.

  .white-wine, .red-wine {
  position: absolute;
  top: 1050px;
  }
  	

Step 4 : : Here's the script to activate the animation.

   const $white = $('.white-wine');
   const $red = $('.red-wine');
   const $empty = $('.wine-glass');
   const $whiteGlass = $('.wine-glass-1, .wine-glass01, .white-set, .dish-white');
   const $redGlass = $('.wine-glass-2, .wine-glass02, .red-set, .dish-red');
   const $btn01 = $('.btn-01');

   $red.on('click', function(){
   $empty.hide();

   $(this).css({'transform' : 'rotate('+ -45 +'deg)'});
   $(this).animate({
   	'marginTop' : "-=80px"
   	});

   });

   $white.on('click', function(){
   $empty.hide();
   $redGlass.hide();

   $(this).css({'transform' : 'rotate('+ 45 +'deg)'});
   $(this).animate({
   	'marginTop' : "-=80px"
   	});

   });
	

Drag and Drop Function

Step 1 : : If you wish to make something draggable, give it a class and id.

  <div class="white-set">
  <div id="dish-01" class="dish"><a href="#0"><img src="images/dish-01.png"></a></div>
  <div id="dish-02" class="dish"><a href="#0"><img src="images/dish-02.png"></a></div>
  <div id="dish-03" class="dish"><a href="#0"><img src="images/dish-03.png"></a></div>
  </div>
  <div class="red-set">
  <div id="dish-04" class="dish"><a href="#0"><img src="images/dish-04.png"></a></div>
  <div id="dish-05" class="dish"><a href="#0"><img src="images/dish-05.png"></a></div>
  <div id="dish-06" class="dish"><a href="#0"><img src="images/dish-06.png"></a></div>
  </div>
  	

Step 2 : : Same as dropable items, give each element a class and id.

  <img id="pick" class="pick" src="images/dish-pick.png">
  <div id="drop-01" class="dish-pick"><a href="#0"><img src="images/dish-01.png"></a></div>
  <div id="drop-02" class="dish-pick"><a href="#0"><img src="images/dish-02.png"></a></div>
  <div id="drop-03" class="dish-pick"><a href="#0"><img src="images/dish-03.png"></a></div>
  <div id="drop-04" class="dish-pick"><a href="#0"><img src="images/dish-04.png"></a></div>
  <div id="drop-05" class="dish-pick"><a href="#0"><img src="images/dish-05.png"></a></div>
  <div id="drop-06" class="dish-pick"><a href="#0"><img src="images/dish-06.png"></a></div>
	

Step 3 : : Position absolute the divs.

  .white-set, .red-set, .dish-white, .dish-red {
  flex-direction: column;
  position: absolute;
	top: 60px;
	}
	

Step 4 : : Here's the script to activate Drag and Drop Function.

  // clone when drag
  $(".dish").draggable({
        helper: 'clone'
    });

  // dish 01
  $('#dish-01').hover(function(){
  $('#dish-01').draggable({

    drag: function( event, ui ) {
      $('#dish-01').css( "filter", "grayscale(100%)");
    },
    stop: function( event, ui ) {
      $('#dish-01').css( "opacity", "1");
    },
  });

  $( "#pick" ).droppable({

   accept: "#dish-01",

  over: function( event, ui ) {
    $('.pick').css({
        'opacity': .3
      });
  },
  out: function( event, ui ) {
      $('#drop-01').css({
          'opacity': 1
      });   
    },
  drop: function( event, ui ) {
      $('.food-set').css('z-index', '100');
      $('#dish-01').hide();
      $('#drop-01').css('display', "block");
    }
  });
  });
  // end dish 01
	

Parallax Effect with Animation

Step 1 : : Create three layers of element.
In this case, there are forground, midground, and background images. Give each element a class.

  <img id="sun" class="sun" src="images/sun.png">
  <img id="sun-bg" class="sun-bg" src="images/sun-bg.png">
  <img id="vineyard" class="vineyard" src="images/vineyard.png">
	

Step 2 : : Here's the script with Scrolling Function.

  $(window).scroll(function() {

  var wScroll = $(this).scrollTop();

  // console.log(wScroll);

  if(wScroll >= 1900) {
    
    var done = false;
    $('.sun').animate({ 'bottom': '-=260px'}, 4500, function() {
      if(!done) {
        done = true;
        $('.sun').hide();
        $('.sun-bg').css("display", "block");
      	}
    	});

  	  }

	});
	
Try different wine