[Update]Redmine - #641 : Image transition

wp-content/themes/nap/assets/css/main.css

@@ -1092,7 +1092,7 @@ aside.news-wrapper {
   position: relative;
   height: 100%;
   background: #fff;
-  overflow-y: hidden;
+  overflow-x: hidden;
   opacity: 0;
   border-left: 1px solid rgba(26,26,26,0.1);
 }
@@ -1154,7 +1154,9 @@ label.chevron.bottom {
     width: 120%;
 }
 
-
+label.chevron.bottom::first-letter {
+text-transform: uppercase;
+}
 .pa_format ul li img {
     vertical-align: top;
     margin-top: -50px;
@@ -1200,6 +1202,7 @@ label.chevron.bottom {
   margin: 0 auto;
   position: relative;
 }
+.list li .format-desc,
 .pa_format li .format-desc{
   font-size: 9px;
   line-height: 12px;
@@ -1328,7 +1331,7 @@ label.chevron.bottom {
   position: relative;
 }
 .product-list figure img{
-  height: 100%;
+  height: 180px;
   object-fit: cover;
 }
 
@@ -1606,6 +1609,7 @@ label.chevron.bottom {
   left: 0;
   opacity: 0;
   visibility: hidden;
+  margin-left: -4px;
 }
 .filter-list .top-header{
   margin-bottom: 25px;
@@ -1739,21 +1743,36 @@ label.chevron.bottom {
   left: 0;
   right: 0;
   height: 100%;
-  top: -100%;
+  top: 0;
   bottom: 0;
   background-repeat: no-repeat;
   background-size: cover;
   background-position: 90%;
+  z-index: 0;
+}
+.top-100{
+  /*top: -100%;*/
+}
+.transition-0{
+  -webkit-transition: all 0s ease-in-out;
+  -moz-transition: all 0s ease-in-out;
+  -o-transition: all 0s ease-in-out;
+  -ms-transition: all 0s ease-in-out;
+  transition: all 0s ease-in-out;
+}
+.transition-1{
   -webkit-transition: all 1s ease-in-out;
   -moz-transition: all 1s ease-in-out;
   -o-transition: all 1s ease-in-out;
   -ms-transition: all 1s ease-in-out;
   transition: all 1s ease-in-out;
-  z-index: 0;
 }
 .cover-wrapper.current-cover{
+  z-index: 3 !important ;
   top: 0 !important;
-  z-index: 3 !important;
+}
+.cover-wrapper.last-current-cover{
+  z-index: 3 !important ;
 }
 .cover-wrapper.current-cover p{
   opacity: 1;
@@ -1765,12 +1784,10 @@ label.chevron.bottom {
 }
 .cover-wrapper.prev{
   top: -100%;
-  z-index: 4 !important;
 }
 .cover-wrapper.next{
+  top: 100%;
  display: block;
- z-index: 2;
- top: 0;
 }
 .cover-wrapper.last{
   /*z-index: 0;*/
@@ -1804,7 +1821,7 @@ label.chevron.bottom {
   margin-top: 27px;
 }
 .panel .product-list article {
-  height: 195px;
+ /* height: 195px;*/
   width: 170px;
   display: inline-block;
   cursor: pointer;

wp-content/themes/nap/assets/js/main.js

@@ -37,7 +37,7 @@ $(function(){
 				$('.gallery-wrapper').removeClass('hidden-elem').addClass('animated visible-elem fadeInUp');
 			},0)
 		});
-});
+	});
     //Get file name of uploaded file	
     $('#file-p').on('change',function(e){
     	var fileName = e.target.files[0].name;
@@ -101,12 +101,13 @@ $(function(){
 		{
 			srcImage = $('#home .img-wrapper').data('defaultimg');
 		}
-		setTimeout(function(){
+		$('.img-wrapper').stop().animate({
+			opacity: 1,
+		}, 500, function() {
 			$('.img-wrapper').css({
-				'background-image': "url("+ srcImage +")",
-				'opacity' : 1
-			}).one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',   function(e) {});
-		},300)		
+				'background-image': "url("+ srcImage +")"
+			})
+		});
 	}
 	$.fn.showSubmenu = function(){
 		var currentPage = $('.container').data('page');
@@ -255,13 +256,13 @@ $(function(){
 				}
 			},
 		});
