scroller & coller

La propriété overflow: scrollpermet de gérer le contenu qui dépasse son conteneur. Elle ajoute des barres de défilement (scrollbars) horizontales et/ou verticales pour naviguer dans le contenu masqué.

  • overflow: auto: Les barres n’apparaissent que si nécessaire.
  • overflow-xet overflow-y: Pour contrôler le défilement horizontal ou vertical séparément.

 

La propriété position: stickypermet de « coller » un élément à un endroit spécifique de la page lors du défilement . C’est un mélange entre position: relativeet position: fixed.

 

 

démarrer et réaliser sur Dreamweaver

  1. Créez un nouveau fichier html sur Dreamweaver nommé « index.html » ainsi qu’un fichier CSS nommé « spécimen_styles.css ».
  2. Enregistrez ces fichiers dans un dossier racine nommé « spécimen_nom ».
    Créez un  sous dossier « images » pour intégrer les images du site.
    Créez un sous dossier « fonts » pour intégrer les typos hors ligne.

 

 

compléter la balise <head>

  1. définir le site pour synchroniser les éléments.
    Menu Site > Gérer les sites…  créer un nouveau site nommé « spécimen »
  2. Ciblez le dossier racine « spécimen_nom  » puis cliquez sur « Paramètres avancés », « infos locales » et ciblez le dossier des images par défaut / cliquez sur  Terminé.

Les codes signalés  en bleu  appartiennent au  html  et ceux  en rose  au  CSS  !!!

  1. Ajoutez un  favicon  à la barre de titre
    <link rel= » icon  » href= » images/favicon.ico « >
    Cette balise doit obligatoirement être placée sous la balise <title> !
    Cette icône ne doit pas être inférieure à 32 px, ni supérieure à 512 px, est obligatoirement un format carré, en png mais utilise l’extension .ico !
    Voici un site pour vous permettre de transformer votre extension : https://www.favicon.cc/
  2. Ajouter le lien vers la  feuille de style css
    <link rel= » stylesheet  » type= » text/css  » href= » sticky.css « >
  3. Ajoutez le  viewport  au  html
    <meta name= » viewport  » content= » width=device-width, initial-scale=1.0 « >
  4. Ajouter les balises qui maintiennent  le référencement naturel
    <meta name= » Mots clés  » content= » spécimen typographique « >
    <meta name= » Description  » content= » spécimen de langages typographiques démonstrations fils « >
    <meta name= » author  » content= » DN 2 numérique « >
  5. Ajoutez le lien vers les  polices  utilisées dans le html
    <link href= »https://fonts.googleapis.com/css2? family=Quicksand :wght@300..700&display=swap » rel= »stylesheet »>
    Il s’agit ici d’un exemple et il vous appartient de choisir les politiques de votre interface selon votre parti-pris conceptuel !
    >>> Utilisez Google Fonts fonts.google.com et copiez le code d’intégration dans le head.
    >>> Ou/et utilisez une police présente sur votre disque dur et générez les fichiers TTF + WOFF + WOFF2 avec un outil en ligne comme transfonter.org ou fontsquirrel.com/tools/webfont-generator

CSS, formater le texte

 

 

structurer la mise en page des balises

1. préparer la feuille de style CSS

@charset « UTF-8 »;

/*paramétrages généraux*/

body, html {
margin: 0; 
padding: 0; /*margin + padding = pour supprimer la bordure par défaut de la fenêtre*/
background-color: #080808; /*couleur du fond de la fenêtre*/
color: #e0e0e0; /*couleur des textes*/
font-family: « Quicksand », sans-serif; /*police utilisée par défaut*/
-webkit-font-smoothing: antialiased; /*applique un lissage aux contours des caractères pour les rendre plus doux et plus lisibles*/
display: flex; /*pour créer des dispositions flexibles et dynamiques d’une page web*/
flex-direction: column; /*définit la direction de l’axe principal*/
}

flexbox froggy

Testez cet outil d’apprentissage flexbox pour comprendre ses usages >>> flexboxfroggy.com/#fr

2. balise html <header>

<!– bandeau animé en header–>
<div class= »sticky-header« >
<p class= »scrolling-text« ><span>spécimen</span>, monstrations typographiques <span>spécimen</span>, monstrations typographiques <span>spécimen</span>, monstrations typographiques <span>spécimen</span>, monstrations typographiques <span>spécimen</span>, monstrations typographiques</p>
</div>
/*——— header collé en haut de l’écran ————*/
.sticky-header {
width: 100%;
height: 30px;
position: sticky;
top: 0;
background-color: #f591f1;
color: #e0e0e0;
display: flex;
align-items: center;
z-index: 100;
overflow: hidden;
}
.sticky-header p {
font-family: ‘Avara_Bold Italic’;
font-size: 1.5rem;
letter-spacing: 0.04em;
color: #444;
}
span {
font-family: ‘Avara_Bold’;
}
/* Animation du texte */
.scrolling-text {
display: inline-block; /*éléments en ligne */
width: 100%;
animation: scroll-text 18s linear infinite; /* Animation en boucle */
white-space: nowrap; /*Pas de retour à la ligne automatique (texte sur une seule ligne)*/
}
/* Définition de l’animation */
@keyframes scroll-text {
    0% {
transform: translateX(0); /* Position initiale */
    }
    100% {
transform: translateX(-50%); /* Défile vers la gauche */
    }
}

@keyframes

La règle @ CSS @keyframes permet aux auteurs de définir les étapes qui composent la séquence d’une animation CSS. Cela permet de contrôler une animation plus finement que ce qu’on pourrait obtenir avec les transitions.

Animista (outil en ligne pour animer des textes)

3. balise html <div> et <section>

On structure la fenêtre (container) qui se décompose en deux parties (left et right) selon la hiérarchie suivante :
<div class= »container« >
<div class= »left-section« >
<div class= »anim-scroll« ></div>
<section class= »project« >
<h2 class= »focus-text« >titre</h2>
<div class= »button-container« ></div>
<p class= »description« ></p>
<div class= »audio-controls« ></div>
</section>
<section class= »project« >
<h2 class= »focus-text« >titre</h2>
<div class= »button-container« ></div>
<p class= »description« ></p>
<div class= »audio-controls« ></div>
</section>
<section class= »project« >
<h2 class= »focus-text« >titre</h2>
<div class= »button-container« ></div>
<p class= »description« ></p>
<div class= »audio-controls« ></div>
</section>
<div class= »closing-section« ></div>
</div>
<div class= »right-section« >
<div class= »carousel« ></div>
</div>
</div>
/*——— structure de l’écran ————*/
.container {
display: flex; /* reste flexible */
flex: 1;
overflow-y: auto; /*contenu rogné dans sa boîte dans la hauteur avec barre de défilement*/
}
.left-section {
width: 30%; /*largeur calculée en % pour être adaptatif*/
padding: 0px 30px;
box-sizing: border-box; /*définit la façon dont la largeur totale et la hauteur totale d’un élément sont calculées*/
overflow-y: auto; 
height: 100vh; /*vh correspond à 1% de la hauteur de la zone d’affichage*/
}
.left-section section {
margin-top: 30rem;
}
.right-section {
width: 70%;
height: calc(100vh – 30px); /*100% de la hauteur – la hauteur 30px du header*/
overflow: hidden; /* bloque le défilement */
display: flex;
align-items: center; /*aligné verticalement dans sa boîte*/
justify-content: center; /*aligné horizontalement dans sa boîte*/
}

formater et animer les textes left-section

1. régler les styles pour les textes

<!– Section > spécimen 1 « Standard de Benoît Bodhuin »–>
<section class= »project » style= »margin-top: 90vh; »>
<h2 class= »focus-text« >STANDARD [A3] Benoît Bodhuin 2019</h2>
<p class= »description« >Cette nouvelle surface (…) des interférences.</p>
</section>
Cette structure sera répliquée x3 dans le html.
/*——— styles textes ————*/
.focus-text {
font-family: ‘Avara_Bold Italic’;
font-size: 3rem;
line-height: 1.1;
color: #444;
margin: 0;
letter-spacing: 0.04em; /*interlettrage*/
}
.description {
font-size: 1.1rem;
margin-top: 1.5rem;
margin-left: 1.3rem;
margin-right: 0.5rem;
line-height: 1.6rem; /*interlignage*/
font-weight: 200; /*graisse du corps typographique*/
}

2. animer les titres <h2>

/*——— animer le h2 avec le scroll ————*/
.project {
view-timeline-name: –project; /*doit porter le nom de la class du conteneur principal (section class= »project »)*/
view-timeline-axis: block; /*définit l’axe (horizontal ou vertical) du défilement, block = axe Y*/
}
.focus-text {
  animation-name: reveal-title; /*donner le nom de la @keyframes*/
  animation-duration: 1s;
  animation-timeline: –project; /*en référence à la boîte principale (section class= »project »)*/
/* Déclenchement */
animation-range: entry 0% cover 50%; /*précise quand une animation doit commencer et finir par rapport à la position de l’élément dans la fenêtre de visualisation (viewport)*/
animation-fill-mode: both; /*les styles @keyframes sont appliqués avant et après l’animation*/
}
@keyframes reveal-title {
from {
filter: blur(30px);
opacity: 0;
transform: translateY(60px) scale(0.6);
color: #444;
  }
to {
filter: blur(0);
opacity: 1;
transform: translateY(0) scale(1);
color: darkorange;
  }
}
Nouvelle propriété CSS pour des effet de scroll puissant sans JS (animation-timeline)

ajouter des contrôleurs audio

<div class= »audio-controls« >
    <!– Bouton pour jouer/l’audio –>
    <button id= »playButton1″ class= »audio-button« >▶ Jouer</button>
    <!– Curseur pour le volume principal –>
    <div class= »slider-container« >
        <label for= »volumeSlider1″>Volume principal</label>
        <input type= »range » id= »volumeSlider1″ min= »0″ max= »1″ step= »0.01″ value= »0.7″ class= »slider »>
    </div>
    <!– Curseur pour un autre paramètre (ex. effet sonore) –>
    <div class= »slider-container »>
        <label for= »effectSlider1″>Effet sonore</label>
        <input type= »range » id= »effectSlider1″ min= »0″ max= »1″ step= »0.01″ value= »0.5″ class= »slider »>
    </div>
    <!– Élément audio (caché) –>
    <audio id= »audioPlayer1″ src= »ton-fichier-audio.mp3″ loop></audio>
</div>
/*——— boutons pour le son ————*/
.audio-controls {
margin-top: 50px;
padding: 15px;
width: 100%;
}
.audio-button {
display: block;
width: 40%;
padding: 10px;
margin-bottom: 30px;
background-color: #080808;
border: 1px solid darkorange;
color: darkorange;
font-family: ‘Avara_Bold Italic’;
font-size: 1.3rem;
cursor: pointer; /*transforme le curseur en une main avec un doigt pointé*/
transition: background-color 0.3s; /*changement progressif sur une durée donnée*/
}
.audio-button:hover {
background-color: #e0e0e0;
}
/* Style des curseurs */
.slider-container {
margin-bottom: 0.8rem;
}
.slider-container label {
display: block;
font-family: ‘Avara_Bold’;
}
input[type= »range »] {
accent-color: darkorange; /*pour changer la couleur des curseurs*/
}

ajouter un gif et placer un boîte de fin

1. inviter à scroller

<!– Scroll en GIF–>
<div class= »anim-scroll« >
<img src= »images/Scroll_down.gif » alt= »animation du scroll »> (ne pas oublie l’attribut Alt)
</div>
/*——— boite du gif « scroll » ————*/
.anim-scroll {
display: flex;
justify-content: center;
margin-top: 6rem;
}

2. signer votre travail

<!–nom et prénom–>
<div class= »closing-section« >
<div class= »closer« ><strong>nom prénom</strong><br>DN 2 NUM @2026 Techniques et savoir-faire
</div>
</div>
/*——— pour placer son nom et prénom ————*/
.closing-section {
height: 25vh;
display: inline-flex;
align-items: flex-end;
margin-bottom: 4vh;
}
.closer {
font-size: 0.9rem;
font-weight: 200;
color: darkorange;
}

ajouter des boutons avec un effet de hover

<!– bouton avec des images au hover –>
<div class= »button-container« >
<div class= »btn-wrapper« >
<button class= »btn« >1</button>
<img src= »images/thumb_standard_1.png » alt= »thumbnail standard1″ class= »hover-image« >
</div>
<div class= »btn-wrapper« >
<button class= »btn« >2</button>
<img src= »images/thumb_standard_2.png » alt= »thumbnail standard2″ class= »hover-image« >
</div> 
</div>
/*—- ajouter des boutons pour voir les images selon le texte —-*/
.button-container {
display: flex;
gap: 20px;
margin: 20px 0;
}
.btn-wrapper {
position: relative; /*voir schéma plus bas pour comprendre la différence entre position relative ou absolute*/
}
/* Boutons */
.btn {
width: 35px;
height: 35px;
background-color: darkorange;
border: 1px solid #e0e0e0;
border-radius: 50%; /* Rend le bouton parfaitement rond */
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #e0e0e0;
font-family: ‘Avara_Black’;
font-size: 1.2rem;
transition: transform 0.2s, background-color 0.2s;
padding: 0; /* Supprime le padding par défaut */
}
/* Effet hover sur les boutons*/
.btn:hover {
transform: scale(1.1); /* Petit zoom au hover */
background-color: #080808;
color: darkorange;
border-color: darkorange;
}
/* Images masquées par défaut */
.hover-image {
display: none;
position: absolute;/* permet de placer l’image n’importe où */
z-index: 9999; /* au-dessus de tous les éléments */
width: 200px; /* taille par défaut */
height: auto;
top: 80px;
left: 30px;
box-shadow: 0 10px 30px #080808;
transition: opacity 0.5s ease;
pointer-events: none; /* pour que la souris ne bloque pas le hover */
}
/* Affichage de l’image au hover du bouton correspondant */
.btn-wrapper:hover .hover-image {
display: block;
}

animer un carrousel

<!–écran de droite–>
<div class= »right-section »>
<!–carrousel animé–>
<div class= »carousel« >
<div class= »slides« >
          <div class= »slide« >
                <img src= »images/standard_1.png » alt= »spécimen 1 de Benoît Bodhuin »>
          </div>
          <div class= »slide« >
                <img src= »images/standard_2.png » alt= »spécimen 2 de Benoît Bodhuin »>
          </div>
          <div class= »slide« >
                <img src= »images/baste_1.png » alt= »spécimen 3 de Image Format »>
          </div>
<div class= »slide« >
                <img src= »images/baste_2.png » alt= »spécimen 4 de Image Format »>
          </div>
<div class= »slide« >
                <img src= »images/bufala_1.png » alt= »spécimen 5 de Clément Cases »>
            </div>
<div class= »slide« >
                <img src= »images/bufala_2.png » alt= »spécimen 6 de Clément Cases »>
          </div>
 </div>
</div>
/*——— carrousel animé ————*/
.carousel {
width: 70%;
height: 100vh;
overflow: hidden; /* Assure que le carrousel ne dépasse pas */
position: fixed;
}
.carousel .slides {
display: flex;
align-content: flex-end;
width: 300%; /* 3 slides, donc 300% de la largeur */
height: 100vh;
animation: slideAnimation 14s infinite;
}
@keyframes slideAnimation {
0% { transform: translateX(0); }
33.33% { transform: translateX(-33.33%); }
66.66% { transform: translateX(-66.66%); }
100% { transform: translateX(0); }
}
.carousel .slide {
width: 33.33%; /* Chaque slide prend 1/3 de la largeur totale */
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.carousel .slide img {
max-width: 100%; /* Limite la largeur de l’image à celle du slide */
max-height: 90%;
object-fit: contain; /* Conserve les proportions de l’image */
}

mettre en ligne son site

1. créer un sous domaine « demo »

OVH, créer un sous domaine

 

2. installer FileZilla pour déposer le dossier racine

Attention à télécharger le driver « client » qui correspond à votre système d’exploitation et sa version !

 

 

téléchargez le dossier d’exercice

EXO_sticky_html_css

 

téléchargez le dossier fini