Last active
July 25, 2022 10:40
-
-
Save imorte/4decfe396bf8da7923bc1475e6b7a89f to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // import slick from 'slick'; | |
| // var script = "/images/fo-page/all/los-na-mostu-3d.jpg" | |
| function media() { | |
| $(window).resize(function(i, v) { | |
| var width = $('body').width()/$('.count_page').attr('data-count'); | |
| $('.containers_count_page').css('width', width); | |
| $('[data-translatez]').attr('data-translatez', width/2); | |
| var deg = 0 | |
| $('.container_count_page').each(function () { | |
| $(this).css({ | |
| 'width': width, | |
| 'transform': 'translateZ(-'+width/2+'px) rotateY('+deg+'deg)' | |
| }); | |
| deg = deg - 90; | |
| }); | |
| $('.container_count_page .side:nth-child(4n+1)').css({ | |
| 'transform': 'translateZ('+width/2+'px)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+2)').css({ | |
| 'transform': 'translateX('+width/2+'px) rotateY(90deg)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+3)').css({ | |
| 'transform': 'translateZ(-'+width/2+'px)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+4)').css({ | |
| 'transform': 'translateX(-'+width/2+'px) rotateY(90deg)' | |
| }); | |
| }); | |
| $(window).resize(function(i, v) { | |
| if($(this).width() > 768){ | |
| $('.fo_page').show(); | |
| $('.count_slide').css('opacity', '0'); | |
| } else { | |
| $('.fo_page').hide(); | |
| $('.count_slide').css('opacity', '1'); | |
| }; | |
| }); | |
| } | |
| $(document).ready(function (){ | |
| $('[data-count]').attr('data-count', $('.containers_count_page').length); | |
| $('.count_slide .slick-slide[id]').each(function (i, v) { | |
| var title = $(this).find('[data-title]').attr('data-title'); | |
| var src = $(this).find('[data-src]').attr('data-src'); | |
| var description = $(this).find('[data-dis]').text(); | |
| $('.container_count_page').append('' + | |
| '<div class="side" style="display: none;" data-id="'+i+'">' + | |
| '<div class="text_fo_page">' + | |
| '<div class="align_item">' + | |
| '<div class="title_fo_page">'+title+'</div>' + | |
| '<p>'+description+'</p>' + | |
| '<div class="sub_fo_page" data-sub>Подробнее</div>' + | |
| '</div>' + | |
| '</div>' + | |
| '<div class="img_block"><div class="img" style="background-image: url('+src+');"></div></div>' + | |
| '</div>' | |
| ) | |
| }); | |
| if($('.containers_count_page:nth-child(1)').find('.side').length <= 4){ | |
| $('.fo_page .navi').remove(); | |
| } | |
| // $( window ).on( 'scroll', function () { | |
| // var width2 = $('body').width(); | |
| // console.log(width2); | |
| // }); | |
| media(); | |
| if($(window).width() <= 768){ | |
| $('.fo_page').hide(); | |
| $('.count_slide').css('opacity', '1'); | |
| }; | |
| var width = $('.fo_page').width()/$('.count_page').attr('data-count'); | |
| $('.containers_count_page').css('width', width); | |
| $('[data-translatez]').attr('data-translatez', width/2); | |
| var deg = 0 | |
| $('.container_count_page').each(function () { | |
| $(this).css({ | |
| 'width': width, | |
| 'transform': 'translateZ(-'+width/2+'px) rotateY('+deg+'deg)' | |
| }); | |
| deg = deg - 90; | |
| }); | |
| $('.container_count_page .side:nth-child(4n+1)').css({ | |
| 'transform': 'translateZ('+width/2+'px)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+2)').css({ | |
| 'transform': 'translateX('+width/2+'px) rotateY(90deg)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+3)').css({ | |
| 'transform': 'translateZ(-'+width/2+'px)' | |
| }); | |
| $('.container_count_page .side:nth-child(4n+4)').css({ | |
| 'transform': 'translateX(-'+width/2+'px) rotateY(90deg)' | |
| }); | |
| $('.count_page .containers_count_page').each(function(i, v){ | |
| i++; | |
| $(this).find('.container_count_page .side:nth-child('+i+')').addClass('inc').show(); | |
| }); | |
| $('.one div[data-sub]').on('click', function () { | |
| var data_deg = $(this).parents('.container_count_page').attr('data-deg'); | |
| var parents = $(this).parents('.count_page'); | |
| parents.find('.two .inc').prev().show(); | |
| parents.find('.two .inc').next().show(); | |
| parents.find('.two .inc').next().next().show(); | |
| parents.find('.two .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.three .inc').prev().show(); | |
| parents.find('.three .inc').prev().prev().show(); | |
| parents.find('.three .inc').next().show(); | |
| parents.find('.three .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.four .inc').prev().show(); | |
| parents.find('.four .inc').prev().prev().show(); | |
| parents.find('.four .inc').prev().prev().prev().show(); | |
| parents.find('.four .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| $('.containers_count_page').find('.text_fo_page').fadeOut(1000); | |
| $('.navi').fadeOut(1000); | |
| }); | |
| $('.two div[data-sub]').on('click', function () { | |
| var data_deg = $(this).parents('.container_count_page').attr('data-deg'); | |
| var parents = $(this).parents('.count_page'); | |
| parents.find('.one .inc').next().show(); | |
| parents.find('.one .inc').next().next().show(); | |
| parents.find('.one .inc').next().next().next().show(); | |
| parents.find('.one .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.three .inc').prev().show(); | |
| parents.find('.three .inc').prev().prev().show(); | |
| parents.find('.three .inc').next().show(); | |
| parents.find('.three .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.four .inc').prev().show(); | |
| parents.find('.four .inc').prev().prev().show(); | |
| parents.find('.four .inc').prev().prev().prev().show(); | |
| parents.find('.four .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| $('.containers_count_page').find('.text_fo_page').fadeOut(1000); | |
| $('.navi').fadeOut(1000); | |
| }); | |
| $('.three div[data-sub]').on('click', function () { | |
| var data_deg = $(this).parents('.container_count_page').attr('data-deg'); | |
| var parents = $(this).parents('.count_page'); | |
| parents.find('.one .inc').next().show(); | |
| parents.find('.one .inc').next().next().show(); | |
| parents.find('.one .inc').next().next().next().show(); | |
| parents.find('.one .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.two .inc').prev().show(); | |
| parents.find('.two .inc').next().show(); | |
| parents.find('.two .inc').next().next().show(); | |
| parents.find('.two .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.four .inc').prev().show(); | |
| parents.find('.four .inc').prev().prev().show(); | |
| parents.find('.four .inc').prev().prev().prev().show(); | |
| parents.find('.four .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| $('.containers_count_page').find('.text_fo_page').fadeOut(1000); | |
| $('.navi').fadeOut(1000); | |
| }); | |
| $('.four div[data-sub]').on('click', function () { | |
| var data_deg = $(this).parents('.container_count_page').attr('data-deg'); | |
| var parents = $(this).parents('.count_page'); | |
| parents.find('.one .inc').next().show(); | |
| parents.find('.one .inc').next().next().show(); | |
| parents.find('.one .inc').next().next().next().show(); | |
| parents.find('.one .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.two .inc').prev().show(); | |
| parents.find('.two .inc').next().show(); | |
| parents.find('.two .inc').next().next().show(); | |
| parents.find('.two .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| parents.find('.three .inc').prev().show(); | |
| parents.find('.three .inc').prev().prev().show(); | |
| parents.find('.three .inc').next().show(); | |
| parents.find('.three .container_count_page').css({ | |
| 'transform' : 'translateZ(-'+width/2+'px) rotateY('+data_deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }); | |
| $('.containers_count_page').find('.text_fo_page').fadeOut(1000); | |
| $('.navi').fadeOut(1000); | |
| }) | |
| $('div[data-sub]').on('click', function () { | |
| var i = 0; | |
| $('.container_count_page').one('transitionend', function () { | |
| i++; | |
| if(i == 3){ | |
| // $('.fo_page').fadeOut(0, function () { | |
| $('.count_slide').css('z-index', 2).stop().animate({'opacity': 1},700); | |
| } | |
| }); | |
| $('.container_count_page').off('transitionend'); | |
| $('.count_slide').slick('slickGoTo', $(this).parents('.side').attr('data-id')) | |
| }) | |
| }); | |
| function ready() { | |
| setTimeout(function () { | |
| $('.modal-logo').fadeOut(400, function () { | |
| // $('.layout').css({ | |
| // 'opacity': '1' | |
| // }); | |
| $('.containers_count_page').css({ | |
| 'transform': 'translateY(0%)', | |
| 'transition': 'transform .5s ease-out', | |
| }); | |
| $('.count_page').css({ | |
| 'opacity': '1', | |
| 'transition': 'opacity .5s ease-out', | |
| }); | |
| $('.count_page').one('transitionend', function () { | |
| $('.header').css({ | |
| 'opacity': '1', | |
| 'transition': 'opacity .5s ease-out', | |
| }) | |
| $('.text_fo_page').css({ | |
| 'opacity': '1', | |
| 'transition': 'opacity .5s ease-out', | |
| }) | |
| $('.pages__trigger').css({ | |
| 'opacity': '1', | |
| 'transition': 'opacity .5s ease-out', | |
| }) | |
| }); | |
| $('.count_page').off('transitionend'); | |
| }); | |
| }, 300) | |
| } | |
| document.addEventListener("DOMContentLoaded", ready); | |
| function navigation(elm) { | |
| // console.log('click'); | |
| var translatez = $(elm).parent().attr('data-translatez'); | |
| if($(elm).attr('class') == 'next'){ | |
| $('.containers_count_page').each(function (i,v) { | |
| var his = $(this).find('.container_count_page'); | |
| // $('.container_count_page').each(function () { | |
| // $(this).css({ | |
| // 'transition': 'transform 0s ease-out' | |
| // }); | |
| // }); | |
| his.find('.inc').removeClass('inc').next().addClass('inc').show(); | |
| his.one('transitionend', function () { | |
| $('.inc').prev().hide(); | |
| $('.inc').next().hide(); | |
| }); | |
| var deg = Number(his.attr('data-deg')) - 90; | |
| his.css({ | |
| 'transform': 'translateZ(-'+translatez+'px) rotateY('+deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }) | |
| his.attr('data-deg', deg); | |
| var num = $('[data-count]').attr('data-count'); | |
| if($('.containers_count_page:nth-child('+num+')').find('.inc').next().length != 0){ | |
| $(elm).prev().removeClass('none'); | |
| } else { | |
| $(elm).addClass('none'); | |
| } | |
| his.off('transitionend'); | |
| }) | |
| } | |
| if($(elm).attr('class') == 'prev'){ | |
| $('.containers_count_page').each(function (i,v) { | |
| var his = $(this).find('.container_count_page'); | |
| his.find('.inc').removeClass('inc').prev().addClass('inc').show(); | |
| his.one('transitionend', function () { | |
| $('.inc').prev().hide(); | |
| $('.inc').next().hide(); | |
| }); | |
| var deg = Number(his.attr('data-deg')) + 90; | |
| his.css({ | |
| 'transform': 'translateZ(-'+translatez+'px) rotateY('+deg+'deg)', | |
| 'transition': 'transform 1s ease-out' | |
| }) | |
| his.attr('data-deg', deg); | |
| if($('.containers_count_page:nth-child(1)').find('.inc').prev().length != 0){ | |
| $(elm).next().removeClass('none'); | |
| } else { | |
| $(elm).addClass('none'); | |
| } | |
| his.off('transitionend'); | |
| }) | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
kaef