Skip to content

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

[Bugfix]Redmine - #641 : Image transition

parent 0f9655fd
Hide whitespace changes
Inline Side-by-side
Showing with 139 additions and 171 deletions
wp-content/themes/nap/assets/css/main.css
View file @ bbd65944
...@@ -65,11 +65,11 @@ ...@@ -65,11 +65,11 @@
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
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 {
from { from {
...@@ -711,20 +711,20 @@ nav ul ul{ ...@@ -711,20 +711,20 @@ nav ul ul{
/*nav ul ul li:before{ /*nav ul ul li:before{
content: "•"; content: "•";
padding-right: 5px; padding-right: 5px;
}*/ }*/
nav ul ul li { nav ul ul li {
font-size: 14px; font-size: 14px;
font-weight: 300; font-weight: 300;
line-height: 19px; line-height: 19px;
padding-bottom: 5px; padding-bottom: 5px;
} }
.header .nav-content li li a { .header .nav-content li li a {
opacity: 0.6; opacity: 0.6;
} }
.header .nav-content li a.active, .header .nav-content li a.active,
.nav-content ul ul li.active{ .nav-content ul ul li.active{
opacity: 1 !important; opacity: 1 !important;
} }
/* ========================================================================== /* ==========================================================================
VI/ FOOTER...............footer VI/ FOOTER...............footer
========================================================================== */ ========================================================================== */
...@@ -801,7 +801,7 @@ VII/ Pages...............ALL pages ...@@ -801,7 +801,7 @@ VII/ Pages...............ALL pages
/* --------------*/ /* ---------->>> HOME <<<-----------*/ /* --------------*/ /* --------------*/ /* ---------->>> HOME <<<-----------*/ /* --------------*/
#home { #home {
background: rgba(7,17,48,0.5); background: rgba(7,17,48,0.5);
} }
.img-wrapper{ .img-wrapper{
height: 100vh; height: 100vh;
...@@ -880,29 +880,29 @@ aside.news-wrapper { ...@@ -880,29 +880,29 @@ aside.news-wrapper {
width: 59% !important; width: 59% !important;
padding: 39px; padding: 39px;
opacity: 0; opacity: 0;
text-align: center; text-align: center;
position: relative; position: relative;
} }
.product-images .close-panel{ .product-images .close-panel{
position: absolute; position: absolute;
left: 5%; left: 5%;
} }
.woocommerce-product-details__short-description { .woocommerce-product-details__short-description {
display: none; display: none;
} }
.product-slides .product-header { .product-slides .product-header {
text-align: left; text-align: left;
margin-left: 35px; margin-left: 35px;
} }
.product-slides { .product-slides {
width: 580px; width: 580px;
margin: 0 auto; margin: 0 auto;
position: relative; position: relative;
padding-left: 25px; padding-left: 25px;
} }
.product-header{ .product-header{
color: #182566; color: #182566;
...@@ -1098,9 +1098,9 @@ aside.news-wrapper { ...@@ -1098,9 +1098,9 @@ aside.news-wrapper {
} }
.product-details .list ul { .product-details .list ul {
overflow-y: scroll; overflow-y: scroll;
max-height: 560px; max-height: 560px;
margin-right: -17px; margin-right: -17px;
} }
.border-l:before{ .border-l:before{
...@@ -1138,32 +1138,32 @@ aside.news-wrapper { ...@@ -1138,32 +1138,32 @@ aside.news-wrapper {
position: relative; position: relative;
} }
.pa_format ul li { .pa_format ul li {
text-align: center; text-align: center;
color: #313D7A; color: #313D7A;
max-width: 85%; max-width: 85%;
} }
.pa_format ul li label { .pa_format ul li label {
overflow: hidden; overflow: hidden;
display: block; display: block;
vertical-align: text-top; vertical-align: text-top;
} }
label.chevron.bottom { label.chevron.bottom {
display: block; display: block;
width: 120%; width: 120%;
} }
label.chevron.bottom::first-letter { label.chevron.bottom::first-letter {
text-transform: uppercase; text-transform: uppercase;
} }
.pa_format ul li img { .pa_format ul li img {
vertical-align: top; vertical-align: top;
margin-top: -50px; margin-top: -50px;
} }
.pa_format ul li:last-of-type{ .pa_format ul li:last-of-type{
margin-bottom: 20px; margin-bottom: 20px;
} }
.pa_format li.disabled{ .pa_format li.disabled{
color: rgba(26,26,26,0.2); color: rgba(26,26,26,0.2);
...@@ -1246,13 +1246,14 @@ text-transform: uppercase; ...@@ -1246,13 +1246,14 @@ text-transform: uppercase;
} }
.entry-summary .price { .entry-summary .price {
font-size: 0; font-size: 0;
display: none;
} }
.product-info .price{ .product-info .price{
font-size: 20px; font-size: 20px;
line-height: 24px; line-height: 24px;
letter-spacing: 2px; letter-spacing: 2px;
display: block;
} }
.product-info .notice{ .product-info .notice{
font-size: 9px; font-size: 9px;
...@@ -1661,41 +1662,41 @@ text-transform: uppercase; ...@@ -1661,41 +1662,41 @@ text-transform: uppercase;
} }
.filter-bloc .bloc-content ul { .filter-bloc .bloc-content ul {
overflow-y: auto; overflow-y: auto;
max-height: 300px; max-height: 300px;
overflow-x: hidden; overflow-x: hidden;
} }
.filter-bloc .list-color-filter li { .filter-bloc .list-color-filter li {
display: inline-block; display: inline-block;
height: 15px; height: 15px;
width: 15px; width: 15px;
border-radius: 50%; border-radius: 50%;
cursor: pointer; cursor: pointer;
text-align: center; text-align: center;
margin-bottom: 4px; margin-bottom: 4px;
margin-right: 3px; margin-right: 3px;
} }
.filter-bloc .list-color-filter li.selected:before { .filter-bloc .list-color-filter li.selected:before {
content: '\2713'; content: '\2713';
color: #fff; color: #fff;
margin: 0 auto; margin: 0 auto;
font-size: 9px; font-size: 9px;
margin-bottom: 0px; margin-bottom: 0px;
} }
.filter-bloc .list-color-filter li:before { .filter-bloc .list-color-filter li:before {
content: ''; content: '';
} }
.filter-bloc .list-color-filter li:last-child { .filter-bloc .list-color-filter li:last-child {
width: 100%; width: 100%;
margin-top: 8px; margin-top: 8px;
text-align: center; text-align: center;
font-size: 9px; font-size: 9px;
letter-spacing: 0.2px; letter-spacing: 0.2px;
} }
.filter-bloc ul li { .filter-bloc ul li {
display: block; display: block;
...@@ -1787,7 +1788,7 @@ text-transform: uppercase; ...@@ -1787,7 +1788,7 @@ text-transform: uppercase;
} }
.cover-wrapper.next{ .cover-wrapper.next{
top: 100%; top: 100%;
display: block; display: block;
} }
.cover-wrapper.last{ .cover-wrapper.last{
/*z-index: 0;*/ /*z-index: 0;*/
...@@ -1822,11 +1823,11 @@ text-transform: uppercase; ...@@ -1822,11 +1823,11 @@ text-transform: uppercase;
} }
.panel .product-list article { .panel .product-list article {
/* height: 195px;*/ /* height: 195px;*/
width: 170px; width: 170px;
display: inline-block; display: inline-block;
cursor: pointer; cursor: pointer;
margin-bottom: 12px; margin-bottom: 12px;
position: relative; position: relative;
} }
.product-list article .article-bg{ .product-list article .article-bg{
opacity: 0.1; opacity: 0.1;
......
wp-content/themes/nap/assets/js/main.js
View file @ bbd65944
...@@ -37,7 +37,7 @@ $(function(){ ...@@ -37,7 +37,7 @@ $(function(){
$('.gallery-wrapper').removeClass('hidden-elem').addClass('animated visible-elem fadeInUp'); $('.gallery-wrapper').removeClass('hidden-elem').addClass('animated visible-elem fadeInUp');
},0) },0)
}); });
}); });
//Get file name of uploaded file //Get file name of uploaded file
$('#file-p').on('change',function(e){ $('#file-p').on('change',function(e){
var fileName = e.target.files[0].name; var fileName = e.target.files[0].name;
...@@ -164,59 +164,58 @@ $(function(){ ...@@ -164,59 +164,58 @@ $(function(){
}else{ }else{
$this.removeClass('active'); $this.removeClass('active');
$this.find('.bloc-content').slideUp('slow'); $this.find('.bloc-content').slideUp('slow');
//$('.commercial').slideDown('slow'); }
}
}).on('click','.filter-bloc li:not(.disabled,.reinit)',function(e){ }).on('click','.filter-bloc li:not(.disabled,.reinit)',function(e){
e.stopPropagation(); e.stopPropagation();
$(this).toggleClass('selected'); $(this).toggleClass('selected');
var e = $(this).parent().find('.selected').length, var e = $(this).parent().find('.selected').length,
parentFilter = $(this).parent().parent().parent(); parentFilter = $(this).parent().parent().parent();
e ? parentFilter.addClass('selected-filter') : parentFilter.removeClass('selected-filter') ; e ? parentFilter.addClass('selected-filter') : parentFilter.removeClass('selected-filter') ;
}).on('click','.filter-bloc .reinit',function(){ }).on('click','.filter-bloc .reinit',function(){
selector = $(this).parent().parent(); selector = $(this).parent().parent();
selector.parent().reinitFilter(); selector.parent().reinitFilter();
selector.find('li').reinitFilter(); selector.find('li').reinitFilter();
}).on('click','.reinit-all',function(){ }).on('click','.reinit-all',function(){
$('.filter-bloc , .filter-bloc li').reinitFilter(); $('.filter-bloc , .filter-bloc li').reinitFilter();
}); });
} }
$.fn.changeProductImageBg = function(){ $.fn.changeProductImageBg = function(){
var var
selectedColor = checkWhiteColor($(this).data("color")), selectedColor = checkWhiteColor($(this).data("color")),
selectedImage = $(this).data("image"), selectedImage = $(this).data("image"),
linkProduct = $(this).data("link"), linkProduct = $(this).data("link"),
tl = new TimelineMax(), tl = new TimelineMax(),
container = $(this).parent().parent(); container = $(this).parent().parent();
container.find('.article-bg').css({"background-color": selectedColor, opacity:'0.1'}); container.find('.article-bg').css({"background-color": selectedColor, opacity:'0.1'});
container.find('img').attr({'src' : selectedImage , 'data-link' : linkProduct}); container.find('img').attr({'src' : selectedImage , 'data-link' : linkProduct});
tl.fromTo(container.find('img'),1,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0); tl.fromTo(container.find('img'),1,{opacity:0,visibility:"hidden"},{opacity:1,visibility:"visible"},0);
} }
$.fn.animatePageScroll = function(element, duration) { $.fn.animatePageScroll = function(element, duration) {
return $(this).fromTo(element,duration, return $(this).fromTo(element,duration,
{opacity:0,visibility:"hidden",marginBottom:'80px'}, {opacity:0,visibility:"hidden",marginBottom:'80px'},
{opacity:1,visibility:"visible",marginBottom:'0px'},0.7); {opacity:1,visibility:"visible",marginBottom:'0px'},0.7);
} }
$.fn.fullpageSlide = function(){ $.fn.fullpageSlide = function(){
var var
timeout = 1.7, timeout = 1.7,
duration = 1.2; duration = 1.2;
setTimeout(function(){ setTimeout(function(){
$('.moveDown').removeClass('hidden-elem').addClass('visible-elem animated rollIn'); $('.moveDown').removeClass('hidden-elem').addClass('visible-elem animated rollIn');
}, 2000); }, 2000);
$("#fullpage .section").first().addClass('first'); $("#fullpage .section").first().addClass('first');
$(this).fullpage({ $(this).fullpage({
verticalCentered: false, verticalCentered: false,
css3:false, css3:false,
scrollingSpeed: 1500, scrollingSpeed: 1500,
lazyLoading: false , lazyLoading: false ,
fixedElements: 'footer', fixedElements: 'footer',
controlArrows: true, controlArrows: true,
fitToSectionDelay: 800000, fitToSectionDelay: 800000,
fadingEffect: true, fadingEffect: true,
afterLoad: function(anchor, index){ afterLoad: function(anchor, index){
tl1 = new TimelineMax(); tl1 = new TimelineMax();
var firstSection = $("#fullpage .section.first"); var firstSection = $("#fullpage .section.first");
//tl1.animatePageScroll(firstSection,duration); //tl1.animatePageScroll(firstSection,duration);
//console.log(animation); //console.log(animation);
tl1.fromTo(firstSection.find('.bloc .header-bloc'),1.5, tl1.fromTo(firstSection.find('.bloc .header-bloc'),1.5,
...@@ -256,14 +255,11 @@ $(function(){ ...@@ -256,14 +255,11 @@ $(function(){
} }
}, },
}); });
$(document).on('click', '.moveDown', function(){ $(document).on('click', '.moveDown', function(){
$.fn.fullpage.moveSectionDown(); $.fn.fullpage.moveSectionDown();
}); });
} }
$.fn.getMenuBg = function(){
$.fn.getMenuBg = function(){
//debugger;
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({
...@@ -349,7 +345,7 @@ $.fn.animation = function(){ ...@@ -349,7 +345,7 @@ $.fn.animation = function(){
setTimeout(function(){$('.form-wrapper').removeClass('hidden-elem').addClass('animated fadeInUp')},1000) setTimeout(function(){$('.form-wrapper').removeClass('hidden-elem').addClass('animated fadeInUp')},1000)
animateOnScroll(); animateOnScroll();
} }
function onScrollCover(direction){ function onScrollCover(){
cover = $('.subcat a.active').attr("href"); cover = $('.subcat a.active').attr("href");
$('.cover-wrapper').each(function () { $('.cover-wrapper').each(function () {
coverWrapper = $(this).data('cat'); coverWrapper = $(this).data('cat');
...@@ -365,32 +361,20 @@ function onScrollCover(direction){ ...@@ -365,32 +361,20 @@ function onScrollCover(direction){
}; };
var lastScrollTop = 0; var lastScrollTop = 0;
function onScroll(event){ function onScroll(event){
var st = $(this).scrollTop(); var scrollPos = $(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 = event.data.items;
items = "li .subcat a"; items = "li .subcat a";
if ( timer ) clearTimeout(timer); if ( timer ) clearTimeout(timer);
timer = setTimeout(function(){ timer = setTimeout(function(){
onScrollCover(direction); onScrollCover();
}, 330); }, 330);
$(items).each(function () { $(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 - 20 <= scrollPos && refElement.position().top + refElement.height() > scrollPos) { if (refElement.length && refElement.position().top - 100 <= 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')){
...@@ -407,8 +391,6 @@ $(items).each(function () { ...@@ -407,8 +391,6 @@ $(items).each(function () {
currLink.removeClass("active"); currLink.removeClass("active");
} }
}); });
} }
function scrollAnchor(elemId, skipZero){ function scrollAnchor(elemId, skipZero){
$('.subcat a[href^="#"]').on('click', function (e) { $('.subcat a[href^="#"]').on('click', function (e) {
...@@ -422,18 +404,11 @@ function scrollAnchor(elemId, skipZero){ ...@@ -422,18 +404,11 @@ function scrollAnchor(elemId, skipZero){
temp = 0; temp = 0;
$target = $(target); $target = $(target);
$parent = $('#load-page'); $parent = $('#load-page');
// console.log($parent.position().top);
//console.log($(this).position().top);
//console.log(target , $target.offset().top);
//console.log('parent' , $parent.offset().top);
//if (skipZero && $target.offset().top === $parent.offset().top) {return;}
$(elemId).stop().animate({ $(elemId).stop().animate({
'scrollTop': $target.position().top - temp //- $parent.offset().top 'scrollTop': $target.position().top - temp //- $parent.offset().top
}, 1000, 'swing', function () { }, 1000, 'swing', function () {
window.location.hash = target; window.location.hash = target;
// $(document).on("scroll", onS1croll); });
});
}); });
} }
$(window).load( function() { $(window).load( function() {
...@@ -442,10 +417,6 @@ $(window).load( function() { ...@@ -442,10 +417,6 @@ $(window).load( function() {
var timer; var timer;
$(window).scroll(function(e) { $(window).scroll(function(e) {
onScroll(e) onScroll(e)
/* clearTimeout(timer);
timer = setTimeout(function() {
$(window).trigger("scrollStop");
}, 330);*/
}); });
//$(window).bind("scrollStop",onScroll) //$(window).bind("scrollStop",onScroll)
$(document).ready(function(){ $(document).ready(function(){
...@@ -472,13 +443,9 @@ $(document).ready(function(){ ...@@ -472,13 +443,9 @@ $(document).ready(function(){
$.fn.responsive(); $.fn.responsive();
$('.list-color-filter li').setBgColorList(); $('.list-color-filter li').setBgColorList();
$.fn.animation(); //Global animation for entire site $.fn.animation(); //Global animation for entire site
//TODO //TODO
$('.cover-wrapper').last().addClass('last'); $('.cover-wrapper').last().addClass('last');
$('.cover-wrapper').first().addClass('first'); $('.cover-wrapper').first().addClass('first');
}); //end document ready }); //end document ready
$(window).resize(function() { $(window).resize(function() {
......
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