2017-01-03 20 views
1

センターdivの垂直/水平フレキシボックス

/** 
 
* tiltfx.js 
 
* http://www.codrops.com 
 
* 
 
* Licensed under the MIT license. 
 
* http://www.opensource.org/licenses/mit-license.php 
 
* 
 
* Copyright 2015, Codrops 
 
* http://www.codrops.com 
 
*/ 
 
; 
 
(function(window) { 
 

 
    'use strict'; 
 

 
    /** 
 
    * ************************************************************************** 
 
    * utils 
 
    * ************************************************************************** 
 
    */ 
 

 
    // from https://gist.github.com/desandro/1866474 
 
    var lastTime = 0; 
 
    var prefixes = 'webkit moz ms o'.split(' '); 
 
    // get unprefixed rAF and cAF, if present 
 
    var requestAnimationFrame = window.requestAnimationFrame; 
 
    var cancelAnimationFrame = window.cancelAnimationFrame; 
 
    // loop through vendor prefixes and get prefixed rAF and cAF 
 
    var prefix; 
 
    for (var i = 0; i < prefixes.length; i++) { 
 
    if (requestAnimationFrame && cancelAnimationFrame) { 
 
     break; 
 
    } 
 
    prefix = prefixes[i]; 
 
    requestAnimationFrame = requestAnimationFrame || window[prefix + 'RequestAnimationFrame']; 
 
    cancelAnimationFrame = cancelAnimationFrame || window[prefix + 'CancelAnimationFrame'] || 
 
     window[prefix + 'CancelRequestAnimationFrame']; 
 
    } 
 

 
    // fallback to setTimeout and clearTimeout if either request/cancel is not supported 
 
    if (!requestAnimationFrame || !cancelAnimationFrame) { 
 
    requestAnimationFrame = function(callback, element) { 
 
     var currTime = new Date().getTime(); 
 
     var timeToCall = Math.max(0, 16 - (currTime - lastTime)); 
 
     var id = window.setTimeout(function() { 
 
     callback(currTime + timeToCall); 
 
     }, timeToCall); 
 
     lastTime = currTime + timeToCall; 
 
     return id; 
 
    }; 
 

 
    cancelAnimationFrame = function(id) { 
 
     window.clearTimeout(id); 
 
    }; 
 
    } 
 

 
    function extend(a, b) { 
 
    for (var key in b) { 
 
     if (b.hasOwnProperty(key)) { 
 
     a[key] = b[key]; 
 
     } 
 
    } 
 
    return a; 
 
    } 
 

 
    // from http://www.quirksmode.org/js/events_properties.html#position 
 
    function getMousePos(e) { 
 
    var posx = 0; 
 
    var posy = 0; 
 
    if (!e) var e = window.event; 
 
    if (e.pageX || e.pageY) { 
 
     posx = e.pageX; 
 
     posy = e.pageY; 
 
    } else if (e.clientX || e.clientY) { 
 
     posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft; 
 
     posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop; 
 
    } 
 
    return { 
 
     x: posx, 
 
     y: posy 
 
    } 
 
    } 
 

 
    // from http://www.sberry.me/articles/javascript-event-throttling-debouncing 
 
    function throttle(fn, delay) { 
 
    var allowSample = true; 
 

 
    return function(e) { 
 
     if (allowSample) { 
 
     allowSample = false; 
 
     setTimeout(function() { 
 
      allowSample = true; 
 
     }, delay); 
 
     fn(e); 
 
     } 
 
    }; 
 
    } 
 

 
    /***************************************************************************/ 
 

 
    /** 
 
    * TiltFx fn 
 
    */ 
 
    function TiltFx(el, options) { 
 
    this.el = el; 
 
    this.options = extend({}, this.options); 
 
    extend(this.options, options); 
 
    this._init(); 
 
    this._initEvents(); 
 
    } 
 

 
    /** 
 
    * TiltFx options. 
 
    */ 
 
    TiltFx.prototype.options = { 
 
    // number of extra image elements (div with background-image) to add to the DOM - min:1, max:5 (for a higher number, it's recommended to remove the transitions of .tilt__front in the stylesheet. 
 
    extraImgs: 2, 
 
    // the opacity value for all the image elements. 
 
    opacity: 0.7, 
 
    // by default the first layer does not move. 
 
    bgfixed: true, 
 
    // image element's movement configuration 
 
    movement: { 
 
     perspective: 1000, // perspective value 
 
     translateX: -10, // a relative movement of -10px to 10px on the x-axis (setting a negative value reverses the direction) 
 
     translateY: -10, // a relative movement of -10px to 10px on the y-axis 
 
     translateZ: 20, // a relative movement of -20px to 20px on the z-axis (perspective value must be set). Also, this specific translation is done when the mouse moves vertically. 
 
     rotateX: 2, // a relative rotation of -2deg to 2deg on the x-axis (perspective value must be set) 
 
     rotateY: 2, // a relative rotation of -2deg to 2deg on the y-axis (perspective value must be set) 
 
     rotateZ: 0 // z-axis rotation; by default there's no rotation on the z-axis (perspective value must be set) 
 
    } 
 
    } 
 

 
    /** 
 
    * Initialize: build the necessary structure for the image elements and replace it with the HTML img element. 
 
    */ 
 
    TiltFx.prototype._init = function() { 
 
    this.tiltWrapper = document.createElement('div'); 
 
    this.tiltWrapper.className = 'tilt'; 
 

 
    // main image element. 
 
    this.tiltImgBack = document.createElement('div'); 
 
    this.tiltImgBack.className = 'tilt__back'; 
 
    this.tiltImgBack.style.backgroundImage = 'url(' + this.el.src + ')'; 
 
    this.tiltWrapper.appendChild(this.tiltImgBack); 
 

 
    // image elements limit. 
 
    if (this.options.extraImgs < 1) { 
 
     this.options.extraImgs = 1; 
 
    } else if (this.options.extraImgs > 5) { 
 
     this.options.extraImgs = 5; 
 
    } 
 

 
    if (!this.options.movement.perspective) { 
 
     this.options.movement.perspective = 0; 
 
    } 
 

 
    // add the extra image elements. 
 
    this.imgElems = []; 
 
    for (var i = 0; i < this.options.extraImgs; ++i) { 
 
     var el = document.createElement('div'); 
 
     el.className = 'tilt__front'; 
 
     el.style.backgroundImage = 'url(' + this.el.src + ')'; 
 
     el.style.opacity = this.options.opacity; 
 
     this.tiltWrapper.appendChild(el); 
 
     this.imgElems.push(el); 
 
    } 
 

 
    if (!this.options.bgfixed) { 
 
     this.imgElems.push(this.tiltImgBack); 
 
     ++this.options.extraImgs; 
 
    } 
 

 
    // add it to the DOM and remove original img element. 
 
    this.el.parentNode.insertBefore(this.tiltWrapper, this.el); 
 
    this.el.parentNode.removeChild(this.el); 
 

 
    // tiltWrapper properties: width/height/left/top 
 
    this.view = { 
 
     width: this.tiltWrapper.offsetWidth, 
 
     height: this.tiltWrapper.offsetHeight 
 
    }; 
 
    }; 
 

 
    /** 
 
    * Initialize the events on the main wrapper. 
 
    */ 
 
    TiltFx.prototype._initEvents = function() { 
 
    var self = this, 
 
     moveOpts = self.options.movement; 
 

 
    // mousemove event.. 
 
    this.tiltWrapper.addEventListener('mousemove', function(ev) { 
 
     requestAnimationFrame(function() { 
 
     // mouse position relative to the document. 
 
     var mousepos = getMousePos(ev), 
 
      // document scrolls. 
 
      docScrolls = { 
 
      left: document.body.scrollLeft + document.documentElement.scrollLeft, 
 
      top: document.body.scrollTop + document.documentElement.scrollTop 
 
      }, 
 
      bounds = self.tiltWrapper.getBoundingClientRect(), 
 
      // mouse position relative to the main element (tiltWrapper). 
 
      relmousepos = { 
 
      x: mousepos.x - bounds.left - docScrolls.left, 
 
      y: mousepos.y - bounds.top - docScrolls.top 
 
      }; 
 

 
     // configure the movement for each image element. 
 
     for (var i = 0, len = self.imgElems.length; i < len; ++i) { 
 
      var el = self.imgElems[i], 
 
      rotX = moveOpts.rotateX ? 2 * ((i + 1) * moveOpts.rotateX/self.options.extraImgs)/self.view.height * relmousepos.y - ((i + 1) * moveOpts.rotateX/self.options.extraImgs) : 0, 
 
      rotY = moveOpts.rotateY ? 2 * ((i + 1) * moveOpts.rotateY/self.options.extraImgs)/self.view.width * relmousepos.x - ((i + 1) * moveOpts.rotateY/self.options.extraImgs) : 0, 
 
      rotZ = moveOpts.rotateZ ? 2 * ((i + 1) * moveOpts.rotateZ/self.options.extraImgs)/self.view.width * relmousepos.x - ((i + 1) * moveOpts.rotateZ/self.options.extraImgs) : 0, 
 
      transX = moveOpts.translateX ? 2 * ((i + 1) * moveOpts.translateX/self.options.extraImgs)/self.view.width * relmousepos.x - ((i + 1) * moveOpts.translateX/self.options.extraImgs) : 0, 
 
      transY = moveOpts.translateY ? 2 * ((i + 1) * moveOpts.translateY/self.options.extraImgs)/self.view.height * relmousepos.y - ((i + 1) * moveOpts.translateY/self.options.extraImgs) : 0, 
 
      transZ = moveOpts.translateZ ? 2 * ((i + 1) * moveOpts.translateZ/self.options.extraImgs)/self.view.height * relmousepos.y - ((i + 1) * moveOpts.translateZ/self.options.extraImgs) : 0; 
 

 
      el.style.WebkitTransform = 'perspective(' + moveOpts.perspective + 'px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg) rotate3d(0,0,1,' + rotZ + 'deg)'; 
 
      el.style.transform = 'perspective(' + moveOpts.perspective + 'px) translate3d(' + transX + 'px,' + transY + 'px,' + transZ + 'px) rotate3d(1,0,0,' + rotX + 'deg) rotate3d(0,1,0,' + rotY + 'deg) rotate3d(0,0,1,' + rotZ + 'deg)'; 
 
     } 
 
     }); 
 
    }); 
 

 
    // reset all when mouse leaves the main wrapper. 
 
    this.tiltWrapper.addEventListener('mouseleave', function(ev) { 
 
     setTimeout(function() { 
 
     for (var i = 0, len = self.imgElems.length; i < len; ++i) { 
 
      var el = self.imgElems[i]; 
 
      el.style.WebkitTransform = 'perspective(' + moveOpts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; 
 
      el.style.transform = 'perspective(' + moveOpts.perspective + 'px) translate3d(0,0,0) rotate3d(1,1,1,0deg)'; 
 
     } 
 
     }, 60); 
 

 
    }); 
 

 
    // window resize 
 
    window.addEventListener('resize', throttle(function(ev) { 
 
     // recalculate tiltWrapper properties: width/height/left/top 
 
     self.view = { 
 
     width: self.tiltWrapper.offsetWidth, 
 
     height: self.tiltWrapper.offsetHeight 
 
     }; 
 
    }, 50)); 
 
    }; 
 

 
    function init() { 
 
    // search for imgs with the class "tilt-effect" 
 
    [].slice.call(document.querySelectorAll('img.tilt-effect')).forEach(function(img) { 
 
     new TiltFx(img, JSON.parse(img.getAttribute('data-tilt-options'))); 
 
    }); 
 
    } 
 

 
    init(); 
 

 
    window.TiltFx = TiltFx; 
 

 
})(window);
.tilt { 
 
    overflow: hidden; 
 
    position: relative; 
 
    width: 100%; 
 
    height: 100%; 
 
    margin: 0 auto; 
 
} 
 
