I'm new in HTML/CCS ect... and I have a problem, I put a text and there is no scrollbar that appears, my code is this one, it's when I click on a section that the bug appears: HTML:
<meta charset="UTF-8">
<title>Bienvenue sur mon site WEB</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen">
<script>
window.console = window.console || function(t) {};
</script>
<script>
if (document.location.search.match(/type=embed/gi)) {
window.parent.postMessage("resize", "*");
}
</script>
<link rel="shortcut icon" type="image/jpg" href="t.png"/>
</head>
<body>
<div class="cont">
<!-- cont inner start -->
<div class="cont__inner">
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading"><center>Doper sa mémoire<br />grâce à une<br />puce électronique</center></h2>
</div>
<div class="el__content">
<div class="el__text">
<center> <audio src="cerveau.mp3" controls></audio> <br/><br/>
<div id="col-middle" class="text"><p>C'est un projet très sérieux, dont l'étude a été publiée dans le <em>Journal of neural engineering</em> . Depuis plusieurs années, des expériences sont réalisées dans le laboratoire de Ted Berger à l'université de Californie du Sud. La mise au point de cet implant cérébral est largement financée par le département de recherche de l'armée américaine.</p><p>Pour l'instant, c'est encore au stade du laboratoire, mais les chercheurs viennent de franchir une étape importante. Ils ont équipés des primates avec leur super-puce et les animaux sont devenus des super- champions de la mémoire.</p><h2 class="subheader">L'expérience</h2><p>Au début, les primates s'entraînent à des jeux de mémoire. Un training intense avec des sortes de cartes mémoire visualisées sur un écran d'ordinateur. Ils doivent retrouver des images cachées. Une bonne réponse est récompensée, notamment par une boisson sucrée. Semaine après semaine, les animaux améliorent leurs scores.</p><p>Puis on implante des prothèses dans l'hippocampe des singes. Une zone impliquée dans la formation des souvenirs. L'idée est d'enregistrer et d'analyser l'activité de deux régions de l'hippocampe, et de saisir les informations échangées entre les neurones au moment où, elles communiquent entre elles pour former ou retrouver un souvenir.</p><p>Une fois équipés de leur puce, les singes sont retournés à leurs tests. Les chercheurs se sont aperçus que deux codes apparaissaient sur les enregistrements : un premier code dit "fort" quand les singes se souviennent bien de la figure ou de son emplacement et réussissaient l'exercice et un code dit faible lorsque la mémoire leur fait défaut.</p><h2 class="subheader">L'utilisation des résultats</h2><p>Les chercheurs ont utilisés les résultats pour améliorer les scores obtenus par les singes aux épreuves de mémoire en programmant les puces électroniques ! Systématiquement, elles ont envoyé le code fort lorsque l'animal était sur le point de faire une erreur. Autrement dit : la puce a donc agi comme une sorte de correcteur de mémoire en temps réel.</p><h2 class="subheader">Une expérience déjà menée</h2><p>En 2011, des tests avaient déjà été effectués par Ted Berger et son équipe sur des rats. Les chercheurs s'étaient servis de leurs puces électroniques pour en faire des interrupteurs de la mémoire.</p><p>Lorsque la puce était éteinte, les nouveaux souvenirs ne se formaient plus, mais quand elle était allumée, la mémoire pouvait de nouveau s'enrichir de nouvelles expériences. Les rats équipés montraient de meilleurs scores aux tests de mémorisation par rapport à leurs congénères non équipés. On imagine le potentiel de telles prothèses cérébrales pour des personnes souffrant de lésions cérébrales ou même de maladies dégénératives.</p>
</div>
</center>
</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">1</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="1">1</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading"><center>Le clonage animal :<br />entre mythes<br />et réalités</center> </h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">2</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="2">2</div>
</div>
</div>
</div>
<!-- el end -->
<!-- el start -->
<div class="el">
<div class="el__overflow">
<div class="el__inner">
<div class="el__bg"></div>
<div class="el__preview-cont">
<h2 class="el__heading"><center>Génétique :<br />la Chine va <br />recréer la licorne !</center> </h2>
</div>
<div class="el__content">
<div class="el__text">Whatever</div>
<div class="el__close-btn"></div>
</div>
</div>
</div>
<div class="el__index">
<div class="el__index-back">3</div>
<div class="el__index-front">
<div class="el__index-overlay" data-index="3">3</div>
</div>
</div>
</div>
<!-- el end -->
</div>
<!-- cont inner end -->
</div>
<script id="rendered-js">
var $cont = document.querySelector('.cont');
var $elsArr = [].slice.call(document.querySelectorAll('.el'));
var $closeBtnsArr = [].slice.call(document.querySelectorAll('.el__close-btn'));
setTimeout(function () {
$cont.classList.remove('s--inactive');
}, 200);
$elsArr.forEach(function ($el) {
$el.addEventListener('click', function () {
if (this.classList.contains('s--active')) return;
$cont.classList.add('s--el-active');
this.classList.add('s--active');
});
});
$closeBtnsArr.forEach(function ($btn) {
$btn.addEventListener('click', function (e) {
e.stopPropagation();
$cont.classList.remove('s--el-active');
document.querySelector('.el.s--active').classList.remove('s--active');
});
});
//# sourceURL=pen.js
</script>
</body>
</html>
CSS:
*, *:before, *:after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
text-align: center;
background: #1f1f1f;
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}
.cont {
position: relative;
overflow: hidden;
height: 100vh;
padding: 80px 70px;
}
.cont__inner {
position: relative;
height: 100%;
}
.cont__inner:hover .el__bg:after {
opacity: 1;
}
.el {
position: absolute;
left: 0;
top: 0;
width: 32%;
height: 100%;
background: #252525;
-webkit-transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
transition: width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s;
transition: transform 0.6s 0.7s, width 0.7s, opacity 0.6s 0.7s, z-index 0s 1.3s, -webkit-transform 0.6s 0.7s;
will-change: transform, width, opacity;
}
.el:not(.s--active) {
cursor: pointer;
}
.el__overflow {
overflow: hidden;
position: relative;
height: 100%;
}
.el__inner {
overflow: hidden;
position: relative;
height: 100%;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
}
.cont.s--inactive .el__inner {
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
}
.el__bg {
position: relative;
width: calc(100vw - 140px);
height: 100%;
-webkit-transition: -webkit-transform 0.6s 0.7s;
transition: -webkit-transform 0.6s 0.7s;
transition: transform 0.6s 0.7s;
transition: transform 0.6s 0.7s, -webkit-transform 0.6s 0.7s;
will-change: transform;
}
.el__bg:before {
content: "";
position: absolute;
left: 0;
top: -5%;
width: 100%;
height: 110%;
background-size: cover;
background-position: center center;
-webkit-transition: -webkit-transform 1s;
transition: -webkit-transform 1s;
transition: transform 1s;
transition: transform 1s, -webkit-transform 1s;
-webkit-transform: translate3d(0, 0, 0) scale(1);
transform: translate3d(0, 0, 0) scale(1);
}
.cont.s--inactive .el__bg:before {
-webkit-transform: translate3d(0, -100%, 0) scale(1.2);
transform: translate3d(0, -100%, 0) scale(1.2);
}
.el.s--active .el__bg:before {
-webkit-transition: -webkit-transform 0.8s;
transition: -webkit-transform 0.8s;
transition: transform 0.8s;
transition: transform 0.8s, -webkit-transform 0.8s;
}
.el__bg:after {
content: "";
z-index: 1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.3);
opacity: 0;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.cont.s--el-active .el__bg:after {
-webkit-transition: opacity 0.5s 1.4s;
transition: opacity 0.5s 1.4s;
opacity: 1 !important;
}
.el__preview-cont {
z-index: 2;
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
-webkit-box-align: center;
align-items: center;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
-webkit-transition: all 0.3s 1.2s;
transition: all 0.3s 1.2s;
}
.cont.s--inactive .el__preview-cont {
opacity: 0;
-webkit-transform: translateY(10px);
transform: translateY(10px);
}
.cont.s--el-active .el__preview-cont {
opacity: 0;
-webkit-transform: translateY(30px);
transform: translateY(30px);
-webkit-transition: all 0.5s;
transition: all 0.5s;
}
.el__heading {
color: #fff;
text-transform: uppercase;
font-size: 18px;
}
.el__content {
z-index: -1;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 30px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0.1s;
transition: all 0.1s;
}
.el.s--active .el__content {
z-index: 2;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0.5s 1.4s;
transition: all 0.5s 1.4s;
}
.el__text {
text-transform: uppercase;
font-size: 40px;
color: #fff;
}
.el__close-btn {
z-index: -1;
position: absolute;
right: 10px;
top: 10px;
width: 60px;
height: 60px;
opacity: 0;
pointer-events: none;
-webkit-transition: all 0s 0.45s;
transition: all 0s 0.45s;
cursor: pointer;
}
.el.s--active .el__close-btn {
z-index: 5;
opacity: 1;
pointer-events: auto;
-webkit-transition: all 0s 1.4s;
transition: all 0s 1.4s;
}
.el__close-btn:before, .el__close-btn:after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 8px;
margin-top: -4px;
background: #fff;
opacity: 0;
-webkit-transition: opacity 0s;
transition: opacity 0s;
}
.el.s--active .el__close-btn:before, .el.s--active .el__close-btn:after {
opacity: 1;
}
.el__close-btn:before {
-webkit-transform: rotate(45deg) translateX(100%);
transform: rotate(45deg) translateX(100%);
}
.el.s--active .el__close-btn:before {
-webkit-transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transition: all 0.3s 1.4s cubic-bezier(0.72, 0.09, 0.32, 1.57);
-webkit-transform: rotate(45deg) translateX(0);
transform: rotate(45deg) translateX(0);
}
.el__close-btn:after {
-webkit-transform: rotate(-45deg) translateX(100%);
transform: rotate(-45deg) translateX(100%);
}
.el.s--active .el__close-btn:after {
-webkit-transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
transition: all 0.3s 1.55s cubic-bezier(0.72, 0.09, 0.32, 1.57);
-webkit-transform: rotate(-45deg) translateX(0);
transform: rotate(-45deg) translateX(0);
}
.el__index {
overflow: hidden;
position: absolute;
left: 0;
bottom: -80px;
width: 100%;
height: 100%;
min-height: 250px;
text-align: center;
font-size: 20vw;
line-height: 0.85;
font-weight: bold;
-webkit-transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;
transition: opacity 0.3s 1.4s, -webkit-transform 0.5s;
transition: transform 0.5s, opacity 0.3s 1.4s;
transition: transform 0.5s, opacity 0.3s 1.4s, -webkit-transform 0.5s;
-webkit-transform: translate3d(0, 1vw, 0);
transform: translate3d(0, 1vw, 0);
}
.el:hover .el__index {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.cont.s--el-active .el__index {
-webkit-transition: opacity 0.3s, -webkit-transform 0.5s;
transition: opacity 0.3s, -webkit-transform 0.5s;
transition: transform 0.5s, opacity 0.3s;
transition: transform 0.5s, opacity 0.3s, -webkit-transform 0.5s;
opacity: 0;
}
.el__index-back, .el__index-front {
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
.el__index-back {
color: #2f3840;
opacity: 0;
-webkit-transition: opacity 0.25s 0.25s;
transition: opacity 0.25s 0.25s;
}
.el:hover .el__index-back {
-webkit-transition: opacity 0.25s;
transition: opacity 0.25s;
opacity: 1;
}
.el__index-overlay {
overflow: hidden;
position: relative;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.5s 0.1s;
transition: -webkit-transform 0.5s 0.1s;
transition: transform 0.5s 0.1s;
transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
color: transparent;
}
.el__index-overlay:before {
content: attr(data-index);
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 100%;
color: #fff;
-webkit-transform: translate3d(0, -100%, 0);
transform: translate3d(0, -100%, 0);
-webkit-transition: -webkit-transform 0.5s 0.1s;
transition: -webkit-transform 0.5s 0.1s;
transition: transform 0.5s 0.1s;
transition: transform 0.5s 0.1s, -webkit-transform 0.5s 0.1s;
}
.el:hover .el__index-overlay {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.el:hover .el__index-overlay:before {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.el:nth-child(1) {
-webkit-transform: translate3d(0%, 0, 0);
transform: translate3d(0%, 0, 0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
}
.cont.s--el-active .el:nth-child(1):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(0%, 0, 0);
transform: scale(0.5) translate3d(0%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(1) .el__inner {
-webkit-transition-delay: 0s;
transition-delay: 0s;
}
.el:nth-child(1) .el__bg {
-webkit-transform: translate3d(-34%, 0, 0);
transform: translate3d(-34%, 0, 0);
}
.el:nth-child(1) .el__bg:before {
-webkit-transition-delay: 0s;
transition-delay: 0s;
background-image: url("https://cdn.discordapp.com/attachments/562671211369332752/782006113494630521/cerveau.jpg");
}
.el:nth-child(2) {
-webkit-transform: translate3d(105.2083333333%, 0, 0);
transform: translate3d(105.2083333333%, 0, 0);
-webkit-transform-origin: 155.2083333333% 50%;
transform-origin: 155.2083333333% 50%;
}
.cont.s--el-active .el:nth-child(2):not(.s--active) {
-webkit-transform: scale(0.5) translate3d(105.2083333333%, 0, 0);
transform: scale(0.5) translate3d(105.2083333333%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(2) .el__inner {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
}
.el:nth-child(2) .el__bg {
-webkit-transform: translate3d(-19.2%, 0, 0);
transform: translate3d(-19.2%, 0, 0);
}
.el:nth-child(2) .el__bg:before {
-webkit-transition-delay: 0.1s;
transition-delay: 0.1s;
background-image: url("https://cdn.discordapp.com/attachments/562671211369332752/782006110776328192/clone.jpg");
}
.el:nth-child(3) {
-webkit-transform: translate3d(210.4166666667%, 0, 0);
transform: translate3d(210.4166666667%, 0, 0);
-webkit-transform-origin: 260.4166666667% 50%;
transform-origin: 260.4166666667% 50%;
}
.cont.s--el-active .el:nth-child(3):not(.s--active) {
-webkit-transform: scale(0.5==) translate3d(210.4166666667%, 0, 0);
transform: scale(0.5) translate3d(210.4166666667%, 0, 0);
opacity: 0;
-webkit-transition: opacity 0.95s, -webkit-transform 0.95s;
transition: opacity 0.95s, -webkit-transform 0.95s;
transition: transform 0.95s, opacity 0.95s;
transition: transform 0.95s, opacity 0.95s, -webkit-transform 0.95s;
}
.el:nth-child(3) .el__inner {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.el:nth-child(3) .el__bg {
-webkit-transform: translate3d(-30%, 0, 0);
transform: translate3d(-30%, 0, 0);
}
.el:nth-child(3) .el__bg:before {
-webkit-transition-delay: 0.2s;
transition-delay: 0.2s;
background-image: url("https://cdn.discordapp.com/attachments/562671211369332752/782005633430978580/licorne.jpg");
}
.el:hover .el__bg:after {
opacity: 0;
}
.el.s--active {
z-index: 1;
width: 100%;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
transition: width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
transition: transform 0.6s, width 0.7s 0.7s, z-index 0s;
transition: transform 0.6s, width 0.7s 0.7s, z-index 0s, -webkit-transform 0.6s;
}
.el.s--active .el__bg {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition: -webkit-transform 0.6s;
transition: -webkit-transform 0.6s;
transition: transform 0.6s;
transition: transform 0.6s, -webkit-transform 0.6s;
}
.el.s--active .el__bg:before {
-webkit-transition-delay: 0.6s;
transition-delay: 0.6s;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
(I have to zoom out to see the whole text)
(I would like to be able to scroll the text without the image moving)
(I'm testing a big text)
Aucun commentaire:
Enregistrer un commentaire