如何使用 jQuery/CSS3 创建“滑入式画廊面板"? [英] How to create 'Slide-in gallery panels' with jQuery/CSS3?
问题描述
通常我知道如何开始，有一些教程甚至经验，但此时我什至不知道如何称呼它.也许仅仅通过告诉我如何正确定义它就可以解决我的问题(-> 根据名称，我可以正确搜索).
Normally I know how to start off, have a few tutorials or even experience, but at this point I don't even know how to call it. Perhaps just by telling me how to correctly define this could be a solution to my problem (-> based upon name, I can correctly search).
让我们给你这个我刚刚制作的快速模型.
Let's give you this quick mockup I just made.
我正在寻找 1:你怎么称呼它，尤其是 2:我将如何创建这样的?
I'm looking for 1: how do you call this, but especially 2: How would I create such?
我想创建几个叠放在一起的面板，然后单击每个面板上的下一步"按钮，您可以将该面板向左(或向右(向后))移动到下一个图块.假设每个面板都是一个组合项目(垂直堆叠)，并且在每个面板(组合项目)内，您可以水平上下滑动以在每个图块上解释项目的一部分.
I would like to create panels, a few stacked above eachother and with the click of the 'next' button on each panel, you can move that panel to the left (or right (backwards)) to go the next tile. Let's say that each panel is a portfolio project (vertically stacked) and within each panel (portfolio project), you can slide horizontally next and back to explain a part of your project on each tile.
每个图块的布局由一个带有完整背景图像(background-size:cover)的图块和半个宽度的图块文本框组成.当然，框的文本应该用 HTML 编写，而不是使用 Photoshop 将其刻录"到图像中，以实现响应性原因.
The layout of each tile consists of a tile with a full background image (background-size:cover) and half a width tile text box. Of course, the text for the box should be written with HTML, instead of 'burned' into the image, by use of Photoshop, for responsive causes.
我假设这可以用 CSS3 和 jQuery 创建.唯一的问题是:我所有的谷歌搜索都没有结果，或者导致了画布外的导航菜单，这不是我在寻找的.
I assume this can be created with CSS3 and jQuery. The only problem is: All my Google searches end up nothing or resulting in Off-canvas navigation menus, which I'm not looking for.
要回答这个问题，可以:1.定义如何调用/我可以在谷歌搜索这个2. 链接我到一个好的教程/插件3. 如果就这么简单，写出代码.
To answer this question, either: 1. Define how this is called/I can search for this at google 2. Link me to a good tutorial/plugin 3. Write out the code if it would be that simple.
谢谢大家！
推荐答案
这实际上非常简单，使用所谓的 radio hack.您可以仅使用 html 和 CSS(用于平滑过渡的 CSS3)，这是非常可观的，因为 jquery 代表您的客户下载的一大块.
This is actually very simple using what is called the radio hack. You can do it with only html and CSS (CSS3 for smooth transitions), which is very appreciable as jquery represents a big chunk for your clients to download.
基本上就是这样(这里的工作演示:http://codepen.io/anon/pen/jcgxI):
Basically this is how it goes (working demo here: http://codepen.io/anon/pen/jcgxI):
HTML
我们使用一组单选输入来确定应该出现哪个标签".收音机在这里是完美的，因为当一个被选中时，所有其他的都必须被取消选中.因此，请确保您的整个集合的属性 NAME 相同.
We use a radio set of inputs to determine which "tab" should appear. Radios are perfect here because when one is check, all other must be unchecked. For that reason, make sure the attribute NAME is the same for your entire set.
<input type="radio" name="radio-set" id="radio-1" checked="checked"/>
<input type="radio" name="radio-set" id="radio-2"/>
<input type="radio" name="radio-set" id="radio-3"/>
<input type="radio" name="radio-set" id="radio-4"/>
然后我们写我们的内容包裹在任何标签中(结构部分>文章似乎很合适).导航，即使它可以通过单击单选按钮本身来完成，也可以通过单击引用任何输入的标签来完成，这些输入通过其属性 FOR 设置为它们所引用的 ID.
We then write our content wrapped within any tag really (the structure section > article seems fitting). The navigation, even though it could be done via clicking on the radio buttons themselves can also be done through clicking on labels that refer to any input through their attribute FOR set to the ID of the one they refer to.
<section>
<article id="article-1">
<h2>article 1</h2>
<label for="radio-4"></label>
<label for="radio-2"></label>
</article>
<article id="article-2">
<h2>article 2</h2>
<label for="radio-1"></label>
<label for="radio-3"></label>
</article>
<article id="article-3">
<h2>article 3</h2>
<label for="radio-2"></label>
<label for="radio-4"></label>
</article>
<article id="article-4">
<h2>article 4</h2>
<label for="radio-3"></label>
<label for="radio-1"></label>
</article>
</section>
CSS
因为我们将使用易于风格化的标签进行导航，所以我们可以隐藏输入本身.
Because we will navigate with easily stylized labels, we can just hide the inputs themselves.
input{ display:none; }
将所有文章并排放置.
article{
position:absolute;
width:100vw;
}
article:nth-of-type(1){ left: 0 }
article:nth-of-type(2){ left: 100% }
article:nth-of-type(3){ left: 200% }
article:nth-of-type(4){ left: 300% }
我在标签中添加了箭头"(只需点击一些东西，在实际设计中，我会将这些字符切换为字体图标).
I add "arrows" in the labels (just something to click on, in real design, i'd switch these characters to a font icon).
label:first-of-type::before{content: "<"}
label:last-of-type::before {content: ">"}
最后，我们使用 css 选择器~"，表示之后的任何兄弟元素(及其子元素)".这样，我们说的是检查第N个输入后，整个部分滑动到相应的位置".
Finally, we use the css selector "~" that means "any sibling element after (and their children)". This way, we are saying "after the Nth input checked, the whole section slides to the corresponding position".
input[id$="-1"]:checked ~ section{ transform: translateX(0) }
input[id$="-2"]:checked ~ section{ transform: translateX(-100%) }
input[id$="-3"]:checked ~ section{ transform: translateX(-200%) }
input[id$="-4"]:checked ~ section{ transform: translateX(-300%) }
正是因为我们使用了这个选择器，所以我们的输入在滑动标签(这里是部分")之外和之前很重要，这样它们是移动标签的兄弟姐妹(或其父标签的兄弟姐妹).
It is because we use this selector that it is important that our inputs be outside and before the sliding tag (here "section") so that they are siblings of the moving tag (or siblings of its parents).
而且因为我们要观察移动的部分，我们添加了一个过渡属性:
And because we want to observe the section moving, we add a transition property:
section{ transition: all 1s; }
如果您将整个 HTML 包装到另一个标签中(以防止选择器~"的影响传播到其他部分)，您可以为其他滑块使用相同的 HTML 结构，而无需编写任何额外的 CSS！
And if you wrap the whole HTML into another tag (to prevent the effect of selector "~" to propagate to other sections), you can use an identical HTML structure for other sliders without having to write any additional CSS!
完整的教程和漂亮的工作演示(对于垂直版本，但不用担心，它与水平非常相似)可在此处获得:http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
A full blown tutorial with a beautiful working demo (for vertical version but don't worry, it's very similar to horizontal) is available here: http://tympanus.net/codrops/2012/06/12/css-only-responsive-layout-with-smooth-transitions/
PS:在 CSS 中，不要忘记为过渡和变换添加所有供应商前缀.始终检查 w3schools.com(永远不要信任 w3schools，但一定要在线检查其他地方！)以了解需要哪些前缀.示例:
PS: in the CSS, don't forget to add all vendor prefixes for transition and transform. Always check w3schools.com ( never trust w3schools but do check somewhere else online!) to know which prefixes are needed. Example:
-webkit-transition: all 1s;
transition: all 1s;
这篇关于如何使用 jQuery/CSS3 创建“滑入式画廊面板"?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
