[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;
@@ -56,9 +56,9 @@ $(function(){
 		$('.popup-container').fadeIn();
 			// $('#user_login').attr('placeholder', 'Identifiant');
     		// $('#user_pass').attr('placeholder', 'Mot de passe');
-		$('.popup-first').removeClass('fadeOutDown ').addClass('animated visible-elem pulse');
+    		$('.popup-first').removeClass('fadeOutDown ').addClass('animated visible-elem pulse');
 
-	});
+    	});
 	//Close popup
 	$('.popup-first .close-btn').click(
 		function(){
@@ -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');
@@ -159,63 +160,63 @@ $(function(){
 				$this.addClass('active');
 				$('.filter-bloc .bloc-content').slideUp('slow');
 				$this.find('.bloc-content').slideDown('slow');
-                                $('.commercial').slideUp('slow');
+				$('.commercial').slideUp('slow');
 			}else{
 				$this.removeClass('active');
 				$this.find('.bloc-content').slideUp('slow');
                                 //$('.commercial').slideDown('slow');
-			}
+                            }
 
-		}).on('click','.filter-bloc li:not(.disabled,.reinit)',function(e){
-			e.stopPropagation();
-			$(this).toggleClass('selected');
-			var e = $(this).parent().find('.selected').length,
-			parentFilter = $(this).parent().parent().parent();
-			e ? parentFilter.addClass('selected-filter') : parentFilter.removeClass('selected-filter') ;
-		}).on('click','.filter-bloc .reinit',function(){
-			selector = $(this).parent().parent();
-			selector.parent().reinitFilter();
-			selector.find('li').reinitFilter();
-		}).on('click','.reinit-all',function(){
-			$('.filter-bloc , .filter-bloc li').reinitFilter();
-		});
-	}
-	$.fn.changeProductImageBg = function(){
-		var
-		selectedColor = checkWhiteColor($(this).data("color")),
-		selectedImage = $(this).data("image"),
-		linkProduct = $(this).data("link"),
-		tl = new TimelineMax(),
-		container = $(this).parent().parent();
-		container.find('.article-bg').css({"background-color": selectedColor, opacity:'0.1'});
-		container.find('img').attr({'src' : selectedImage , 'data-link' : linkProduct});
-		tl.fromTo(container.find('img'),1,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
-	}
-	$.fn.animatePageScroll = function(element, duration) {
-		return $(this).fromTo(element,duration,
-			{opacity:0,visibility:"hidden",marginBottom:'80px'},
-			{opacity:1,visibility:"visible",marginBottom:'0px'},0.7);
-	}
-	$.fn.fullpageSlide = function(){
-		var 
-		timeout = 1.7,
-		duration = 1.2;
-		setTimeout(function(){
-			$('.moveDown').removeClass('hidden-elem').addClass('visible-elem animated rollIn');
-		}, 2000);
-		$("#fullpage .section").first().addClass('first');
-		$(this).fullpage({
-			verticalCentered: false,
-			css3:false,
-			scrollingSpeed: 1500,
-			lazyLoading: false ,
-			fixedElements: 'footer',
-			controlArrows: true,
-			fitToSectionDelay: 800000,
-			fadingEffect: true,
-			afterLoad: function(anchor, index){
-				tl1 = new TimelineMax();
-				var firstSection = $("#fullpage .section.first");
+                        }).on('click','.filter-bloc li:not(.disabled,.reinit)',function(e){
+                        	e.stopPropagation();
+                        	$(this).toggleClass('selected');
+                        	var e = $(this).parent().find('.selected').length,
+                        	parentFilter = $(this).parent().parent().parent();
+                        	e ? parentFilter.addClass('selected-filter') : parentFilter.removeClass('selected-filter') ;
+                        }).on('click','.filter-bloc .reinit',function(){
+                        	selector = $(this).parent().parent();
+                        	selector.parent().reinitFilter();
+                        	selector.find('li').reinitFilter();
+                        }).on('click','.reinit-all',function(){
+                        	$('.filter-bloc , .filter-bloc li').reinitFilter();
+                        });
+                    }
+                    $.fn.changeProductImageBg = function(){
+                    	var
+                    	selectedColor = checkWhiteColor($(this).data("color")),
+                    	selectedImage = $(this).data("image"),
+                    	linkProduct = $(this).data("link"),
+                    	tl = new TimelineMax(),
+                    	container = $(this).parent().parent();
+                    	container.find('.article-bg').css({"background-color": selectedColor, opacity:'0.1'});
+                    	container.find('img').attr({'src' : selectedImage , 'data-link' : linkProduct});
+                    	tl.fromTo(container.find('img'),1,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
+                    }
+                    $.fn.animatePageScroll = function(element, duration) {
+                    	return $(this).fromTo(element,duration,
+                    		{opacity:0,visibility:"hidden",marginBottom:'80px'},
+                    		{opacity:1,visibility:"visible",marginBottom:'0px'},0.7);
+                    }
+                    $.fn.fullpageSlide = function(){
+                    	var 
+                    	timeout = 1.7,
+                    	duration = 1.2;
+                    	setTimeout(function(){
+                    		$('.moveDown').removeClass('hidden-elem').addClass('visible-elem animated rollIn');
+                    	}, 2000);
+                    	$("#fullpage .section").first().addClass('first');
+                    	$(this).fullpage({
+                    		verticalCentered: false,
+                    		css3:false,
+                    		scrollingSpeed: 1500,
+                    		lazyLoading: false ,
+                    		fixedElements: 'footer',
+                    		controlArrows: true,
+                    		fitToSectionDelay: 800000,
+                    		fadingEffect: true,
+                    		afterLoad: function(anchor, index){
+                    			tl1 = new TimelineMax();
+                    			var firstSection = $("#fullpage .section.first");
 				//tl1.animatePageScroll(firstSection,duration);
 				//console.log(animation);
 				tl1.fromTo(firstSection.find('.bloc .header-bloc'),1.5,
@@ -255,13 +256,13 @@ $(function(){
 				}
 			},
 		});
-$(document).on('click', '.moveDown', function(){
-	$.fn.fullpage.moveSectionDown();
-});
-}
+                    	$(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,13 +301,14 @@ $.fn.getMenuBg = function(){
 		$('.right-panel').outerWidth(windowWidth - (navMenuWidth + filterWidth));
 		$('.contact-form').height(windowHeight - footerHeight);
 		$('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
-		$('#catalogue .panel-content section').last().height(windowHeight - footerHeight);
+		if (lastSectionHeight < windowHeight - footerHeight)
+			$('#catalogue .panel-content section').last().height(windowHeight - footerHeight);
 	}
 	//Wordpress js login
-		$('#user_login').attr('placeholder', 'Identifiant');
-		$('#user_pass').attr('placeholder', 'Mot de passe');
-		$("#user_login").addClass("my-login-username");
-		$("#wp-submit").addClass("btn rounded white-btn");
+	$('#user_login').attr('placeholder', 'Identifiant');
+	$('#user_pass').attr('placeholder', 'Mot de passe');
+	$("#user_login").addClass("my-login-username");
+	$("#wp-submit").addClass("btn rounded white-btn");
 
 });//END Function
 
@@ -346,34 +349,46 @@ $.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");
-			$('.cover-wrapper').each(function () {
-				$('.cover-wrapper').last().addClass('last');
-				$('.cover-wrapper').first().addClass('first');
-				coverWrapper = $(this).data('cat');
-				if (coverWrapper == 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');
-					}
-				}
-			});
+function onScrollCover(direction){
+	cover = $('.subcat a.active').attr("href");
+	$('.cover-wrapper').each(function () {
+		coverWrapper = $(this).data('cat');
+		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).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 currLink = $(this);
-		var refElement = $(currLink.attr("href"));
+	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);
 		if (refElement.length && refElement.position().top - 20 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
 			$('.subcat a').removeClass("active");
@@ -393,7 +408,7 @@ function onScroll(event){
 		}
 	});
 
-	
+
 }
 function scrollAnchor(elemId, skipZero){
 	$('.subcat a[href^="#"]').on('click', function (e) {
@@ -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() {