.tilt__back { 
 
    position: relative; 
 
} 
 
.tilt__front { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 
.tilt__back, 
 
.tilt__front { 
 
    width: 100%; 
 
    height: 100%; 
 
    background-position: 50% 50%; 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    -webkit-backface-visibility: hidden; 
 
    backface-visibility: hidden; 
 
}
<div class="megawrapper"> 
 
    <div class="w-section home-page" style="transform: translateX(0px) translateY(0px);"> 
 
    <div class="home_logo" style="pointer-events:none;"></div> 
 
    <div class="home_centralarea" data-ix="home-darkfield" style="opacity: 1; transition: opacity 500ms;"> 
 
     <div class="home_parallaxpic_wrapper"> 
 
     <div class="home_parallaxpic" data-ix="home-parallaxpic" style="opacity: 0.4; transition: opacity 1000ms;"> 
 
      <img class="hero__img tilt-effect" data-tilt-options='{ "extraImgs":3, "bgfixed":false, "opacity" : 0.5, "movement": { "perspective" : 1200, "translateX" : -5, "translateY" : -5, "rotateX" : -5, "rotateY" : -5 } }' src="<?php echo get_template_directory_uri(); ?>/images/road.jpeg" 
 
      /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

のない私は、このウェブサイト(www.danielspatzek.com/)のHTML構造を複製します。しかし、私はdivsを適切に中央に置くことはできません。このウェブサイトには、2つのメインディビジョンがあります。.home-pageには、完全に伸びた背景画像と、背景画像にtiltfx効果を注入する.tiltが含まれています。 div .tiltは、その親divによって適用された60pxのパディングのために縮小された高さ/幅を持ちます.home-page

私はHTML構造を複製しましたが、私は60pxのパディングを.home-page all divは右/下にプッシュされ、もはや中央に置かれません。

オリジナルウェブサイトのHTMLは次のとおりです。

<div class="megawrapper"> 
    <div class="w-section home-page" style="transform: translateX(0px) translateY(0px);"> 
     <div class="home_logo" style="pointer-events:none;"></div> 
     <div class="home_centralarea" data-ix="home-darkfield" style="opacity: 1; transition: opacity 500ms;"> 
      <div class="home_parallaxpic_wrapper"> 
       <div class="home_parallaxpic" data-ix="home-parallaxpic" style="opacity: 0.4; transition: opacity 1000ms;"> 
        <img class="hero__img tilt-effect" data-tilt-options='{ "extraImgs":3, "bgfixed":false, "opacity" : 0.5, "movement": { "perspective" : 1200, "translateX" : -5, "translateY" : -5, "rotateX" : -5, "rotateY" : -5 } }' src="<?php echo get_template_directory_uri(); ?>/images/road.jpeg" /> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

のJavaScriptファイルtiltfx.jsが.tilt効果を削除し、HTMLがあるので.tiltに置き換え:

<div class="megawrapper"> 
     <div class="w-section home-page" style="transform: translateX(0px) translateY(0px);"> 
      <div class="home_logo" style="pointer-events:none;"></div> 
      <div class="home_centralarea" data-ix="home-darkfield" style="opacity: 1; transition: opacity 0ms;"> 
       <div class="home_parallaxpic_wrapper"> 
        <div class="home_parallaxpic" data-ix="home-parallaxpic" style="opacity: 0.4; transition: opacity 0ms;"> 
         <div class="tilt"><div class="tilt__back" style="background-image: url(&quot;http://www.danielspatzek.com/themes/Theme/images/bg_home_street.jpg&quot;); transform: perspective(1200px) translate3d(0.787151px, -0.0129973px, 0px) rotate3d(1, 0, 0, -0.0129973deg) rotate3d(0, 1, 0, 0.787151deg) rotate3d(0, 0, 1, 0deg);"></div> 
        </div> 
       </div> 
      </div> 
     </div> 

マイレクリエーションHTMLとCSSは次のようになります。

<div class="megawrapper"> 
    <div class="home-page" style="transform: translateX(0px) translateY(0px);"> 
    <img class="tilt-effect" data-tilt-options='{ "extraImgs":3, "bgfixed":false, "opacity" : 0.5, "movement": { "perspective" : 1200, "translateX" : -5, "translateY" : -5, "rotateX" : -5, "rotateY" : -5 } }' src="<?php echo get_template_directory_uri(); ?>/images/road.jpeg" /> 
    </div> 

 .megawrapper { 
     position: absolute; 
     overflow-x: hidden; 
     overflow-y: hidden; 
     width: 100%; 
     height: 100%; 
    } 

    .home-page { 
     position: absolute; 
     z-index: 0; 
     width: 100%; 
     height: 100%; 
     background-color: #3c3c3e; 
     background-image: url(images/road.jpeg); 
     background-position: 50% 50%; 
     background-size: cover; 
     background-repeat: no-repeat; 
    } 

    .tilt { 
     overflow: hidden; 
     position: relative; 
     width: 100%; 
     height: 100%; 
     margin: 0 auto; 
    } 

    .tilt__back { 
     position: relative; 
    } 

    .tilt__front { 
     position: absolute; 
     top: 0; 
     left: 0; 
    } 

    .tilt__back, .tilt__front { 
     width: 100%; 
     height: 100%; 
     background-position: 50% 50%; 
     background-repeat: no-repeat; 
     background-size: cover; 
     -webkit-backface-visibility: hidden; 
     backface-visibility: hidden; 
    } 

私はウェブサイトと同じレイアウトを得ているようです。 .home-pageに60ピクセルのパディングを適用すると、.tiltが正しく中央にならない理由はわかりません。私は同じ結果を達成するためにフレックスボックスを使用したくない。

+2

あなたは**作業** [スニペット](https://stackoverflow.blog/2014/09/introducing-runnable-javascript-css-and-html-code-snippets/)を作成することができます。私たちがあなたにこのように手助けするのはずっと簡単です。あなたが今までに何を達成したか、そして期待される結果は何ですか? _1つのライブデモは千言語に値する_ :) –

+0

そしてなぜフレックスボックスはありませんか? –

+0

@Aleks Gブラウザのサポートはflexboxの問題です – Joseph

答えて

2

use ボックスサイズ:border-box;.home_pageうまくいきます。下のスニペットを追加しました。ここで

html,body{ 
 
    width:100%; 
 
    height:100%; 
 
    } 
 
.home_page{ 
 
    width:100%; 
 
    height:100%; 
 
    background-color:#3c3c3e; 
 
    background-image: url(https://i.stack.imgur.com/wwy2w.jpg); 
 
    background-position: 50% 50%; 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
    padding:60px; 
 
    box-sizing:border-box; 
 
    } 
 
.tilt { 
 
     overflow: hidden; 
 
     position: relative; 
 
     width: 100%; 
 
     height: 100%; 
 
     margin: 0 auto; 
 
    background-color:yellow; 
 
    }
<div class="home_page"> 
 
    <div class="tilt"></div> 
 
</div>

+0

ありがとう。コードの1行を考えると、数時間私の髪を引っ張ってくれました – Joseph

+0

@Josephいつでも歓迎です –

0

良い方法です。

<div class="divToCenterStuffIn"> 
    <div class="vertCenter"> 
     Vertical Center 
    </div> 
</div> 

<div class="divToCenterStuffIn"> 
    <div class="horzCenter"> 
     Horizontal Center 
    </div> 
</div> 

<div class="divToCenterStuffIn"> 
    <div class="trueCenter"> 
     True Center 
    </div> 
</div> 

.divToCenterStuffIn { 
    position: relative; 
    display: block; 
    width: 10rem; 
    height: 10rem; 
} 

.vertCenter 
{ 
    position: absolute; 
    display: block; 
    top:50%; 
    -ms-transform: translateY(-50%); 
    -moz-transform: translateY(-50%); 
    -webkit-transform: translateY(-50%); 
    transform: translateY(-50%); 
} 

.horzCenter 
{ 
    position: absolute; 
    display: block; 
    left: 50%; 
    -ms-transform: translateX(-50%); 
    -moz-transform: translateX(-50%); 
    -webkit-transform: translateX(-50%); 
    transform: translateX(-50%); 
} 

.trueCenter { 
    position: absolute; 
    display: block; 
    left: 50%; 
    top: 50%; 
    -ms-transform: translate(-50%, -50%); 
    -moz-transform: translate(-50%, -50%); 
    -webkit-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
} 
関連する問題