I want to make a website like that (because I have am really bad in English so I put an image).
我想建立一个这样的网站(因为我的英语非常糟糕所以我放了一个图像)。
<html>
<body>
<div id="menu"> </div>
<div id="content1"> </div>
<div id="content2"> </div>
<div id="content3"> </div>
</body>
</html>
I Hope you understand, I know how to fix a div with CSS, but I don't know how to separate my website in different parts and make a scrolling animation.
我希望你理解,我知道如何用CSS修复div,但我不知道如何在不同的部分分离我的网站并制作滚动动画。
Hope you all can help me!
希望大家都能帮助我!
1 个解决方案
#1
1
If I correctly understand your question, this should be somewhere near what you'd like.
如果我正确理解你的问题,这应该在你想要的地方附近。
HTML:
<div id="menu">
<h1>This is the menu div</h1>
</div>
<div id="main-container">
<div id="content-container">
<div id="content1">
<h1>This is content 1</h1>
<a href="#" id="right1">Right</a>
</div>
<div id="content2">
<h1>This is content 2</h1>
<a href="#" id="left2">Left</a>
<a href="#" id="right2">Right</a>
</div>
<div id="content3">
<h1>This is content 3</h1>
<a href="#" id="left3">Left</a>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
text-align: center;
}
h1 {
margin: 0;
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 25px;
}
#menu {
width: 100%;
height: 20%;
}
#main-container {
width: 100%;
height: 80%;
overflow: hidden;
}
#content-container {
width: 300%;
height: 100%;
position: relative;
top: 0;
left: 0;
font-size: 0px;
transition: left 0.5s ease;
-o-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-webkit-transition: left 0.5s ease;
}
#content-container > div {
width: 33.33%;
height: 100%;
display: inline-block;
font-size: 15px;
}
#content1 {
background: red;
}
#content2 {
background: orange;
}
#content3 {
background: green;
}
JS:
$("#right1, #left3").on("click", function() {
// This fires when 'right' is pressed on content 1,
// or 'left' is pressed on content 3. In both cases
// we want to move to show content 2.
$("#content-container").css({left: "-100%"});
});
$("#left2").on("click", function() {
// This fires when 'left' is pressed on content 2.
// We want to move to show content 1.
$("#content-container").css({left: "0%"});
});
$("#right2").on("click", function() {
// This fires when 'right' is pressed on content 2.
// We want to move to show content 3.
$("#content-container").css({left: "-200%"});
});
To explain, this sliding effect is based around CSS3 transitions. The *-transition properties in the CSS specify that the left property should be animated with length 0.5s, using the ease movement. This means that when you change the left property of the content-container div, the browser animates the change to create the sliding effect you wanted, rather than just doing it instantly.
为了解释,这种滑动效果是基于CSS3过渡。 CSS中的* -transition属性指定左侧属性应使用轻松移动设置为长度为0.5秒的动画。这意味着当您更改content-container div的left属性时,浏览器会动画更改以创建您想要的滑动效果,而不是立即执行。
The way the pages work is that each content div is set to 1/3 of the width of the content-container div, i.e. width: 33.33%. The content-container div is 3 times the width of the page, i.e. width: 300%. The content divs inside are made to be side-by-side using display: inline-block, and with this method you need to set font-size: 0px on the content-container div and re-set font-size: (xyz)px in the content divs. This is a quirk of the way inline-block works, but by doing the above you remove the horizontal space between the 3 content divs.
页面的工作方式是每个内容div设置为内容容器div宽度的1/3,即宽度:33.33%。内容容器div是页面宽度的3倍,即宽度:300%。里面的内容div使用display:inline-block并排,你需要在content-container div上设置font-size:0px并重新设置font-size:(xyz) px在内容div中。这是内联块工作方式的一个怪癖,但通过执行上述操作,您可以删除3个内容div之间的水平空间。
Finally, the included JS uses jQuery (but you could do it without) to create event handlers for the links which switch pages. These event handlers are commented so should be self-explanatory, but basically they alter the left property of the content-container div according to the page that needs to be displayed.
最后,包含的JS使用jQuery(但你可以不用)来为切换页面的链接创建事件处理程序。这些事件处理程序被注释,因此应该是不言自明的,但基本上它们根据需要显示的页面改变content-container div的left属性。
This JSFiddle shows it working: http://jsfiddle.net/CN8z6/1/
这个JSFiddle显示它工作:http://jsfiddle.net/CN8z6/1/
#1
1
If I correctly understand your question, this should be somewhere near what you'd like.
如果我正确理解你的问题,这应该在你想要的地方附近。
HTML:
<div id="menu">
<h1>This is the menu div</h1>
</div>
<div id="main-container">
<div id="content-container">
<div id="content1">
<h1>This is content 1</h1>
<a href="#" id="right1">Right</a>
</div>
<div id="content2">
<h1>This is content 2</h1>
<a href="#" id="left2">Left</a>
<a href="#" id="right2">Right</a>
</div>
<div id="content3">
<h1>This is content 3</h1>
<a href="#" id="left3">Left</a>
</div>
</div>
</div>
CSS
html, body {
width: 100%;
height: 100%;
margin: 0;
text-align: center;
}
h1 {
margin: 0;
padding: 10px;
font-family: Helvetica, Arial, sans-serif;
font-size: 25px;
}
#menu {
width: 100%;
height: 20%;
}
#main-container {
width: 100%;
height: 80%;
overflow: hidden;
}
#content-container {
width: 300%;
height: 100%;
position: relative;
top: 0;
left: 0;
font-size: 0px;
transition: left 0.5s ease;
-o-transition: left 0.5s ease;
-ms-transition: left 0.5s ease;
-moz-transition: left 0.5s ease;
-webkit-transition: left 0.5s ease;
}
#content-container > div {
width: 33.33%;
height: 100%;
display: inline-block;
font-size: 15px;
}
#content1 {
background: red;
}
#content2 {
background: orange;
}
#content3 {
background: green;
}
JS:
$("#right1, #left3").on("click", function() {
// This fires when 'right' is pressed on content 1,
// or 'left' is pressed on content 3. In both cases
// we want to move to show content 2.
$("#content-container").css({left: "-100%"});
});
$("#left2").on("click", function() {
// This fires when 'left' is pressed on content 2.
// We want to move to show content 1.
$("#content-container").css({left: "0%"});
});
$("#right2").on("click", function() {
// This fires when 'right' is pressed on content 2.
// We want to move to show content 3.
$("#content-container").css({left: "-200%"});
});
To explain, this sliding effect is based around CSS3 transitions. The *-transition properties in the CSS specify that the left property should be animated with length 0.5s, using the ease movement. This means that when you change the left property of the content-container div, the browser animates the change to create the sliding effect you wanted, rather than just doing it instantly.
为了解释,这种滑动效果是基于CSS3过渡。 CSS中的* -transition属性指定左侧属性应使用轻松移动设置为长度为0.5秒的动画。这意味着当您更改content-container div的left属性时,浏览器会动画更改以创建您想要的滑动效果,而不是立即执行。
The way the pages work is that each content div is set to 1/3 of the width of the content-container div, i.e. width: 33.33%. The content-container div is 3 times the width of the page, i.e. width: 300%. The content divs inside are made to be side-by-side using display: inline-block, and with this method you need to set font-size: 0px on the content-container div and re-set font-size: (xyz)px in the content divs. This is a quirk of the way inline-block works, but by doing the above you remove the horizontal space between the 3 content divs.
页面的工作方式是每个内容div设置为内容容器div宽度的1/3,即宽度:33.33%。内容容器div是页面宽度的3倍,即宽度:300%。里面的内容div使用display:inline-block并排,你需要在content-container div上设置font-size:0px并重新设置font-size:(xyz) px在内容div中。这是内联块工作方式的一个怪癖,但通过执行上述操作,您可以删除3个内容div之间的水平空间。
Finally, the included JS uses jQuery (but you could do it without) to create event handlers for the links which switch pages. These event handlers are commented so should be self-explanatory, but basically they alter the left property of the content-container div according to the page that needs to be displayed.
最后,包含的JS使用jQuery(但你可以不用)来为切换页面的链接创建事件处理程序。这些事件处理程序被注释,因此应该是不言自明的,但基本上它们根据需要显示的页面改变content-container div的left属性。
This JSFiddle shows it working: http://jsfiddle.net/CN8z6/1/
这个JSFiddle显示它工作:http://jsfiddle.net/CN8z6/1/