Skip to content

Instantly share code, notes, and snippets.

@maxw3st

maxw3st/Fullpage.html

Created May 12, 2012 02:38
Show Gist options
  • Save maxw3st/2663770 to your computer and use it in GitHub Desktop.
Save maxw3st/2663770 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
Fullpage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pure CSS3 Slideshow Without Page Jump &middot; CodePen</title>
<style>
/**
* Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
* 26 April 2012
*/
body {
background-color:black;
height:2000px;
color:#999;
text-align:center;
font:normal 12px 'Century Gothic',Arial,Sans-Serif;
}
a {
color:blue;
text-decoration:none;
}
h2 {
margin:50px 0px;
font-weight:normal;
}
/* General */
#css3-slider {
margin:30px auto;
padding:0px 0px;
width:448px;
height:286px;
position:relative;
}
#css3-slider li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
/* Navigation */
#css3-slider li input + label {
position:absolute;
bottom:5px;
left:10px;
z-index:999;
font:bold 11px/16px Arial,Sans-Serif;
background-color:black;
color:white;
padding:0px 0px;
width:16px;
text-align:center;
cursor:pointer;
}
#css3-slider li:nth-child(2) label {left:28px; }
#css3-slider li:nth-child(3) label {left:46px; }
#css3-slider li:nth-child(4) label {left:64px; }
#css3-slider li:nth-child(5) label {left:82px; }
#css3-slider li:nth-child(6) label {left:100px;}
#css3-slider li:nth-child(7) label {left:118px;}
#css3-slider li:nth-child(8) label {left:136px;}
#css3-slider li:nth-child(9) label {left:154px;}
/* Images */
#css3-slider li img {
border:none;
outline:none;
position:absolute;
top:50%;
left:50%;
width:0px;
height:0px;
visibility:hidden;
opacity:0;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
/* Captions */
#css3-slider a {
text-decoration:none !important;
}
#css3-slider li a span {
cursor:default;
display:block;
position:absolute;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.8);
font:normal 11px/26px Arial,Sans-Serif;
color:white;
padding:0px 10px;
text-align:right;
opacity:0;
viibility:hidden;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
/* Active navigation */
#css3-slider li input:checked + label {
background-color:#39f;
color:white;
}
/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
top:0%;
left:0%;
width:448px;
height:286px;
visibility:visible;
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-ms-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
opacity:1;
z-index:99;
}
/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
opacity:1;
z-index:100;
}
/* Hide the radio */
#css3-slider input {
display:none;
}
</style>
</head>
<body>
<h2>Pure CSS3 Slideshow Without Page Jump</h2>
<ul id="css3-slider">
<li>
<input type="radio" id="s1" name="num" checked="true" />
<label for="s1">1</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-6HeHswitqWk/T5isM5t2R_I/AAAAAAAACj4/9lO0xDMUal0/s1600/1.jpg" />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type="radio" id="s2" name="num" />
<label for="s2">2</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-Woltrf4d6AI/T5isTPD6fJI/AAAAAAAACkA/HwTHtbC_qIs/s1600/2.jpg" />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type="radio" id="s3" name="num" />
<label for="s3">3</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-OASGpi8DcLE/T5isae5jt-I/AAAAAAAACkI/4bBMukVdh_U/s1600/3.jpg" />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type="radio" id="s4" name="num" />
<label for="s4">4</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-SVuxv0OXano/T5isjMutRsI/AAAAAAAACkQ/UnMAGyDTYxw/s1600/4.jpg" />
<span>Stay relaxed</span>
</a>
</li>
<li>
<input type="radio" id="s5" name="num" />
<label for="s5">5</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-XBr7YS8yfRI/T5ispmmeQjI/AAAAAAAACkY/6vHkc6rUQpY/s1600/5.jpg" />
<span>And you will forever be relaxed</span>
</a>
</li>
<li>
<input type="radio" id="s6" name="num" />
<label for="s6">6</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-6HeHswitqWk/T5isM5t2R_I/AAAAAAAACj4/9lO0xDMUal0/s1600/1.jpg" />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type="radio" id="s7" name="num" />
<label for="s7">7</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-Woltrf4d6AI/T5isTPD6fJI/AAAAAAAACkA/HwTHtbC_qIs/s1600/2.jpg" />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type="radio" id="s8" name="num" />
<label for="s8">8</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-OASGpi8DcLE/T5isae5jt-I/AAAAAAAACkI/4bBMukVdh_U/s1600/3.jpg" />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type="radio" id="s9" name="num" />
<label for="s9">9</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-SVuxv0OXano/T5isjMutRsI/AAAAAAAACkQ/UnMAGyDTYxw/s1600/4.jpg" />
<span>Stay relaxed</span>
</a>
</li>
</ul>
<footer>Images from anywhere - Added to answer <a href="http://hompimpaalaihumgambreng.blogspot.com/2012/04/pure-css3-slideshow-without-page-jump.html?showComment=1335450271135#c5397516628624887283">Suwardi Unggit's question</a></footer>
</body>
</html>
Raw
index.html
<h2>Pure CSS3 Slideshow Without Page Jump</h2>
<ul id="css3-slider">
<li>
<input type="radio" id="s1" name="num" checked="true" />
<label for="s1">1</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-6HeHswitqWk/T5isM5t2R_I/AAAAAAAACj4/9lO0xDMUal0/s1600/1.jpg" />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type="radio" id="s2" name="num" />
<label for="s2">2</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-Woltrf4d6AI/T5isTPD6fJI/AAAAAAAACkA/HwTHtbC_qIs/s1600/2.jpg" />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type="radio" id="s3" name="num" />
<label for="s3">3</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-OASGpi8DcLE/T5isae5jt-I/AAAAAAAACkI/4bBMukVdh_U/s1600/3.jpg" />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type="radio" id="s4" name="num" />
<label for="s4">4</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-SVuxv0OXano/T5isjMutRsI/AAAAAAAACkQ/UnMAGyDTYxw/s1600/4.jpg" />
<span>Stay relaxed</span>
</a>
</li>
<li>
<input type="radio" id="s5" name="num" />
<label for="s5">5</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-XBr7YS8yfRI/T5ispmmeQjI/AAAAAAAACkY/6vHkc6rUQpY/s1600/5.jpg" />
<span>And you will forever be relaxed</span>
</a>
</li>
<li>
<input type="radio" id="s6" name="num" />
<label for="s6">6</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-6HeHswitqWk/T5isM5t2R_I/AAAAAAAACj4/9lO0xDMUal0/s1600/1.jpg" />
<span>Why do you put the egg yolks on your eyes?</span>
</a>
</li>
<li>
<input type="radio" id="s7" name="num" />
<label for="s7">7</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-Woltrf4d6AI/T5isTPD6fJI/AAAAAAAACkA/HwTHtbC_qIs/s1600/2.jpg" />
<span>How can you look ahead if your eyes are on the side?</span>
</a>
</li>
<li>
<input type="radio" id="s8" name="num" />
<label for="s8">8</label>
<a href="/">
<img src="http://1.bp.blogspot.com/-OASGpi8DcLE/T5isae5jt-I/AAAAAAAACkI/4bBMukVdh_U/s1600/3.jpg" />
<span>Keep praying to God</span>
</a>
</li>
<li>
<input type="radio" id="s9" name="num" />
<label for="s9">9</label>
<a href="/">
<img src="http://4.bp.blogspot.com/-SVuxv0OXano/T5isjMutRsI/AAAAAAAACkQ/UnMAGyDTYxw/s1600/4.jpg" />
<span>Stay relaxed</span>
</a>
</li>
</ul>
<footer>Images from anywhere - Added to answer <a href="http://hompimpaalaihumgambreng.blogspot.com/2012/04/pure-css3-slideshow-without-page-jump.html?showComment=1335450271135#c5397516628624887283">Suwardi Unggit's question</a></footer>
Raw
style.css
/**
* Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
* 26 April 2012
*/
body {
background-color:black;
height:2000px;
color:#999;
text-align:center;
font:normal 12px 'Century Gothic',Arial,Sans-Serif;
}
a {
color:blue;
text-decoration:none;
}
h2 {
margin:50px 0px;
font-weight:normal;
}
/* General */
#css3-slider {
margin:30px auto;
padding:0px 0px;
width:448px;
height:286px;
position:relative;
}
#css3-slider li {
list-style:none;
margin:0px 0px;
padding:0px 0px;
}
/* Navigation */
#css3-slider li input + label {
position:absolute;
bottom:5px;
left:10px;
z-index:999;
font:bold 11px/16px Arial,Sans-Serif;
background-color:black;
color:white;
padding:0px 0px;
width:16px;
text-align:center;
cursor:pointer;
}
#css3-slider li:nth-child(2) label {left:28px; }
#css3-slider li:nth-child(3) label {left:46px; }
#css3-slider li:nth-child(4) label {left:64px; }
#css3-slider li:nth-child(5) label {left:82px; }
#css3-slider li:nth-child(6) label {left:100px;}
#css3-slider li:nth-child(7) label {left:118px;}
#css3-slider li:nth-child(8) label {left:136px;}
#css3-slider li:nth-child(9) label {left:154px;}
/* Images */
#css3-slider li img {
border:none;
outline:none;
position:absolute;
top:50%;
left:50%;
width:0px;
height:0px;
visibility:hidden;
opacity:0;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
/* Captions */
#css3-slider a {
text-decoration:none !important;
}
#css3-slider li a span {
cursor:default;
display:block;
position:absolute;
right:0px;
bottom:0px;
left:0px;
background-color:rgba(0,0,0,0.8);
font:normal 11px/26px Arial,Sans-Serif;
color:white;
padding:0px 10px;
text-align:right;
opacity:0;
viibility:hidden;
-webkit-transition:all 2s ease-in-out;
-moz-transition:all 2s ease-in-out;
-ms-transition:all 2s ease-in-out;
-o-transition:all 2s ease-in-out;
transition:all 2s ease-in-out;
}
/* Active navigation */
#css3-slider li input:checked + label {
background-color:#39f;
color:white;
}
/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
top:0%;
left:0%;
width:448px;
height:286px;
visibility:visible;
-webkit-transform:rotate(720deg) scale(1);
-moz-transform:rotate(720deg) scale(1);
-ms-transform:rotate(720deg) scale(1);
-o-transform:rotate(720deg) scale(1);
transform:rotate(720deg) scale(1);
opacity:1;
z-index:99;
}
/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
opacity:1;
z-index:100;
}
/* Hide the radio */
#css3-slider input {
display:none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment