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 @@ ...@@ -68,7 +68,7 @@
width: 0px; /* remove scrollbar space */ width: 0px; /* remove scrollbar space */
background: transparent; /* optional: just make scrollbar invisible */ background: transparent; /* optional: just make scrollbar invisible */
} }
.product-details .list {overflow: -moz-scrollbars-none;} .product-details .list {overflow: -moz-scrollbars-none;}
@keyframes fadein { @keyframes fadein {
...@@ -1750,18 +1750,6 @@ label.chevron.bottom::first-letter { ...@@ -1750,18 +1750,6 @@ label.chevron.bottom::first-letter {
background-size: cover; background-size: cover;
background-position: 90%; background-position: 90%;
z-index: 0; 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; -webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out;
...@@ -1793,15 +1781,18 @@ label.chevron.bottom::first-letter { ...@@ -1793,15 +1781,18 @@ label.chevron.bottom::first-letter {
.cover-wrapper.last{ .cover-wrapper.last{
/*z-index: 0;*/ /*z-index: 0;*/
} }
.cover-desc-wrapper{
position: absolute;
bottom: 75px;
left: 63px;
background: rgba(255,255,255,0.3);
}
.cover-wrapper p{ .cover-wrapper p{
font-size: 11px; font-size: 11px;
line-height: 13px; line-height: 13px;
letter-spacing: 0.2px; letter-spacing: 0.2px;
max-width: 153px; max-width: 200px;
position: absolute; padding: 5px 10px;
bottom: 75px;
left: 63px;
padding-right: 10px;
opacity: 0; opacity: 0;
-webkit-transition: all .6s ease-in-out; -webkit-transition: all .6s ease-in-out;
-moz-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(){ ...@@ -255,22 +255,22 @@ $(function(){
} }
}, },
}); });
$(document).on('click', '.moveDown', function(){ $(document).on('click', '.moveDown', function(){
$.fn.fullpage.moveSectionDown(); $.fn.fullpage.moveSectionDown();
}); });
} }
$.fn.getMenuBg = function(){ $.fn.getMenuBg = function(){
var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img'); var imgSrc = $('header .nav-content > ul').find(' > li.current').data('img');
navwWidth = $('.nav-wrapper').width(); navwWidth = $('.nav-wrapper').width();
$('.container-bg').css({ $('.container-bg').css({
'background-image': "url("+ imgSrc +")", 'background-image': "url("+ imgSrc +")",
'opacity' : 0, 'opacity' : 0,
}) })
tlBg = new TimelineMax(); tlBg = new TimelineMax();
tlBg.to('.container-bg',0.9,{opacity:1},0.5); tlBg.to('.container-bg',0.9,{opacity:1},0.5);
tlBg.to('.container-bg',1.2,{width:navwWidth},0.4); tlBg.to('.container-bg',1.2,{width:navwWidth},0.4);
tlBg.from('.full-slides',1.2,{opacity:0, width:0},0.4); tlBg.from('.full-slides',1.2,{opacity:0, width:0},0.4);
} }
//Responsive function //Responsive function
$.fn.responsive = function(){ $.fn.responsive = function(){
var footerHeight = $('footer').height(), var footerHeight = $('footer').height(),
...@@ -298,7 +298,7 @@ $(function(){ ...@@ -298,7 +298,7 @@ $(function(){
$('.contact-form').height(windowHeight - footerHeight); $('.contact-form').height(windowHeight - footerHeight);
$('.contact-form .inner-form').outerHeight(windowHeight - footerContact); $('.contact-form .inner-form').outerHeight(windowHeight - footerContact);
if (lastSectionHeight < windowHeight - footerHeight) 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 //Wordpress js login
$('#user_login').attr('placeholder', 'Identifiant'); $('#user_login').attr('placeholder', 'Identifiant');
...@@ -346,22 +346,29 @@ $.fn.animation = function(){ ...@@ -346,22 +346,29 @@ $.fn.animation = function(){
animateOnScroll(); animateOnScroll();
} }
function onScrollCover(){ function onScrollCover(){
cover = $('.subcat a.active').attr("href"); cover = $('.subcat.current a.active').attr("href");
console.log(cover);
$('.cover-wrapper').each(function () { $('.cover-wrapper').each(function () {
coverWrapper = $(this).data('cat'); coverWrapper = $(this).data('cat');
if (coverWrapper == cover && !($(this).hasClass('current-cover'))) { if (coverWrapper == cover && !($(this).hasClass('current-cover'))) {
$('.cover-wrapper').removeClass('last-current-cover'); $('.cover-wrapper').removeClass('last-current-cover');
$('.cover-desc-wrapper').removeClass('fadeInDown').addClass('animated fadeOutDown')
$('.current-cover').addClass('last-current-cover'); $('.current-cover').addClass('last-current-cover');
$('.cover-wrapper').removeClass('prev next current-cover'); $('.cover-wrapper').removeClass('prev next current-cover');
$(this).prevAll('.cover-wrapper').addClass('prev'); $(this).prevAll('.cover-wrapper').addClass('prev');
$(this).nextAll('.cover-wrapper').addClass('next'); $(this).nextAll('.cover-wrapper').addClass('next');
$(this).addClass('current-cover '); $(this).addClass('current-cover ');
setTimeout(function(){
$('.current-cover .cover-desc-wrapper').removeClass('fadeOutDown').addClass('animated fadeInDown');
}, 600);
} }
}); });
}; };
var lastScrollTop = 0; var lastScrollTop = 0;
function onScroll(event){ function onScroll(event){
var scrollPos = $(this).scrollTop(), var scrollPos = $(this).scrollTop(),
titleHeight = ($('.panel section > h2').outerHeight()/2) ;
//items = event.data.items; //items = event.data.items;
items = "li .subcat a"; items = "li .subcat a";
if ( timer ) clearTimeout(timer); if ( timer ) clearTimeout(timer);
...@@ -374,7 +381,7 @@ $(items).each(function () { ...@@ -374,7 +381,7 @@ $(items).each(function () {
var currLink = $(this); var currLink = $(this);
var refElement = $(currLink.attr("href")); var refElement = $(currLink.attr("href"));
//console.log(currLink); //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"); $('.subcat a').removeClass("active");
currLink.addClass("active"); currLink.addClass("active");
if ($('nav ul ul').find('li.active')){ if ($('nav ul ul').find('li.active')){
...@@ -430,7 +437,9 @@ $(document).ready(function(){ ...@@ -430,7 +437,9 @@ $(document).ready(function(){
$('.product-list article').each(function(){ $('.product-list article').each(function(){
$(this).showProductListColors(); $(this).showProductListColors();
}); });
onScrollCover(); setTimeout(function(){
onScrollCover();
}, 330);
$.fn.open_nav(); $.fn.open_nav();
scrollAnchor('body', false); scrollAnchor('body', false);
$('.news-btn').open_news(); $('.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(){ $(function(){
var initFunction=function(){ var initFunction=function(){
$('a[href^="#"], .easyzoom img').click(function(e){ $('a[href^="#"], .easyzoom img').click(function(e){
...@@ -47,16 +74,16 @@ $(function(){ ...@@ -47,16 +74,16 @@ $(function(){
} }
}) })
} }
$.fn.selectFormat = function(){ $.fn.selectFormat = function(){
$(this).on('click',function(){ $(this).on('click',function(){
var actifImage = $(this).find('img').data('img-active'), var actifImage = $(this).find('img').data('img-active'),
initialImage = $(this).find('img').data('img'); initialImage = $(this).find('img').data('img');
$(this).parent().parent().find('li').each(function(){ $(this).parent().parent().find('li').each(function(){
img = $(this).find('img'); img = $(this).find('img');
img.attr('src',img.data('img')); img.attr('src',img.data('img'));
}) })
$(this).parent().parent().find('li').removeClass('selected'); $(this).parent().parent().find('li').removeClass('selected');
...@@ -82,10 +109,10 @@ $(function(){ ...@@ -82,10 +109,10 @@ $(function(){
}); });
} }
$.fn.selectSlide = function(slide){ $.fn.selectSlide = function(slide){
var data = $(this).data("color"), var data = $(this).data("color"),
dataIndex = slide.find("[data-color="+data+"]").data("slick-index"), dataIndex = slide.find("[data-color="+data+"]").data("slick-index"),
slideno = $(this).data('color'); slideno = $(this).data('color');
slide.slick('slickGoTo', dataIndex); slide.slick('slickGoTo', dataIndex);
} }
$.fn.open_gallery = function(){ $.fn.open_gallery = function(){
$(this).on('click',function(){ $(this).on('click',function(){
...@@ -93,12 +120,12 @@ $(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.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('.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('.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').on('click','.close-btn,article',function(){
$('.gallery').fadeTo( "slow", 0).css('visibility','hidden'); $('.gallery').fadeTo( "slow", 0).css('visibility','hidden');
$('#slides,.nav-slider').fadeTo( "slow", 1); $('#slides,.nav-slider').fadeTo( "slow", 1);
}) })
} }
$.fn.showRightPanelAnimation = function(removeClass,addClass){ $.fn.showRightPanelAnimation = function(removeClass,addClass){
...@@ -125,49 +152,27 @@ $(function(){ ...@@ -125,49 +152,27 @@ $(function(){
}) })
} }
$.fn.productAnimation = function(){ $.fn.productAnimation = function(){
//first format Actif //first format Actif
var activeImg = $('.format-label #format_0').data('img-active'); var activeImg = $('.format-label #format_0').data('img-active');
$('.format-label #format_0').attr('src',activeImg); $('.format-label #format_0').attr('src',activeImg);
tlProduct = new TimelineMax(); tlProduct = new TimelineMax();
tlProduct.fromTo('.product-images',0.2,{autoAlpha:0, marginLeft:"-10%"},{autoAlpha:1, marginLeft:"0"},0); 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.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); 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() { $('.product-list article img, .product-list article ul li').on('click', function() {
$('head').append($('.header-shop')); $('head').append($('.header-shop'));
var toLink = $(this).data('link'); var toLink = $(this).data('link');
$('.load-page').parent().addClass('active'); history.pushState(null, null, toLink);
$('.load-page').load(toLink,function(){ $('.load-page').parent().addClass('active');
//alert('here'); $('.load-page').load(toLink,function(){
sizeProductDetails = $('.product-details .list').length; loadProductContent();
if (sizeProductDetails < 2) { $('html').css('overflow','hidden');
$('.product-info').outerWidth('78.3%'); console.log('heaeeee');
}
$('.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();
}); });
}); })
}) loadProductContent();
}); });
\ No newline at end of file \ 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' ...@@ -101,7 +101,9 @@ $child_category = get_terms('product_cat', array('parent' => $cateID, 'child_of'
foreach ($child_category as $key => $value) : 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) ?>')"> <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> </div>
<?php <?php
endforeach; 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