Partagez|

[CREAPHY] Code de PA #5

Voir le sujet précédent Voir le sujet suivant Aller en bas

avatar

I am Pyphilia

Messages : 325
Points : 613
Date d'inscription : 03/02/2011
Age : 20

MessageSujet: [CREAPHY] Code de PA #5 Sam 14 Mar - 23:24



Ressource : jCarrousel.js

Javascript
Code:
(function($) {
   $(function() {
      $('.jcarousel').jcarousel();

      $('.jcarousel-control-prev')
      .on('jcarouselcontrol:active', function() {
         $(this).removeClass('inactive');
      })
      .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');
      })
      .jcarouselControl({
         target: '-=1'
      });

      $('.jcarousel-control-next')
      .on('jcarouselcontrol:active', function() {
         $(this).removeClass('inactive');
      })
      .on('jcarouselcontrol:inactive', function() {
         $(this).addClass('inactive');
      })
      .jcarouselControl({
         target: '+=1'
      });

      $('.jcarousel-pagination')
      .on('jcarouselpagination:active', 'a', function() {
         $(this).addClass('active');
      })
      .on('jcarouselpagination:inactive', 'a', function() {
         $(this).removeClass('active');
      })
      .jcarouselPagination();
   });
})(jQuery);

PA
Code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcarousel/0.3.1/jquery.jcarousel.min.js" type="text/javascript"></script><script src="https://raw.githubusercontent.com/jsor/jcarousel/master/examples/basic/jcarousel.basic.js" type="text/javascript"></script>
<div id="pa_jc">
                                                   
   <h2>
                        Contexte          
   </h2>
                                   
   <h2 class="rp_titre">
                              Les nouveautés !                        
   </h2>
                                                   
   <h2>
                        Le Staff        
   </h2>
                                     
   <div id="concept">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lacus massa, gravida sit amet dapibus a, maximus eu nibh. Suspendisse potenti. Nulla eget eros sit amet orci malesuada semper sed ac risus. Etiam id rhoncus justo, quis rutrum tortor. Pellentesque malesuada tellus dignissim, finibus tellus eget, finibus arcu. Duis nisl mauris, feugiat in fringilla quis, congue eu tellus. Integer elementum lacus mauris. Integer sit amet luctus felis, eget finibus quam. Morbi posuere nibh non arcu sagittis, non dapibus tellus dignissim. Nulla a vestibulum odio.    
   </div>
                                                   
   <div id="news">
                                                      
      <div class="jcarousel-wrapper">
                                                         
         <div class="jcarousel">
                                                            
            <ul>
                                                               
               <li>
                                          <img src="http://1.viki.io/c/12699c/ffd6b2b99c.jpg" /> <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://upload.wikimedia.org/wikipedia/en/3/3a/Padam_Padam-poster.jpg" /> <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://0.viki.io/c/24142c/4132afbc32.jpg" />   <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://asianwiki.com/images/e/ec/IRIS_2-0002.jpg" />   <span class="text">texte texte texte aléatoire</span>                        
               </li>
                                                               
               <li>
                                          <img src="http://www.koreandrama.org/wp-content/uploads/2014/10/Birth-of-a-Beauty-Poster2.jpg" />   <span class="text">texte texte texte aléatoire    </span>                    
               </li>
                                                               
            </ul>
                                                            
         </div>
                                  <a class="jcarousel-control-prev" href="#">‹</a> <a class="jcarousel-control-next" href="#">›</a>                        
         <p class="jcarousel-pagination">
                                                        
         </p>
                                                     
      </div>
                                                      
   </div>
                                                   
   <div id="staff">
                               <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/212909bounce.gif)"></span></a> <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/295522bounce1.gif)"></span></a> <a href=""><span style="background-image:url(http://img15.hostingpics.net/pics/240826bounce2.gif)"></span></a>                        
   </div>
                                         
   <div id="links_box">
                               <a href="">liens 1</a><a href="">liens 2</a><a href="">liens 3</a><a href="">liens 4</a><a href="">liens 5</a>                        
   </div>
                                   
</div>

CSS
Code:

/**PA BY PYPHI(LIA) @ CREAPHY**/

@import url(http://fonts.googleapis.com/css?family=Aguafina+Script);

/* latin-ext */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url(http://fonts.gstatic.com/s/qwigley/v6/2Dy1Unur1HJoklbsg4iPJ_Y6323mHUZFJMgTvxaG2iE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Qwigley';
  font-style: normal;
  font-weight: 400;
  src: local('Qwigley'), local('Qwigley-Regular'), url(http://fonts.gstatic.com/s/qwigley/v6/gThgNuQB0o5ITpgpLi4Zpw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
#pa_jc {

   text-align: center;
}

#pa_jc h2:nth-child(2n+2){
   font-size: 40px;
  font-weight:bold;
   margin: 0 0 -35px 0;
  
}
#pa_jc h2{
  font-weight:200;
  font-size:35px;
   font-family: 'Aguafina Script', cursive;
   margin: 0 0 -45px 0;
   color:#ced85b;
  display:inline-block;
  vertical-align:middle;
  width:31%;
}



