CSS3 technology is becoming increasingly popular, and things that are realized with its help, all the more impressive and exciting. Today a post about one of these methods. I was there very much impressed with the output image to full screen browser. In a sample of "epic" and large-scale high-quality HD images created a very cool effect. So recently came across a small network of CSS3 tutorial that allows you to place in the background of a slideshow of pictures on the screen, and with some animation.
In addition, the page displays the title picture, and also with CSS. It looks very cool! Although the need to clarify that it will work only in browsers that support CSS animation. So there you go:
Page Layout
For our slideshow will use an unordered list, where each image tag adding Span, and the DIV will be available heading.
<ul class="cb-slideshow"> <li> <span> Image 01 </ span> <div> <h3> re · lax · a · tion </ h3> </ Div> </ Li> <li> <! - ... -> </ li> <li> <! - ... -> </ li> </ Ul>
For each element of Span will be a certain fixed background image (background image) for the slideshow.
CSS styles
First you need to set the styles for the list itself - it will be a fixed position, but stretched to the whole scope. Also used: after pseudo order to locate a picture (with effect) over the image:
.cb-slideshow, .cb-slideshow:after { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; z-index: 0; } .cb-slideshow:after { content: ''; background: transparent url(../images/pattern.png) repeat top left; } The code used by the repetition of style. Cb-slideshow with image effects for images, though you might as well try to place a gradient.
Span, containing the background image will be positioned absolutely and have a height and width of 100%. Since it is within the specific text, make transparent color as we do not want it to display. Background-size property with a value of cover will make sure that the background image cover the entire area of the element, which in turn stretches the full width of the visible screen. Transparency is set to 0, this will be changed even when the animation.
. CB-Slideshow li Infinite linear 36s 0s ; }
The animation for each Span will last at least 36 seconds and run an infinite number of times. But first consider how to resolve the issue with the display headline:
. CB-Slideshow li Infinite linear 36s 0s ; } . CB-Slideshow li div H3 { font-family : 'BebasNeueRegular' , 'Arial Narrow' , Arial , sans-serif ; font-size : 240px ; padding : 0 ; line-height : 200px ; } The animation for the header block will last 36 seconds.
Further, the CSS styles should be defined background images for each Span and delayed animation (animation delay) so that each of the following picture and caption appeared in 6 seconds after the previous one.
.cb-slideshow li:nth-child(1) span { background-image: url(../images/1.jpg) } .cb-slideshow li:nth-child(2) span { background-image: url(../images/2.jpg); animation-delay: 6s; } .cb-slideshow li:nth-child(3) span { background-image: url(../images/3.jpg); animation-delay: 12s; } .cb-slideshow li:nth-child(4) span { background-image: url(../images/4.jpg); animation-delay: 18s; } .cb-slideshow li:nth-child(5) span { background-image: url(../images/5.jpg); animation-delay: 24s; } .cb-slideshow li:nth-child(6) span { background-image: url(../images/6.jpg); animation-delay: 30s; } .cb-slideshow li:nth-child(2) div { animation-delay: 6s; } .cb-slideshow li:nth-child(3) div { animation-delay: 12s; } .cb-slideshow li:nth-child(4) div { animation-delay: 18s; } .cb-slideshow li:nth-child(5) div { animation-delay: 24s; } .cb-slideshow li:nth-child(6) div { animation-delay: 30s; } Now consider the animation process in more detail. Span elements set the animation 36 seconds. During this time, the transparency will vary from 0 to 1 when the animation reaches 8%. More transparency is preserved until we reach 17%. After 25% it should again be equal to zero and remain so until the end.
Where did these numbers? - Let's deal. We want to see each image was 6 seconds, besides, after passing through the whole cycle again, should be shown the first picture. Since the commonly used 6 images, for a total take 36 seconds. Now we need to set the appropriate values of time for transparency. Given the fact that the second frame (picture) animation will start in 6 seconds, we need to know what percentile of the animation should be shown for the first picture. Divide 6 by 36 and get 0.166 ... that would be 16% for our step parameter keyframe.Now, since we do not want to order our image just disappear all the time, we define an intermediate step, which is equal to half of the previous value, that is 8%. The bottom line is that the picture seemed to completely disappear gradually after 17%, respectively, and completely disappeared by 25%. (Ed. - here, of course, have a little pomozgovat and deal with all the subtleties of animation and mathematical operations. If you want to use to use the code "as is" - just place it in style or make similar calculations).
@ Keyframes imageAnimation
Similar calculations apply to animate the title, the only thing that make the Cape a little faster so that he disappeared, so the transparency of 0 to 19%.
@ Keyframes titleAnimation { 0% { Opacity : 0 } 8% { Opacity : 1 } 17% { Opacity : 1 } 19% { Opacity : 0 } 100% { Opacity : 0 } } For all web browsers that do not support animation, we only show the last image slideshow by setting the transparency of the Span to 1.
. No-cssanimations . CB-Slideshow li span { Opacity : 1 ; } Finally you can take care of the font size when viewing area smaller. We will use the media queries in order to set the font smaller for certain values of the width.
@ Media screen and (max-width: 1140px) { . CB-Slideshow li div H3 { font-size : 140px } } @ Media screen and (max-width: 600px) { . CB-Slideshow li div H3 { font-size : 80px } } Perhaps that's it for the simplest version of a slideshow with background images on the screen. While you can add something in the process of transition between pictures.
Alternative Animation
The following sample code, along with a change in image scale also adds a little twist:
@ Keyframes imageAnimation
The title should be "go" to the right (you need to change text-align blocks in the value of right), then get out of moving to the left with the effect of extinction:
@ Keyframes titleAnimation
That is, in principle, and all. On this page you can find the demo (examples) of CSS3 effects. Experiment with different effects and animation for the titles and pictures. It should also be noted that at present the most beautiful and gently slide it will work in browsers with support for Webkit such as Chrome and especially Safari. On the other, alas, can be significantly slowdown, but overall impressions of this picture I think everyone will be good.
