From 505aaec111036b54ff7696192d90feb818c69fb9 Mon Sep 17 00:00:00 2001 From: alexey_pogorelov Date: Tue, 22 Mar 2016 18:37:10 +0200 Subject: [PATCH] temp --- src/css/global.css | 11 ++--- src/css/main.css | 58 +++++++++++++++++++++----- src/index.html | 64 ++++++++++++++++++++++++---- src/js/main.js | 72 ++++++++++++++++++++++++++++++++ src/js/scrollpage.js | 99 ++++++++++++++++++++++---------------------- 5 files changed, 230 insertions(+), 74 deletions(-) diff --git a/src/css/global.css b/src/css/global.css index 85adb1e..89a4ee9 100644 --- a/src/css/global.css +++ b/src/css/global.css @@ -8,11 +8,11 @@ body { background: #111; color: white; font: 14px/1.5em 'Bender', Arial, sans-serif; - overflow: hidden; + /*overflow: hidden;*/ } body::-webkit-scrollbar { - height: 0; - width: 0; + /*height: 0;*/ + /*width: 0;*/ } .wrapper {} /*.modal-holder::-webkit-scrollbar-corner,*/ @@ -650,6 +650,7 @@ button:focus, overflow: hidden; opacity: 0; position: fixed; + position: absolute; left: 0; right: 0; top: 120px; @@ -710,8 +711,8 @@ button:focus, .modal-holder .modal-content .container::-webkit-scrollbar { background-color: rgba(255,255,255,.3); border: none; - height: 6px; - width: 6px; + height: 10px; + width: 10px; } .modal-holder .modal-content .container::-webkit-scrollbar-thumb { background-color: #EE2151; diff --git a/src/css/main.css b/src/css/main.css index 1e54614..c545e1b 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -80,15 +80,10 @@ #application-holder { overflow: hidden; height: 100%; + /*min-height: 1000px;*/ width: 100%; } #horizontal-viewport { - /*overflow: hidden;*/ -/* position: absolute; - left: 0; - top: 0; - bottom: 0; - right: 0;*/ opacity: 1; -webkit-transform: translate(0, 0); transform: translate(0, 0); @@ -109,6 +104,19 @@ display: none; } +.socials-holder { + position: fixed; + bottom: 0; + right: 0; + z-index: 3; +} +.socials-holder li { + display: inline-block; +} +.socials-holder a { + color: #fff; +} + .portrait-orientation { background-color: #000000; color: #ffffff; @@ -593,8 +601,9 @@ section.screen-3 .container .col-right p:nth-of-type(even) { } .modal-container .container img { padding: 40px 0; - height: 400px; - width: 400px; + /*height: 400px;*/ + width: auto; + /*max-height: 200px;*/ } .modal-container .container h1, .modal-container .container h2, @@ -617,14 +626,17 @@ section.screen-3 .container .col-right p:nth-of-type(even) { padding-bottom: 40px; text-align: left; line-height: 1.6em; - min-height: 100%; + /*min-height: 100%;*/ +} +.modal-holder .modal-content { + position: relative; } .modal-holder .modal-content .container { width: 1060px; width: 86%; - -webkit-column-count: 3; +/* -webkit-column-count: 3; -moz-column-count: 3; - column-count: 3; + column-count: 3;*/ } .modal-holder .modal-content .container * { -webkit-touch-callout: initial; @@ -634,6 +646,30 @@ section.screen-3 .container .col-right p:nth-of-type(even) { -ms-user-select: initial; user-select: initial; } +.modal-image { + transform-origin: 50% 50%; + -webkit-transform: scale(1); + transform: scale(1); + /*opacity: 0;*/ + -webkit-transition: all .6s; + transition: all .6s; +} +.tint { + background: rgba(0,0,0,0); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + z-index: 19; + -webkit-transition: background .6s; + transition: background .6s; +} +.tint.active { + background: rgba(0,0,0,.6); + -webkit-transition: background .6s; + transition: background .6s; +} .mobile {} .mobile #presentation { -webkit-filter: blur(0px) !important; diff --git a/src/index.html b/src/index.html index 39a0def..e884f34 100644 --- a/src/index.html +++ b/src/index.html @@ -10,9 +10,8 @@ - - + @@ -120,13 +119,40 @@ +
+ +
+
- -
@@ -187,48 +213,59 @@
@@ -236,48 +273,59 @@
@@ -359,18 +407,18 @@

AATSU pop-up 1

AATSU pop-up 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam velit nihil quis enim alias molestias facilis quisquam, illo fuga sunt deserunt, rem mollitia ab inventore cupiditate illum doloribus temporibus ex.

-

+

Delectus voluptatum iure ullam itaque, at alias, numquam autem dolorem magni possimus ipsum eaque commodi eos, quam pariatur! Ut, esse placeat sint officiis velit at quisquam non, harum dolorem dolorum.

Dignissimos ducimus quos, aut iste saepe, consectetur sapiente itaque? Laboriosam et optio doloremque deserunt quaerat libero totam facere, perspiciatis est rerum blanditiis ad earum, beatae alias, ipsam accusamus. Fugit, magnam.

Id deleniti optio asperiores saepe enim, minus dolor impedit quae facilis dicta amet tempore. Quibusdam ratione ea enim voluptatibus itaque culpa, doloribus. Inventore dolorem ad dolor mollitia non cupiditate tenetur.

-

+

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

-

+

diff --git a/src/js/main.js b/src/js/main.js index 5445488..999c6f1 100644 --- a/src/js/main.js +++ b/src/js/main.js @@ -707,6 +707,78 @@ $(document).on('ready', function () { // }); + // modal image + $('.modal-container').on('click', function (e) { + + if ( e.target.nodeName.toLowerCase() === 'img' ) { + + var $body = $('body'), + $modal = $(this), + $target = $(e.target), + $clone = $target.clone(), + origTop = $target.offset().top, + origLeft = $target.offset().left, + origWidth = $target.width(), + origHeight = $target.height(); + + var stylesStack = { + 'position': 'fixed', + 'z-index': '20', + 'transform': 'scale(1)', + 'opacity': 0, + 'left': origLeft, + 'top': origTop, + 'height': origHeight, + 'width': origWidth + }, + $tint = $('
') + .addClass('tint') + .appendTo( $body ); + + var stylesTarget = { + 'transform': 'scale(1) translate(-50%, -50%)', + '-webkit-transform': 'scale(1) translate(-50%, -50%)', + 'opacity': 1, + 'left': '50%', + 'top': '50%', + 'height': e.target.naturalHeight, + 'width': e.target.naturalWidth + }; + + $clone + .on('click', function (e) { + e.stopPropagation(); + }) + .addClass( 'modal-image' ) + .css( stylesStack ) + .appendTo( $body ); + + setTimeout(function () { + + $clone.css( stylesTarget ); + + $tint.addClass('active'); + + $tint.one('mousedown', function () { + + $tint.removeClass('active'); + $clone.css( stylesStack ).one(transitionPrefix, function () { + + $clone.remove(); + $tint.remove(); + + }); + + }); + + }, 10); + + } + + // + + }); + // init plugins $('.gallery-slider').simpleSlider(); }); diff --git a/src/js/scrollpage.js b/src/js/scrollpage.js index cb923d6..2621967 100644 --- a/src/js/scrollpage.js +++ b/src/js/scrollpage.js @@ -179,47 +179,47 @@ // crossbrowser var animationPrefix = (function () { - var t, - el = document.createElement("fakeelement"), - transitions = { - "transition": "animationend", - "OTransition": "oAnimationEnd", - "MozTransition": "animationend", - "WebkitTransition": "webkitAnimationEnd" - }; + var t, + el = document.createElement("fakeelement"), + transitions = { + "transition": "animationend", + "OTransition": "oAnimationEnd", + "MozTransition": "animationend", + "WebkitTransition": "webkitAnimationEnd" + }; - for (t in transitions){ + for (t in transitions){ - if (el.style[t] !== undefined){ + if (el.style[t] !== undefined){ - return transitions[t]; - - } + return transitions[t]; } - })(), - transitionPrefix = (function () { - var t, - el = document.createElement("fakeelement"), - transitions = { - "transition": "transitionend", - "OTransition": "oTransitionEnd", - "MozTransition": "transitionend", - "WebkitTransition": "webkitTransitionEnd" - }; + } - for (t in transitions){ + })(), + transitionPrefix = (function () { + var t, + el = document.createElement("fakeelement"), + transitions = { + "transition": "transitionend", + "OTransition": "oTransitionEnd", + "MozTransition": "transitionend", + "WebkitTransition": "webkitTransitionEnd" + }; - if (el.style[t] !== undefined){ + for (t in transitions){ - return transitions[t]; + if (el.style[t] !== undefined){ - } + return transitions[t]; } - })(); + } + + })(); // htmlBody = 'body'; if ( jQuery.browser.mobile ) { @@ -242,11 +242,12 @@ var pagesState = {}, pagesState.lastScrollTime = new Date().getTime() - 1000; -var pagesAnimation = (function (id) { +var pagesAnimation = (function () { var $presentation = $('#presentation'), $foreground = $presentation.find('> .foreground-holder'), $background = $presentation.find('> .background-holder'), + $socials = $('.socials-holder'), plg = function (id) { if ( id > 3 ) { @@ -256,6 +257,7 @@ var pagesAnimation = (function (id) { } else { $foreground.show(); + $socials.removeClass('deactive'); } @@ -627,25 +629,29 @@ var scrollPages = (function () { }, animationDone: function (id, after, callback) { - this.blockScroll( false ); - pagesState.currentPage = id; - pagesAnimation( id ); - clearTimeout( pagesState.animatedBoolTimeout ); + setTimeout(function () { - // document.location.hash = '#' + pagesState.pages[id].id; - history.pushState({id: pagesState.pages[id].id}, pagesState.pages[id].id, '#' + pagesState.pages[id].id); + plg.blockScroll( false ); + pagesState.currentPage = id; + pagesAnimation( id ); + clearTimeout( pagesState.animatedBoolTimeout ); - if (typeof after === 'function') { + // document.location.hash = '#' + pagesState.pages[id].id; + history.pushState({id: pagesState.pages[id].id}, pagesState.pages[id].id, '#' + pagesState.pages[id].id); - after(); + if (typeof after === 'function') { - } + after(); - if (typeof callback === 'function') { + } - callback(); + if (typeof callback === 'function') { - } + callback(); + + } + + }, 400); }, blockScroll: function ( boolean, lock ) { @@ -665,7 +671,6 @@ var scrollPages = (function () { cacheDom.$verticalViewport.off(transitionPrefix); clearTimeout( pagesState.animatedBoolTimeout ); pagesState.animatedBool = boolean; - // console.log( this ); }, resize: function () { @@ -785,22 +790,16 @@ var horizontalSlider = (function () { pagesState.animatedBool = true; - cacheDom.$horizontalViewport.addClass('translating'); - - setTimeout( function () { + cacheDom.$horizontalViewport.addClass('translating').one(transitionPrefix, function () { cacheDom.$horizontalViewport.off(transitionPrefix).css({ '-webkit-transform': 'translateX(' + -left + 'px)', 'transform': 'translateX(' + -left + 'px)' }); - }, 600 ); - - this.animatedBoolTimeout = setTimeout( function () { - plg.animationDone(id, after); - }, 1200 ); + }); }