私はこのコーディングの世界に不慣れです。HTML と CSS に関する私の知識は最小限であり、Javascript に関しては存在しません。
視差サイトを作成する必要があるプロジェクトに取り組んでおり、各セクションは斜めに分割されています。視差ビットはほぼ完成しましたが、さまざまなブラウザーで対角線を機能させるのに苦労しています。他の誰かがこのフォーラムに投稿したコードを少し使って、Firefox でそれを行う必要がありましたが、それでも他のブラウザー、または少なくとも Chrome と Safari で動作させる必要があります。誰でも助けることができますか?
HTML
<div>
<section><a href="#1"></a></section>
<section><a href="#2"></a></section>
</div>
CSS
html, body, div{ height: 100%; width: 100%; padding: 0; margin: 0; }
div { overflow : hidden; position: relative; }
section {
height : 500%;
background : red;
width : 500%;
position : absolute;
top : -100%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
section + section {
background: #333;
top : 80%;
-moz-transform-origin: 0 0;
-webkit-transform-origin: 0 0;
-o-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
}
section a { display: block; width: 100%; height: 100%; cursor: pointer; }
JS
$(function() {
$(window).on('resize', function() {
var h = $(document).height(),
w = $(document).width();
var angle = ((Math.atan(h/w) * 10.29577951308232));
$('section').css("-moz-transform", "rotate(" + angle + "deg)")
})
.triggerHandler('resize');
});