Skip to content

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

[Update]Redmine - #641 : Image transition

parent de26c331
Hide whitespace changes
Inline Side-by-side
Showing with 154 additions and 107 deletions
wp-content/themes/nap/assets/css/main.css
View file @ 6d84938d
......@@ -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
View file @ 6d84938d
......@@ -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() {
......
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