#pa_jc > div:not(#links_box) {
   display: inline-block;
   vertical-align:middle;
   margin: 0 10px;
}

#pa_jc #concept, #pa_jc #staff {
   height:180px;
   width:185px;
   box-sizing:border-box;
   border-radius: 5px;
}

#pa_jc #concept {
   background-color: #eee;
   border-bottom: solid 3px #ced85b;
   text-align: justify;
   padding:10px;
   color:#aaa;
   overflow: auto;
   line-height: 10.5px;
   font-family: arial;
   font-size: 12px;
}

#pa_jc #staff > a span {
   display: block;
   height:30.5%;
   border-radius: 2px;
   margin:2% 0;
   background-color: white;
   background-position: center center;
   background-size: 120%;
   border:1px solid transparent;
   opacity: 0.3;

   -moz-transition:all 0.7s;
   -webkit--transition:all 0.7s;
   -ms-transition:all 0.7s;
   -o-transition:all 0.7s;
   transition:all 0.7s;
}

#pa_jc #staff > a span:hover {
   border-color:greenyellow;
   opacity: 0.8;
}

#pa_jc #links_box {
   text-align: center;
  margin-top:10px;
}

#pa_jc #links_box a {
   margin:20px;
  font-family:georgia;
  color:grey;
   font-size: 23px;
  font-style:italic;
  letter-spacing:-2px;
}
#pa_jc #links_box a:hover {cursor:crosshair;}
#pa_jc a.credits {
   margin: auto;
   text-align: center;
   display: block;
   text-decoration: none;
   text-transform: uppercase;
   opacity: 0.5;
   font-size: 10px;
   font-family: arial;
}

.jcarousel-wrapper {
   margin: 20px auto;
   position: relative;
   width: 270px;
   height: 170px;
   border: 10px solid #fff;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
   -webkit-box-shadow: 0 0 2px #999;
   -moz-box-shadow: 0 0 2px #999;
   box-shadow: 0 0 2px #999;
}

/** Carousel **/

.jcarousel {
   position: relative;
   overflow: hidden;
   width: 270px;
   height: 170px;
}

.jcarousel ul {
   width: 20000em;
   position: relative;
   list-style: none;
   margin: 0;
   padding: 0;
}

.jcarousel li {
   float: left;
   position: relative;
   height:170px !important;
  width:270px !important;
}

.jcarousel li .text {
   position: absolute;
   bottom:0;
   left:0;
   background:rgba(0,0,0,0.7);
   padding:5px;
   width:100%;
   font-size: 16px;
   font-family: arial;
   text-align: center;
   color:rgba(255,255,255,0.8);
}

.jcarousel li .text a {
  color:lightgreen;
}

.jcarousel li img {
   width:100% !important;
}

/** Carousel Controls **/

.jcarousel-control-prev,
.jcarousel-control-next {
   position: absolute;
   top: 80px;
   width: 30px;
   height: 30px;
   text-align: center;
   background: #4E443C;
   color: #fff !important;
   text-decoration: none;
   text-shadow: 0 0 1px #000;
   font: 24px/27px Arial, sans-serif;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
}

.jcarousel-control-prev {
   left: -35px;
}

.jcarousel-control-next {
   right: -35px;
}

.jcarousel-control-prev:hover span,
.jcarousel-control-next:hover span {
   display: block;
}

.jcarousel-control-prev.inactive,
.jcarousel-control-next.inactive {
   opacity: .5;
   cursor: default;
}

/** Carousel Pagination **/

.jcarousel-pagination {
   position: absolute;
   bottom: -38px;
   left: 26%;
}

.jcarousel-pagination a {
   text-decoration: none;
   display: inline-block;

   font-size: 11px;
   line-height: 14px;
   min-width: 14px;

   background: #fff;
   border:1px rgba(0,0,0,0.15) solid;
   color: #4E443C;
   border-radius: 14px;
   padding: 3px;
   text-align: center;

   margin-right:6px;

   opacity: .75;
}

.jcarousel-pagination a.active {
   background: #ced85b;
   color: #fff;
   opacity: 1;
   border:none;
}
Revenir en haut Aller en bas
http://essay.forumgratuit.ch

[CREAPHY] Code de PA #5

Voir le sujet précédent Voir le sujet suivant Revenir en haut
Page 1 sur 1

Sujets similaires

-
» code pour inséré les anime (Fond transparent)
» manuel de code e-anim
» J'ai 2 code pour avoir 6 razoirs Shick Induition DÉJÀ DONNÉ
» Vidéos - générateur de code pour vidéo et player
» [Nocturne] Demande d'aide pour code css complet s'il vous plait.

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
Essai-Fond-Pyphilia :: Créaphy :: Codages-