Skip to content

Instantly share code, notes, and snippets.

@brunorafaeI

brunorafaeI/com'on slideshow only CSS3.markdown

Last active May 18, 2016 09:37
Show Gist options
  • Save brunorafaeI/09024db9f0e54d0f41811da1549bb8f7 to your computer and use it in GitHub Desktop.
Save brunorafaeI/09024db9f0e54d0f41811da1549bb8f7 to your computer and use it in GitHub Desktop.
Download ZIP
com'on slideshow only CSS3
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<!-- //http://www.alsacreations.com/tuto/liste/5-javascript.html -->
<head>
<meta charset="UTF-8" />
<title>Com'on - Association de Saint-Nazaire</title>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js'></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<div class="logo-img"><a href="#"><img src="http://www.com-on.be/templates/comon_2015/images/logo.png" alt="Com'on st-nazaire" width="60%" height="60%" /></a></div>
<div class="contact-top">
<p>02 40 66 11 78</p>
<p>panonazaire@orange.fr</p>
</div>
<div class="reseau">
</div>
</header>
<nav class="navigation">
<ul>
<li><a href="#">Accueil</a></li>
<li><a href="#">Nos Services</a></li>
<li><a href="#">Commander</a></li>
<li><a href="#">À propos</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!-- Slider -->
<div id="slider">
<div class="slides">
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="http://www.pano-group.com/wp-content/uploads/2014/10/Pano-boutique-Annecy-041.jpg" width="100%" height="100%">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="http://www.pano-group.com/wp-content/uploads/2013/12/PB-Rixheim-espace-accueil.jpg" width="100%" height="100%">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="http://www.pano-evreux.fr/wp-content/uploads/2015/06/Convention-2015.jpg" width="100%" height="100%">
</div>
</div>
<div class="slider">
<div class="legend"></div>
<div class="content">
<div class="content-txt">
<h1>Lorem ipsum dolor</h1>
<h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
</div>
</div>
<div class="image">
<img src="http://www.aviron-montargis.fr/images/PanoBoutique.jpg" width="100%" height="100%">
</div>
</div>
</div>
<div class="switch">
<ul>
<li>
<div class="on"></div>
</li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<section>
<article>
<title>
Nouveautés
</title>
<div class="img-article"><a href="#"><img src="http://www.pano-group.com/wp-content/uploads/2014/01/portrait-St%C3%A9phane-Danilo1.jpg" alt="" width="40%" height="40%" /></a></div>
<h1>Nouveautés</h1>
<p>Contenu des nouveautés</p>
</article>
<article>
<title>
Commander
</title>
<h1>Commander</h1>
<p>contenu de la commande</p>
</article>
</section>
<aside>
<title>
Nos Clients - Publicité
</title>
<h1>Publicité</h1>
<div class="clients">
<img src="http://www.arianeconseil.fr/wp-content/uploads/2015/07/SNCF.png" alt="SNCF" widht="60px" height="60px"><a href="http://www.sncf.com/"></a></img>
<img src="http://www.arianeconseil.fr/wp-content/uploads/2015/07/SNCF.png" alt="SNCF" widht="60px" height="60px"><a href="http://www.sncf.com/"></a></img>
<img src="http://www.arianeconseil.fr/wp-content/uploads/2015/07/SNCF.png" alt="SNCF" widht="60px" height="60px"><a href="http://www.sncf.com/"></a></img>
<img src="http://www.arianeconseil.fr/wp-content/uploads/2015/07/SNCF.png" alt="SNCF" widht="60px" height="60px"><a href="http://www.sncf.com/"></a></img>
</div>
</aside>
<footer>
<p>Com'on Association de pano boutique - Saint-Nazaire Corpyright 2016 <br/>115, Avenue de la République - 44600 Saint-Nazaire France</p>
<p></p>
</footer>
</body>
</html>
Raw
script.js
$(function(){ $(window).scroll(function () {
//Au scroll dans la fenetre on déclenche la fonction
if ($(this).scrollTop() > 80) {
//si on a défilé de plus de 150px du haut vers le bas
$('nav').addClass("fixNav"); //on ajoute la classe "fixNavigation" à <div id="navigation">
} else { $('nav').removeClass("fixNav");
//sinon on retire la classe "fixNavigation" à <div id="navigation">
} }); });
Raw
style.css
* {margin:0px; padding:0px; overflow-x:none; font-family: Verdana,sans-serif;}
html, body {
height:100%;
background: url(http://www.communide.fr/medias/files/blue-yellow-bokeh-circles-desktop-wallpaper.jpg) no-repeat center center fixed;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
main{
position:relative;
min-height:100%;
max-width:99%;
}
header {
height:3.5em;
background:rgba(255,255,255, 0.9);
padding:20px;
box-shadow: 0px 0px 20px 1px rgba(0,0,0, 0.8) inset;
}
.logo-img{
float:left;
left: 1.5em;
}
.contact-top {
float:left;
width:220px;
margin-left:1.5em;
text-align:right;
font-size:0.9em;
}
.reseau {
float:left;
margin-left:1.5em;
height:40px;
padding:6px;
width:220px;
background-color:#FF0;
}
nav {
float:left;
height:50px;
width:100%;
background:rgba(0,0,0, 0.7);
m
}
.fixNav {
z-index: 9999;
position: fixed;
top:0px;
}
nav ul {
list-style:none;
display:block;
margin-left:40%;
}
nav ul li {
display:inline;
}
nav ul li a {
float:left;
text-decoration:none;
font-size:0.9em;
line-height:1.5;
font-weight:bold;
color: rgba(255,128,25, 0.9);
border-bottom: 0px solid rgba(0,0,0, 0);
transition: border 0.6s;
padding:18px 12px 0px 12px;
}
nav ul li a:hover{
color:rgba(255,255,255, 0.9);
border-bottom:4px solid rgba(255,128,25, 1);
transition: border 0.4s;
}
section{
float:left;
background-color: rgba(153,0,52, 0.9);
margin:5em 2em;
width:60%;
height:95%;
border-radius: 0px 10px 10px 0px;
}
section article {
margin:12px;
padding:8px;
border:1px dashed rgba(255,255,255, 1);
border-radius: 0px 10px;
}
.img-article {
float:left;
}
aside {
position:absolute;
right:0px;
margin:5em 2em;
width: 30%;
height:95%;
background-color: rgba(204,165,20, 0.8);
border-radius: 10px 0px 0px 10px;
}
aside h1 {
margin:6px auto;
text-align:center;
color: rgba(0,0,0, .9);
}
aside .clients {
margin:14px;
}
aside .clients img {
padding:4px;
border:1px dashed #fff;
}
footer {
position:fixed;
width:99%;
height:2em;
bottom:0px;
text-align:center;
color: rgb(50,50,50);
font-size:0.8em;
background-color: rgba(255,255,255, 0.8);
padding:0.6em;
}
/* Slider */
#slider{
width:100%;
height:500px;
position:relative;
overflow:hidden;
}
@keyframes load{
from{left:-100%;}
to{left:0;}
}
.slides{
width:400%;
height:100%;
position:relative;
-webkit-animation:slide 30s infinite;
-moz-animation:slide 30s infinite;
animation:slide 30s infinite;
}
.slider{
width:25%;
height:100%;
float:left;
position:relative;
z-index:1;
overflow:hidden;
}
.slide img{
width:100%;
height:100%;
}
.slide img{
width:100%;
height:100%;
}
.image{
width:100%;
height:100%;
}
.image img{
width:100%;
height:100%;
}
/* Legend */
.legend{
border:500px solid transparent;
border-left:800px solid rgba(0, 0, 0, .7);
border-bottom:0;
position:absolute;
bottom:0;
}
/* Contents */
.content{
width:100%;
height:100%;
position:absolute;
overflow:hidden;
}
.content-txt{
width:400px;
height:150px;
float:left;
position:relative;
top:300px;
-webkit-animation:content-s 7.5s infinite;
-moz-animation:content-s 7.5s infinite;
animation:content-s 7.5s infinite;
}
.content-txt h1{
font-family:Arial;
text-transform:uppercase;
font-size:24px;
color:#fff;
text-align:left;
margin-left:30px;
padding-bottom:10px;
}
.content-txt h2{
font-family:arial;
font-weight:normal;
font-size:14px;
font-style:italic;
color:#fff;
text-align:left;
margin-left:30px;
}
/* Switch */
.switch{
width:120px;
height:10px;
position:absolute;
bottom:50px;
z-index:99;
left:30px;
}
.switch > ul{
list-style:none;
}
.switch > ul > li{
width:10px;
height:10px;
border-radius:50%;
background:#333;
float:left;
margin-right:5px;
cursor:pointer;
}
.switch ul{
overflow:hidden;
}
.on{
width:100%;
height:100%;
border-radius:50%;
background:#f39c12;
position:relative;
-webkit-animation:on 30s infinite;
-moz-animation:on 30s infinite;
animation:on 30s infinite;
}
/* Animation */
@-webkit-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@-moz-keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@keyframes slide{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:-100%;
}
46%{
margin-left:-100%;
}
50%{
margin-left:-200%;
}
71%{
margin-left:-200%;
}
75%{
margin-left:-300%;
}
96%{
margin-left:-300%;
}
}
@-webkit-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@-moz-keyframes content-s{
0%{left:-420px;}
10%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@keyframes content-s{
0%{left:-420px;}
10%{left:20px;}
15%{left:0px;}
30%{left:0px;}
40%{left:0px;}
50%{left:0px;}
60%{left:0px;}
70%{left:0;}
80%{left:-420px;}
90%{left:-420px;}
100%{left:-420px;}
}
@-webkit-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@-moz-keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
@keyframes on{
0%,100%{
margin-left:0%;
}
21%{
margin-left:0%;
}
25%{
margin-left:15px;
}
46%{
margin-left:15px;
}
50%{
margin-left:30px;
}
71%{
margin-left:30px;
}
75%{
margin-left:45px;
}
96%{
margin-left:45px;
}
}
nav select:focus{
outline:none;
}
/* Content */
.container{
width:70%;
height:auto;
padding:20px 0;
margin:20px auto;
}
.container h1{
font-family:Arial;
font-size:24px;
color:#222;
text-transform:uppercase;
margin:20px 0;
}
.container h2{
font-family:arial;
font-size:16px;
color:#444;
margin-top:10px;
}
.container h3{
font-family:arial;
font-weight:normal;
font-size:16px;
color:#aaa;
}
.code{
width:600px;
height:auto;
margin:20px auto;
padding:10px 20px;
background:#222;
border-left:10px solid #aaa;
font-family: arial;
font-size:16px;
color:#fff;
}
.code span{
color:#89A978;
}
.space{
width:20px;
height:1px;
float:left;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment