0
J'utilise cet effet de transition de page que j'ai trouvé sur le codepen pour tous mes boutons. Cela fonctionne bien pour mon bouton de contact, mais quand j'essaye de créer d'autres pages cela ne fonctionne pas. Donc, si j'essaie de créer une page pour mon bouton "à propos", cela ne fonctionnera pas et il utilisera simplement la même page de ma page de contact. Donc, fondamentalement, ma question est comment puis-je utiliser ce codepen pour créer plusieurs boutons avec un contenu différent sur chaque bouton.Comment faire fonctionner ce codepen avec plusieurs pages?
Voici le codepen: https://codepen.io/fralec/pen/xZBKzO
et voici les boutons de mon site
/* JS scripts are added see github repo for more
https://github.com/fralec/ElegantJS */
$('#contact').elegant({
clickNextToClose: true,
newTab: true,
github: {
id: ''
},
twitter: {
id: ''
},
mail: {
id: ''
},
steam: {
id: ''
}
});body {
background-color: black;
font-family: "Source Sans Pro", sans-serif;
color: #ccc;
z-index: -100;
background-color:black;
}
#home {
position: absolute;
width: 16%;
background-color: transparent;
border: 2px solid #FFF;
margin-top: 12%;
margin-left: 20%;
height: 3em;
color: #FFF;
font-size: 1em;
cursor: pointer;
text-transform: uppercase;
border-radius: 4px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
}
#about {
position: absolute;
width: 16%;
background-color: transparent;
border: 2px solid #FFF;
margin-top: 12%;
margin-left: 37%;
height: 3em;
color: #FFF;
font-size: 1em;
cursor: pointer;
text-transform: uppercase;
border-radius: 4px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
}
#projects {
position: absolute;
width: 16%;
background-color: transparent;
border: 2px solid #FFF;
margin-top: 12%;
margin-left: 54%;
height: 3em;
color: #FFF;
font-size: 1em;
cursor: pointer;
text-transform: uppercase;
border-radius: 4px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
}
#contact {
position: absolute;
width: 16%;
background-color: transparent;
border: 2px solid #FFF;
margin-top: 12%;
margin-left: 71%;
height: 3em;
color: #FFF;
font-size: 1em;
cursor: pointer;
text-transform: uppercase;
border-radius: 4px;
animation: fadein 2s;
-moz-animation: fadein 2s; /* Firefox */
-webkit-animation: fadein 2s; /* Safari and Chrome */
}
#home:hover {
color: #1dd2e2;
border: 3px solid #18bdef;
font-weight: bold;
}
#about:hover {
color: #1dd2e2;
border: 3px solid #18bdef;
font-weight: bold;
}
#projects:hover {
color: #1dd2e2;
border: 3px solid #18bdef;
font-weight: bold;
}
#contact:hover {
color: #1dd2e2;
border: 3px solid #18bdef;
font-weight: bold;
}
@keyframes grain {
0%, 100% { transform:translate(0, 0) }
10% { transform:translate(-5%, -10%) }
20% { transform:translate(-15%, 5%) }
30% { transform:translate(7%, -25%) }
40% { transform:translate(-5%, 25%) }
50% { transform:translate(-15%, 10%) }
60% { transform:translate(15%, 0%) }
70% { transform:translate(0%, 15%) }
80% { transform:translate(3%, 35%) }
90% { transform:translate(-10%, 10%) }
}
@keyframes fadein {
from {
opacity:0;
}
to {
opacity:1;
}
}
@-webkit-keyframes fadein { /* Safari and Chrome */
from {
opacity:0;
}
to {
opacity:1;
}
}<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Home</title>
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro|Play" rel="stylesheet">
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='http://rawgit.com/fralec/elegantShareJS/master/css/elegant.css'>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<button id="home">Home</button>
<button id="about">About</button>
<button id="projects">Projects</button>
<button id="contact">Contact</button>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script type="text/javascript" src="js/elegant.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/background.js"></script>
</body>
</html>
Regardez comme tout le plugin "élégant" est de générer des liens sociaux https://github.com/fralec/ElegantJS/wiki voulez-vous faire plus que cela, ou voulez-vous juste que chaque bouton montre 4 ensembles uniques de liens sociaux? –
Je veux être capable de créer un bouton qui une fois cliqué fera la même fade dans l'animation et montrera du contenu. Par exemple un bouton "à propos", où une fois que vous cliquez dessus, il ouvrira une page avec un paragraphe sur moi. –
L'exemple que vous avez montré utilise juste un plugin de lien de médias sociaux - il ne transite pas les pages normales, juste une liste de liens de médias sociaux. –