-$(document).on('click', '.moveDown', function(){
+                    	$(document).on('click', '.moveDown', function(){
                     		$.fn.fullpage.moveSectionDown();
-});
-}
+                    	});
+                    }
 
 
-$.fn.getMenuBg = function(){
+                    $.fn.getMenuBg = function(){
 		//debugger;
 		var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img');
 		navwWidth = $('.nav-wrapper').width();
@@ -288,6 +289,7 @@ $.fn.getMenuBg = function(){
 		maxHeight = productHeight > windowHeight ? productHeight : containerHeight,
 		galleryWidth = windowWidth - navPhototequeWidth,
 		filterWidth = $('.right-container .left-panel').outerWidth(),
+		lastSectionHeight = $('#catalogue .panel-content section').last().outerHeight(),
 		footerContact = $('.contact-form .footer').outerHeight();
 		$('.gallery-wrapper').outerWidth(galleryWidth).css('margin-left',navPhototequeWidth) ;
 		$('.main,.load-page').outerHeight(containerHeight);
@@ -299,6 +301,7 @@ $.fn.getMenuBg = function(){
 		$('.right-panel').outerWidth(windowWidth - (navMenuWidth + filterWidth));
 		$('.contact-form').height(windowHeight - footerHeight);
 		$('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
+		if (lastSectionHeight < windowHeight - footerHeight)
 			$('#catalogue .panel-content section').last().height(windowHeight - footerHeight);
 	}
 	//Wordpress js login
@@ -346,32 +349,44 @@ $.fn.animation = function(){
 	setTimeout(function(){$('.form-wrapper').removeClass('hidden-elem').addClass('animated fadeInUp')},1000)
 	animateOnScroll();
 }
-function onScrollCover(event){
-	$('.subcat a').each(function () {
-		if ($(this).hasClass('active')){
-			cover = $(this).attr("href");
+function onScrollCover(direction){
+	cover = $('.subcat a.active').attr("href");
 	$('.cover-wrapper').each(function () {
-				$('.cover-wrapper').last().addClass('last');
-				$('.cover-wrapper').first().addClass('first');
 		coverWrapper = $(this).data('cat');
-				if (coverWrapper == cover) {
+		if (coverWrapper == cover && !($(this).hasClass('current-cover'))) {
+			$('.cover-wrapper').removeClass('last-current-cover');
+			$('.current-cover').addClass('last-current-cover');
 			$('.cover-wrapper').removeClass('prev next current-cover');
-					$(this).prev('.cover-wrapper').addClass('prev'); //animated slideInUp visible-elem
-					$(this).next('.cover-wrapper').addClass('next');
-					$(this).addClass('current-cover');
-					if ($('.first').hasClass('prev')) {
-						$('.next').css('z-index','1');
-					}
-				}
-			});
+			$(this).prevAll('.cover-wrapper').addClass('prev');
+			$(this).nextAll('.cover-wrapper').addClass('next');
+			$(this).addClass('current-cover ');
 		}
 	});
 };
+var lastScrollTop = 0;
 function onScroll(event){
-	var scrollPos = $(this).scrollTop(),
-	items = event.data.items;
-	onScrollCover();
-	$(items).each(function () {
+	var st = $(this).scrollTop();
+	if (st > lastScrollTop){
+		var direction = "down";
+	}
+	else if(st === lastScrollTop)
+	{ 
+	//In IE this is an important condition because there seems to be some instances where the last scrollTop is equal to the new one
+}
+else {
+	var direction = "up";
+}
+lastScrollTop = st;
+var scrollPos = $(this).scrollTop(),
+//items = event.data.items;
+items = "li .subcat a";
+if ( timer ) clearTimeout(timer);
+
+timer = setTimeout(function(){
+	onScrollCover(direction);
+}, 330);
+
+$(items).each(function () {
 	var currLink = $(this);
 	var refElement = $(currLink.attr("href"));
 		//console.log(currLink);
@@ -424,10 +439,18 @@ function scrollAnchor(elemId, skipZero){
 $(window).load( function() {
 	initFunction();
 });//END document load
-$(window).on("scroll",{ items: "li .subcat a"},onScroll)
+var timer;
+$(window).scroll(function(e) {
+	onScroll(e)
+/*	clearTimeout(timer);
+	timer = setTimeout(function() {
+		$(window).trigger("scrollStop");
+	}, 330);*/
+});
+//$(window).bind("scrollStop",onScroll)
 $(document).ready(function(){
 	$('.nav-content li').on('mouseover',function(){
-		$(this).stop(true,true).fadeImage();
+		$(this).stop(false,true).fadeImage();
 	});
 	// Catalog Page : Change product image depending on selected color
 	$('.product-list article ul li').on('mouseover',function(){ 
@@ -449,6 +472,13 @@ $(document).ready(function(){
 	$.fn.responsive();
 	$('.list-color-filter li').setBgColorList();
 	$.fn.animation(); //Global animation for entire site
+
+
+	//TODO
+	$('.cover-wrapper').last().addClass('last');
+	$('.cover-wrapper').first().addClass('first');
+
+
 }); //end document ready
 
 $(window).resize(function() {