Skip to content

N
NAP-wordpress
Commit e8da88a1 authored by imac's avatar imac
Browse files
Options

[Update]Style : Add background color to cover description

parent 02692434
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 95 deletions
wp-content/themes/nap/assets/css/main.css
View file @ e8da88a1
......@@ -68,7 +68,7 @@
width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */
}
.product-details .list {overflow: -moz-scrollbars-none;}
@keyframes fadein {
......@@ -1750,18 +1750,6 @@ label.chevron.bottom::first-letter {
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;
......@@ -1793,15 +1781,18 @@ label.chevron.bottom::first-letter {
.cover-wrapper.last{
/*z-index: 0;*/
}
.cover-desc-wrapper{
position: absolute;
bottom: 75px;
left: 63px;
background: rgba(255,255,255,0.3);
}
.cover-wrapper p{
font-size: 11px;
line-height: 13px;
letter-spacing: 0.2px;
max-width: 153px;
position: absolute;
bottom: 75px;
left: 63px;
padding-right: 10px;
max-width: 200px;
padding: 5px 10px;
opacity: 0;
-webkit-transition: all .6s ease-in-out;
-moz-transition: all .6s ease-in-out;
......
wp-content/themes/nap/assets/js/main.js
View file @ e8da88a1
......@@ -255,22 +255,22 @@ $(function(){
}
},
});
$(document).on('click', '.moveDown', function(){
$.fn.fullpage.moveSectionDown();
});
}
$.fn.getMenuBg = function(){
var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img');
navwWidth = $('.nav-wrapper').width();
$('.container-bg').css({
'background-image': "url("+ imgSrc +")",
'opacity' : 0,
})
tlBg = new TimelineMax();
tlBg.to('.container-bg',0.9,{opacity:1},0.5);
tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
tlBg.from('.full-slides',1.2,{opacity:0, width:0},0.4);
}
$(document).on('click', '.moveDown', function(){
$.fn.fullpage.moveSectionDown();
});
}
$.fn.getMenuBg = function(){
var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img');
navwWidth = $('.nav-wrapper').width();
$('.container-bg').css({
'background-image': "url("+ imgSrc +")",
'opacity' : 0,
})
tlBg = new TimelineMax();
tlBg.to('.container-bg',0.9,{opacity:1},0.5);
tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
tlBg.from('.full-slides',1.2,{opacity:0, width:0},0.4);
}
//Responsive function
$.fn.responsive = function(){
var footerHeight = $('footer').height(),
......@@ -298,7 +298,7 @@ $(function(){
$('.contact-form').height(windowHeight - footerHeight);
$('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
if (lastSectionHeight < windowHeight - footerHeight)
$('#catalogue .panel-content section').last().height(windowHeight - footerHeight);
$('#catalogue .panel-content section').last().height(2 * windowHeight/3 - footerHeight );
}
//Wordpress js login
$('#user_login').attr('placeholder', 'Identifiant');
......@@ -346,22 +346,29 @@ $.fn.animation = function(){
animateOnScroll();
}
function onScrollCover(){
cover = $('.subcat a.active').attr("href");
cover = $('.subcat.current a.active').attr("href");
console.log(cover);
$('.cover-wrapper').each(function () {
coverWrapper = $(this).data('cat');
if (coverWrapper == cover && !($(this).hasClass('current-cover'))) {
$('.cover-wrapper').removeClass('last-current-cover');
$('.cover-desc-wrapper').removeClass('fadeInDown').addClass('animated fadeOutDown')
$('.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 ');
setTimeout(function(){
$('.current-cover .cover-desc-wrapper').removeClass('fadeOutDown').addClass('animated fadeInDown');
}, 600);
}
});
};
var lastScrollTop = 0;
function onScroll(event){
var scrollPos = $(this).scrollTop(),
titleHeight = ($('.panel section > h2').outerHeight()/2) ;
//items = event.data.items;
items = "li .subcat a";
if ( timer ) clearTimeout(timer);
......@@ -374,7 +381,7 @@ $(items).each(function () {
var currLink = $(this);
var refElement = $(currLink.attr("href"));
//console.log(currLink);
if (refElement.length && refElement.position().top - 100 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
if (refElement.length && refElement.position().top - ( $(".main").outerHeight() / 2 - titleHeight - $(".footer").outerHeight() ) <= scrollPos && refElement.position().top + refElement.height() > scrollPos) {
$('.subcat a').removeClass("active");
currLink.addClass("active");
if ($('nav ul ul').find('li.active')){
......@@ -430,7 +437,9 @@ $(document).ready(function(){
$('.product-list article').each(function(){
$(this).showProductListColors();
});
onScrollCover();
setTimeout(function(){
onScrollCover();
}, 330);
$.fn.open_nav();
scrollAnchor('body', false);
$('.news-btn').open_news();
......
wp-content/themes/nap/assets/js/product.js
View file @ e8da88a1
function loadProductContent() {
sizeProductDetails = $('.product-details .list').length;
if (sizeProductDetails < 2) {
$('.product-info').outerWidth('78.3%');
}
$('.pa_couleur li').getListColors();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('#zoom').zoom();
$('article[data-color], .pa_couleur li').click(function(e) {
$(this).selectSlide($('#slides'));
});
$('#mozaique').open_gallery();
initFunction();
$.fn.responsive();
setTimeout(function(){
$.fn.productAnimation();
$('#product .product-list').showRightPanel();
$.fn.slider_product();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides'));
},100)
$('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation();
});
}
$(function(){
var initFunction=function(){
$('a[href^="#"], .easyzoom img').click(function(e){
......@@ -47,16 +74,16 @@ $(function(){
}
})
}
$.fn.selectFormat = function(){
$(this).on('click',function(){
var actifImage = $(this).find('img').data('img-active'),
initialImage = $(this).find('img').data('img');
$(this).parent().parent().find('li').each(function(){
img = $(this).find('img');
img.attr('src',img.data('img'));
})
$(this).parent().parent().find('li').removeClass('selected');
......@@ -82,10 +109,10 @@ $(function(){
});
}
$.fn.selectSlide = function(slide){
var data = $(this).data("color"),
dataIndex = slide.find("[data-color="+data+"]").data("slick-index"),
slideno = $(this).data('color');
slide.slick('slickGoTo', dataIndex);
var data = $(this).data("color"),
dataIndex = slide.find("[data-color="+data+"]").data("slick-index"),
slideno = $(this).data('color');
slide.slick('slickGoTo', dataIndex);
}
$.fn.open_gallery = function(){
$(this).on('click',function(){
......@@ -93,12 +120,12 @@ $(function(){
tl.staggerFromTo('.slides-wrapper .gallery article',0.3,{opacity:0,y:100},{opacity:1,y:0},0.1,0);
tl.fromTo('.gallery',0.5,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
tl.fromTo('.nav-slider',0.1,{opacity:1},{opacity:0},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
tl.fromTo('#slides',0.5,{opacity:1},{opacity:0},0);
});
$('.gallery').on('click','.close-btn,article',function(){
$('.gallery').fadeTo( "slow", 0).css('visibility','hidden');
$('#slides,.nav-slider').fadeTo( "slow", 1);
$('.gallery').fadeTo( "slow", 0).css('visibility','hidden');
$('#slides,.nav-slider').fadeTo( "slow", 1);
})
}
$.fn.showRightPanelAnimation = function(removeClass,addClass){
......@@ -125,49 +152,27 @@ $(function(){
})
}
$.fn.productAnimation = function(){
//first format Actif
var activeImg = $('.format-label #format_0').data('img-active');
$('.format-label #format_0').attr('src',activeImg);
tlProduct = new TimelineMax();
tlProduct.fromTo('.product-images',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},0);
tlProduct.staggerFromTo('.product-details .list',0.2,{opacity:0, marginLeft:"-10%"},{opacity:1, marginLeft:"0"},0.4,0.5);
tlProduct.fromTo('.product-info',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},1.2);
}
$('.product-list article img, .product-list article ul li').on('click', function() {
$('head').append($('.header-shop'));
var toLink = $(this).data('link');
$('.load-page').parent().addClass('active');
$('.load-page').load(toLink,function(){
//alert('here');
sizeProductDetails = $('.product-details .list').length;
if (sizeProductDetails < 2) {
$('.product-info').outerWidth('78.3%');
}
$('.pa_couleur li').getListColors();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('#zoom').zoom();
$('article[data-color], .pa_couleur li').click(function(e) {
$(this).selectSlide($('#slides'));
});
$('#mozaique').open_gallery();
initFunction();
$.fn.responsive();
$('html').css('overflow','hidden');
setTimeout(function(){
$.fn.productAnimation();
$('#product .product-list').showRightPanel();
$.fn.slider_product();
$('.pa_couleur li').selectColor();
$('.pa_format li').selectFormat();
$('.color-list.selected').selectSlide($('#slides'));
},100)
$('.download-btn:not(.download_file)').click(function(e){
e.stopPropagation();
var activeImg = $('.format-label #format_0').data('img-active');
$('.format-label #format_0').attr('src',activeImg);
tlProduct = new TimelineMax();
tlProduct.fromTo('.product-images',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},0);
tlProduct.staggerFromTo('.product-details .list',0.2,{opacity:0, marginLeft:"-10%"},{opacity:1, marginLeft:"0"},0.4,0.5);
tlProduct.fromTo('.product-info',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},1.2);
}
$('.product-list article img, .product-list article ul li').on('click', function() {
$('head').append($('.header-shop'));
var toLink = $(this).data('link');
history.pushState(null, null, toLink);
$('.load-page').parent().addClass('active');
$('.load-page').load(toLink,function(){
loadProductContent();
$('html').css('overflow','hidden');
console.log('heaeeee');
});
});
})
});
\ No newline at end of file
})
loadProductContent();
});
\ No newline at end of file
wp-content/themes/nap/woocommerce/archive-product.php
View file @ e8da88a1
......@@ -101,7 +101,9 @@ $child_category = get_terms('product_cat', array('parent' => $cateID, 'child_of'
foreach ($child_category as $key => $value) :
?>
<div class="cover-wrapper abs-full transition" data-cat = "#cat<?php echo $value->term_id ?>" style = "background-image: url('<?php echo nap_category_image($value->term_id) ?>')">
<p><?php echo $value->description; ?></p>
<div class="cover-desc-wrapper">
<p><?php echo $value->description; ?></p>
</div>
</div>
<?php
endforeach;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment