Skip to content

Instantly share code, notes, and snippets.

/Responsive-Slider.markdown

Created May 5, 2014 17:10
Show Gist options
  • Save anonymous/11542336 to your computer and use it in GitHub Desktop.
Save anonymous/11542336 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Anonasaurus Rex.
Raw
index.html
<article class="texture_scd">
<div class="layer">
<h2>Réalisations web</h2>
<div class="larg">
<a class="sprite-ico dest-top switch block" title="Haut"></a>
<div class="slider-container">
<div class="pastilles"></div>
<div class="slider-turn" style="margin-top: -350px; margin-left: -960px;">
<div class="line" style="margin-left: 0px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://yoannhelin.fr/paulyne/" target="_blank" title="Paulyne Photographie" class="left">
<span class="sprite-crea" id="paulyne"></span>
</a>
</div>
<div class="back">
<a href="http://yoannhelin.fr/paulyne/" target="_blank" title="Paulyne Photographie" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
HTML / CSS / Javascript / Jquery / Intégration / Ajax / PHP / Parralax
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Paulyne Photographie</span>
<p>
<span class="desc">
Site web réalisé pour une photographe amatrice afin d'y exposer ses photographies et partager des albums privés en ligne. Un panel d'administration a été mis en place pour gérer toutes les photos et les albums.
</span>
</p>
</div>
<div class="line" style="margin-left: 960px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://www.iutsrc.fr/" target="_blank" title="IUT MMI" class="left">
<span class="sprite-crea" id="iutsrc"></span>
</a>
</div>
<div class="back">
<a href="http://www.iutsrc.fr/" target="_blank" title="IUT MMI" class="left">
<div class="sprite-crea none">
<p><span class="details">Joomla / HTML / CSS / Javascript / Jquery / Responsive</span></p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Formation MMI</span>
<p>
<span class="desc">Refonte intégrale du site officiel de la formation SRC (Services et Réseaux de Communication) qui repose sur le CMS Joomla. Cette formation a par ailleurs changé de nom, elle est devenue MMI (Métier du Multimédia et de l'Internet).
</span>
</p>
</div>
<div class="line" style="margin-left: 1920px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://www.majordome-sante.fr/" target="_blank" title="Majordome Sante" class="left">
<span class="sprite-crea" id="majordome"></span>
</a>
</div>
<div class="back">
<a href="http://www.majordome-sante.fr/" target="_blank" title="Majordome Sante" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
Intégration / HTML / CSS
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Majordome Sante</span>
<p>
<span class="desc">
Intégration du site web lors de mon stage.
</span>
</p>
</div>
<div class="line" style="margin-left: 2880px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://www.madame-columbo.fr/" target="_blank" title="Madame Columbo" class="left">
<span class="sprite-crea" id="columbo"></span>
</a>
</div>
<div class="back">
<a href="http://www.madame-columbo.fr/" target="_blank" title="Madame Columbo" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
Intégration / HTML / CSS
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Madame Columbo</span>
<p>
<span class="desc">
Intégration du site web lors de mon stage à Nantes.<br />De nombreuses fonctionnalités CSS 3 ont été mises en place. Travail important sur les couleurs et l'intégration des images.
</span>
</p>
</div>
<div class="line" style="margin-left: 3840px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a title="Abilys Web App" class="left">
<span class="sprite-crea" id="abilys"></span>
</a>
</div>
<div class="back">
<a title="Abilys Web App" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
Intégration / HTML / CSS / Responsive / Web app / Smarty
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Abilys WebApp</span>
<p>
<span class="desc">
Projet constitué d'une application web (destinée aux techniciens) et d'une interface d'administration (destinée à la secrétaire). La demande était de planifier des interventions aux techniciens. Ceux-ci devaient ensuite pouvoir les clôturer.
</span>
</p>
</div>
<div class="line" style="margin-left: 4800px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://www.vdp-nantes.com/" target="_blank" title="VDP" class="left">
<span class="sprite-crea" id="vdp"></span>
</a>
</div>
<div class="back">
<a href="http://www.vdp-nantes.com/" target="_blank" title="VDP" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
Intégration / HTML / CSS / Javascript
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">VDP</span>
<p>
<span class="desc">
Intégration du site web lors de mon stage dans un délai d'une journée.
</span>
</p>
</div>
<div class="line" style="margin-left: 5760px;">
<div class="flip-container">
<div class="creation">
<div class="front">
<a href="http://medialabsession.org/" target="_blank" title="Medialab Session" class="left">
<span class="sprite-crea" id="mls"></span>
</a>
</div>
<div class="back">
<a href="http://medialabsession.org/" target="_blank" title="Medialab Session" class="left">
<div class="sprite-crea none">
<p>
<span class="details">
Intégration / HTML / CSS
</span>
</p>
</div>
</a>
</div>
</div>
</div>
<span class="titre">Medialab Session</span>
<p>
<span class="desc">
Intégration du site web lors de mon stage.
</span>
</p>
</div>
<br class="clear" />
</div>
</div>
<a class="sprite-ico dest-bot switch block" title="Bas"></a>
<br class="clear" />
</div>
</div>
</article>
Raw
Responsive-Slider.markdown
Raw
script.js
// Slider by Yoann HELIN : http://yoannhelin.fr
var nbDiapo = $('.line').length;
var width_line = parseInt($(".line").css("max-width"));
for (var i = 0; i < nbDiapo; i++) {
$('.pastilles').append("<span class='past' data-slide='"+i+"'></span>");
if (i == 0) $('.past').addClass('past-act');
$('.line').eq(i).css('margin-left',width_line*i);
};
// Slider
$(".switch").on("click", function(){
var height_line = parseInt($(".line").css("height"));
var width_line = parseInt($(".line").css("max-width"));
var lastDiapo = -((nbDiapo - 2) * height_line);
var marg = parseInt($(".slider-turn").css("margin-top"));
var margW = parseInt($(".slider-turn").css("margin-left"));
var modulo = marg%height_line;
if ($(this).hasClass('dest-bot') && marg >= lastDiapo && modulo == 0) {marg -= height_line; margW -= width_line}
else if ($(this).hasClass('dest-bot') && marg < lastDiapo && modulo == 0) {marg = 0; margW = 0;}
else if ($(this).hasClass('dest-top') && marg < 0 && modulo == 0) {marg += height_line; margW += width_line;}
else if ($(this).hasClass('dest-top') && marg >= 0 && modulo == 0) {marg = lastDiapo - height_line; margW = -(nbDiapo - 1) * width_line;}
else if ($(this).hasClass('dest-bot') && modulo != 0) {marg -= marg%height_line + height_line; margW -= margW%width_line + width_line;}
else if ($(this).hasClass('dest-top') && modulo != 0) {marg -= marg%height_line; margW -= margW%width_line;}
$(".slider-turn").animate({"margin-top":marg,"margin-left":margW},400);
$(".past-act").removeClass("past-act");
var x = -marg/height_line;
$('.past[data-slide="'+x+'"]').addClass('past-act');
});
$(".past").on("click",function(){
var height_line = parseInt($(".line").css("height"));
var width_line = parseInt($(".line").css("max-width"));
var pastille = $(this).data('slide');
$(".past-act").removeClass("past-act");
$(this).addClass('past-act');
$(".slider-turn").animate({"margin-top":-pastille*height_line,"margin-left":-pastille*width_line},400);
});
Raw
style.css
@CHARSET "UTF-8";
@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,900);
/* Reset */
html{-webkit-text-size-adjust:none;color:#000;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td
{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}header li,footer li{list-style:none;}caption,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}
sup{vertical-align:text-top;}sub{vertical-align:text-bottom;}input,textarea,select{font-family:Lato,inherit;font-size:inherit;font-weight:inherit;}input,textarea,select{font-size:100%;}legend{color:#000;}
body{font:Lato,arial,helvetica,clean,sans-serif;font-size:100%;font:x-small;}select,input,button,textarea{font:99% arial,helvetica,clean,sans-serif;}table{font-size:inherit;font:100%;}
pre,code,kbd,samp,tt{font-family:Lato,monospace;font-size:100%;line-height:100%;}
a:hover, a:focus, input, textarea, select {outline:none;}
a {text-decoration:none;}
strong{}
b{color:#ca7810;font-weight:normal;}
header,footer,nav,aside,section,article{display:block;}
input,select,textarea{-webkit-appearance:none;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;}
/* Class */
.liquid {width:100%;margin:0 auto;}
.left {float:left;}
.right {float:right;}
.center {margin:0 auto;padding:0;}
.relative {position:relative;}
.block {display:block;}
.text-center {text-align:center;}
.justify {text-align:justify;}
.hidden {display:none;}
.clear {clear:both;}
.cursor {cursor:pointer;}
.strong {font-weight:600;}
.larg {max-width:960px;margin:0 auto;}
.fixed {position:fixed;}
.sprite-ico {background:url('http://yoannhelin.fr/im/sprite-ico.png');background-size:83px;}
.texture_scd {background:url('http://yoannhelin.fr/im/textures/texture4.png');background-size:400px;}
.layer {background-color:rgba(255,255,255,0.4);}
/* Element Class */
body {font-family:Lato;overflow-x:hidden;}
body > section.liquid {margin-top:50px;}
h1, .h1, h2, .h2 {font-size:30px;text-align:center;letter-spacing:4px;max-width:390px;margin:0 auto;line-height:45px;padding:30px 0 0 0;}
.texture_scd h2 {color:#A5A5A5;text-shadow:1px 1px rgba(255, 255, 255, 0.34),-1px -1px #727272;border-bottom:1px dashed #A3A3A3;}
p {color:#686868;font-size:15px;}
/* Slider */
.slider-container{max-width:960px;height:365px;margin:0 auto;display:block;overflow:hidden;position:relative;z-index:2;}
.slider-turn{height:10000px;}
.dest-bot {margin:0 auto 30px auto;background-position:0 27px;width:71px;height:27px}
.dest-top {margin:30px auto;background-position:0;width:71px;height:27px}
.switch {cursor:pointer;opacity:0.5;transition:opacity 0.4s;-moz-transition:opacity 0.4s;-webkit-transition:opacity 0.4s;}
.switch:hover {opacity:0.8;transition:opacity 0.4s;-moz-transition:opacity 0.4s;-webkit-transition:opacity 0.4s;}
.line {height:350px;max-width:960px;padding:0 40px;}
.line > p {float:left;display:block;height:160px;width:420px;text-align:center;line-height:160px;margin:0 60px;text-shadow:1px 1px 1px rgba(255, 255, 255, 0.3);}
.line > p span.desc {vertical-align:middle;display:inline-block;line-height:1.4;text-align:left;font-size:16px;}
.line .back p {display:block;height:300px;width:auto;text-align:center;line-height:300px;margin:0 30px;}
.line .back p span {vertical-align:middle;display:inline-block;line-height:1.4;text-align:center;font-size:16px;text-shadow:1px 1px 1px rgba(156, 156, 156, 0.7);}
.line span.titre {color:#797979;float:left;margin:0 60px;font-weight:400;letter-spacing:2px;text-align:center;width:420px;text-shadow:1px 1px 1px rgba(255, 255, 255, 0.3);height:85px;line-height:85px;font-size:25px;border-bottom:1px solid #A5A5A5;box-shadow:0 1px 0px rgba(255, 255, 255, 0.2);-moz-box-shadow:0 1px 0px rgba(255, 255, 255, 0.2);-webkit-box-shadow:0 1px 0px rgba(255, 255, 255, 0.2);}
/* Images */
.sprite-crea {background:url('http://yoannhelin.fr/im/crea.png') no-repeat;width:300px;height:350px;display:inline-block;}
#mls {background-position: 0 0;}
#majordome {background-position: -300px 0;}
#columbo {background-position: -600px 0;}
#iutsrc {background-position: -900px 0;}
#vdp {background-position: -1200px 0;}
#paulyne {background-position: -1500px 0;}
#abilys {background-position: -1800px 0;}
.none {background-position: -2100px 0;}
/* CSS flip animation */
.flip-container {float:left;min-width:300px;-webkit-perspective:900;-moz-perspective:900;perspective:900;position:relative;}
.flip-container:hover .creation {-webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg);}
.creation {width:300px;height:350px;float:left;-webkit-transition:all 0.6s;-moz-transition:all 0.6s;transition:all 0.6s;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;transform-style:preserve-3d;}
.front, .back {position:absolute;top:0;left::0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden;}
.back {z-index:800;-webkit-transform:rotateY(-180deg);-moz-transform:rotateY(-180deg);transform:rotateY(-180deg);}
.pastilles {position:absolute;right:3px;}
.past {width:13px;height:13px;display:block;background-color:rgba(160, 160, 160, 0.2);box-shadow:0px 0px 6px rgba(128, 128, 128, 0.45) inset;-moz-box-shadow:0px 0px 6px rgba(128, 128, 128, 0.45) inset;-webkit-box-shadow:0px 0px 6px rgba(128, 128, 128, 0.45) inset;border:1px solid #929292;border-radius:12px;margin:15px 0;cursor:pointer;}
.past-act {background-color:#fff;box-shadow:0 0 1px rgba(0, 0, 0, 0.65), 0 0 3px #B3B3B3 inset;-moz-box-shadow:0 0 1px rgba(0, 0, 0, 0.65), 0 0 3px #B3B3B3 inset;-webkit-box-shadow:0 0 1px rgba(0, 0, 0, 0.65), 0 0 3px #B3B3B3 inset;}
/* Responsive */
@media only screen and (max-width:960px) {
.line {padding:0;}
}
@media only screen and (max-width:860px) {
.line p, .line span.titre {width:50%;margin:0 0 0 20px;}
.pastilles {display:none;}
}
@media only screen and (max-width:660px) {
.line p, .line span.titre {width:35%;margin:0 0 0 10px;}
.line span.titre {font-size:17px;letter-spacing:1px;}
}
@media only screen and (max-width:550px) {
header h1 {font-size:1em;}
.line p, .line span.titre {display:none;}
.line .sprite-crea {margin:0 auto;float:none;display:block;}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment