Animations textes

Animations de textes

Bienvenue au suivi :

1. Copier coller la balise perso "{Perso-texte}" et modifier le début de la phrase dans la première

et ce qui est en gras ci-dessous dans le début du script :

consoleText(['code CSS', 'code HTML', 'balise perso'], 'text',['black','grey','green']);

2. Ajouter le style et les trois classes suivantes dans le css :

.hidden {
opacity:0;
}

.console-underscore {
display:inline-block;
position:relative;
top:-0.14em;
left:10px;
}

La balise perso est dans le corps du texte (position relative)

.console-container {
font-size:30px;
display:inline-block;
height:auto;
width:100%;
text-align:left;
position:relative;

}

La balise perso est dans le bandeau (position absolute)

.console-container {
font-size:30px;
display:inline-block;
height:auto;
max-width:100%;
bottom:3em;
left:30%;
margin:auto;
z-index:999;
position:absolute;
}

Du texte qui défile, c'est chouette !

1. Copier coller le code "{perso-scroll-texte}" dans une balise perso et modifier le texte entre les balses ""

2. Ajouter le ficher Js "script-texte.js" dans le Moxie Manager dans "Spécifique" puis le copier coller dans "Template"

3. Copier coller le code entre guillements dans le html :

4. Ajouter le code suivant le css et réglé la taille de votre texte :

#scrolling-text {
height:189px;
}

h2#scrolling-text-content {
position:relative;
font-size:3rem;
color:black;
font-weight:700;
margin:0 !important;
}

5. Ajouter ce code au wrapper-bloc dans lequel se trouve la balise perso

.wrapper-page-20 #wrapper-bloc-2 {
overflow: hidden;
}

6. Si le texte n'apparaît pas ou est trop sur un côté ou sur un autre, modifier le fichier Js "script-texte.js".

Modifier le chiffre négatif (ex: -80 ou -20 ou -100)

NET15 NET15 NET15 NET15

1. Copier coller le code de la balise perso {perso-defilant}

2. ajouter le code ci dessous dans le css. Modifier ce qui est en gras

.wrapper-page-20 #wrapper-bloc-3 {
overflow: hidden;

}

.perso-repeatedposition: relative;
height:240px;

.repeated-text, .repeated-text span {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}

.repeated-text span

-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
font-family: DMSerifDisplay,serif;
color: #edd5ce;
font-size: 120px;
line-height: 135px;

.repeated-text {
position: absolute;
top: 0;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
z-index: 2;
-webkit-animation: marquee 4s linear infinite;
-o-animation: marquee 4s infinite linear;
animation: marquee 4s linear infinite;

}

Nous sommes

des créatifs

polyvalents

uniques

exemple site : ASLJ / durif optique => avec 7 textes defilants

1. Copier coller le code de la balise perso {perso-text-4}

2. ajouter le CSS suivant

.caption {
color: black;
position: relative;
top: 50%;
transform: translateY(-50%);
margin-top : 1em;

(max-width 470px)

font-size: 33px;
line-height: 2.5em;

(min-width 470px) and max (width 980px)

line-height: 110px;
font-size: 45px;

(min-width 980px)

font-size: 60px;
line-height: 100px;
}

.text-box {
display: inline-block;
position: relative;
min-width: 50%;

(max-width 470px)

min-width:100%;
}

.text-box div {
display: inline-block;
position: absolute;
top: -200px;
transform: rotateX(-90deg);
opacity: 0;
animation-timing-function: ease;
}

.text-box div:nth-child(1) {
animation: rollDown 10s forwards infinite;
}

.text-box div:nth-child(2) {
animation: rollDown2 10s forwards infinite;
}

.text-box div:nth-child(3) {
animation: rollDown3 10s forwards infinite;
}

Retour