Tutoriels Email

Plugins Textes

Textes

Effets, lire plus ...

Vous trouverez des codes à copier sur vos réalisations Webacappella,
à l'aide de JavaScript et CSS/HTML.

Tutoriels vidéo

play

01 - Lire Plus effet 01

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo...
Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
Wa-Fusion.fr

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <div>
                                                                  <input type="checkbox" class="read-more-state" id="post-2" />
                                                                
                                                                  <ul class="read-more-wrap">
                                                                    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo..</li>
                                                                    <li class="read-more-target">Adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.</li>
                                                                    <li class="read-more-target">Wa-Fusion.fr</li>
                                                                  </ul>
                                                                  
                                                                  <label for="post-2" class="read-more-trigger"></label>
                                                                </div>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .read-more-state {
                                                                  display: none;
                                                                }
                                                                
                                                                .read-more-target {
                                                                  opacity: 0;
                                                                  max-height: 0;
                                                                  font-size: 0;
                                                                  transition: .25s ease;
                                                                }
                                                                
                                                                .read-more-state:checked ~ .read-more-wrap .read-more-target {
                                                                  opacity: 1;
                                                                  font-size: inherit;
                                                                  max-height: 999em;
                                                                }
                                                                
                                                                .read-more-state ~ .read-more-trigger:before {
                                                                  content: 'Voir Plus';
                                                                }
                                                                
                                                                .read-more-state:checked ~ .read-more-trigger:before {
                                                                  content: 'Fermer';
                                                                }
                                                                
                                                                .read-more-trigger {
                                                                  cursor: pointer;
                                                                  display: inline-block;
                                                                  padding: 0 .5em;
                                                                  color: #3126cc;
                                                                  font-size: .9em;
                                                                  line-height: 2;
                                                                  border: 1px solid #000000;
                                                                  border-radius: .25em;
                                                                }

02 - Lire Plus effet 02

"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?"

Afficher plus ▼

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha356-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
                                                                <div class="text-wrapper3"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis dui cursus, cursus dolor in, imperdiet lectus. Suspendisse sollicitudin turpis lobortis urna egestas euismod. Mauris iaculis nulla libero, sit amet pharetra lorem dapibus id. Suspendisse malesuada, tellus non convallis dictum, arcu dui faucibus nulla, sit amet finibus neque mi vel lacus. Praesent vehicula erat ex, vel efficitur felis pellentesque a. Curabitur sit amet nunc non libero pretium accumsan vitae ut ligula. Donec vulputate varius vestibulum. Praesent in tellus semper, porta justo vel, facilisis massa. Sed condimentum quam feugiat, mollis ipsum in, vestibulum nunc. In quam nisl, porta eget aliquet vel, tempus vel sem. Quisque at mi ut sapien tincidunt accumsan non quis ante. Suspendisse rhoncus, mi sit amet luctus tincidunt, urna dolor laoreet lacus, id feugiat elit velit quis nibh. Aliquam condimentum nisi ut nisi volutpat, nec pulvinar justo elementum. Quisque id ullamcorper magna. Suspendisse orci massa, ultrices nec eros sed, condimentum ornare diam.</p><p>Aliquam faucibus, augue ac tempor rutrum, leo purus egestas ante, nec ornare justo leo eget sem. Sed dui mi, euismod nec condimentum vitae, elementum at justo. In ullamcorper orci libero, eu pharetra turpis finibus tincidunt. Cras mollis non tortor quis pretium. Integer nec elit metus. Donec iaculis maximus ex, sed tincidunt turpis vehicula vitae. Nulla imperdiet eu enim et condimentum. Quisque molestie, orci vitae laoreet efficitur, odio arcu pharetra turpis, a molestie mi dui vel dui. Donec blandit, lectus ac vehicula mattis, libero neque malesuada magna, eget volutpat sapien orci a massa. Donec at libero laoreet, elementum neque sed, pharetra augue. Fin Lorem ipsum 03.</p>
                                                                </div><div class="readmore-btn3">Afficher plus</div>
                                                                <script>
                                                                $(".text-wrapper3").each(function() {
                                                                var html = $(this).html().split(" ");
                                                                html = html.slice(0,50).join(" ") + '<span class="dots">...</span><div class="full-text">' + html.slice(50).join(" ");
                                                                $(this).html(html);
                                                                });
                                                                $('.full-text').hide();
                                                                $('.readmore-btn3').click(function (event) {
                                                                event.preventDefault();
                                                                var dots_visibility = $(this).siblings(".text-wrapper3").find("span.dots");
                                                                dots_visibility.html(dots_visibility.html() == '...' ? ' ' : '...')
                                                                $('.text-wrapper3 > p.p1').contents().unwrap();
                                                                $(this).parent().find('.full-text').slideToggle('300');
                                                                $(this).html($(this).html() == 'fermer' ? 'Afficher plus' : 'Fermer');
                                                                });
                                                                </script>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .text-wrapper p:first-child{display:inline;}.full-text{display:inline;}.readmore-btn3 {
                                                                color: #6102a1;
                                                                font-family: Raleway;
                                                                background-color: #ffffff;
                                                                font-size: 16px;
                                                                border: 1px solid #6102a1;
                                                                padding: 15px 50px;
                                                                cursor: pointer;
                                                                width: 160px;
                                                                border-radius: 30px;
                                                                height: 30px;
                                                                padding: 2px;
                                                                margin: 2px;
                                                                text-align: center;
                                                                }

03 - Lire Plus effet 03

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur

Lire Plus ▼

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <script type="text/javascript" src="http://static.xiaojukeji.com/didialift/hybrid/js/zepto.js"></script>
                                                                <div class="didi_content">
                                                                  <p>
                                                                        <h2 class="didi_student_work_info">
                                                                           Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur
                                                                        </h2>
                                                                  </p>
                                                                        <div class="didi_student_work_info_button">Lire Plus ▼</div>
                                                                </div>
                                                                
                                                                <script>
                                                                function textstr(obj,btn){
                                                                        var initFontNum = 120;    
                                                                        var initTextHeight = 96;  
                                                                
                                                                        var didiText = $(obj).text();  
                                                                        var didiHeight = $(obj).height();  
                                                                
                                                                        if(didiText.length >= initFontNum && didiHeight > initTextHeight){
                                                                            $(obj).text($(obj).text().substring(0,initFontNum));  
                                                                            $(obj).html($(obj).html()+'...');  
                                                                            $('.didi_content').css({   
                                                                                'opacity' : '1'
                                                                            });
                                                                            $(obj).css({ 
                                                                                'height':initTextHeight + 'px',
                                                                            });
                                                                            $(btn).click(function(){
                                                                                var curText = $(obj).text();  
                                                                                if(curText.length == 126){
                                                                                    $(obj).css({
                                                                                        'height' : didiHeight + 'px' ,
                                                                                        '-moz-transition' : '0.6s',
                                                                                        '-webkit-transition' : '0.6s',
                                                                                        'transition' : '0.6s'
                                                                                    });
                                                                                    $(btn).text('Fermer ▲');
                                                                                    $(obj).text(didiText); 
                                                                                }else{
                                                                                    $(obj).css({
                                                                                        'height': initTextHeight + 'px',
                                                                                        '-moz-transition' : '0.6s',
                                                                                        '-webkit-transition' : '0.6s',
                                                                                        'transition' : '0.6s'
                                                                                    });
                                                                                    $(btn).text('Lire Plus ▼');
                                                                                    setTimeout(function(){
                                                                                        $(obj).text($(obj).text().substring(0,initFontNum));
                                                                                        $(obj).html($(obj).html()+'......');
                                                                                    },500)
                                                                                }
                                                                                return false;
                                                                            });    
                                                                        }else{
                                                                            $(btn).hide();
                                                                            $('.didi_content').css({
                                                                                'opacity' : '1'
                                                                            });
                                                                        }
                                                                    };
                                                                    textstr('.didi_student_work_info','.didi_student_work_info_button');
                                                                </script>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .didi_content{
                                                                        width: 100%;
                                                                        max-width: 374px;
                                                                        margin: 0px auto;
                                                                        opacity: 0;
                                                                        }
                                                                
                                                                        .didi_student_work_info{
                                                                            font-size: 13px;
                                                                            color: #000000;
                                                                            line-height: 24px;
                                                                            margin:0 auto;
                                                                            overflow : hidden;
                                                                        }
                                                                
                                                                        .didi_student_work_info_button{
                                                                            font-size: 13px;
                                                                            font-weight:bold;
                                                                            color: #6102a1;
                                                                            line-height: 24px;
                                                                            float: right;
                                                                            margin-right: 1%;
                                                                            padding-right: 15px;
                                                                            cursor: pointer;
                                                                        }

04 - Lire Plus effet 04

Article avec du texte.Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae

Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes, de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <p>
                                                                Article avec du texte.Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae
                                                                <details>
                                                                   <summary>lire la suite...</summary>
                                                                  <p>
                                                                  Lorem Ipsum est un générateur de faux textes aléatoires. Vous choisissez le nombre de paragraphes, de mots ou de listes. Vous obtenez alors un texte aléatoire que vous pourrez ensuite utiliser librement dans vos maquettes.
                                                                  </p>
                                                                </details>
                                                                </p>

05 - Lire Plus effet 05

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel...erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <style>
                                                                #more {display: none;}
                                                                </style> 
                                                                
                                                                <div class="container">
                                                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
                                                                <button onclick="LireFunction()" id="myBtn" class="wa-btn-txt">Continuer à lire</button>
                                                                </div> 
                                                                 <script>
                                                                function LireFunction() {
                                                                  var dots = document.getElementById("dots");
                                                                  var moreText = document.getElementById("more");
                                                                  var btnText = document.getElementById("myBtn");
                                                                
                                                                  if (dots.style.display === "none") {
                                                                    dots.style.display = "inline";
                                                                    btnText.innerHTML = ('Continuer à lire'); 
                                                                    moreText.style.display = "none";
                                                                  } else {
                                                                    dots.style.display = "none";
                                                                    btnText.innerHTML = ('Fermer');
                                                                    moreText.style.display = "inline";
                                                                  }
                                                                }
                                                                </script>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                
                                                                h1 {
                                                                  font-size: 40px;
                                                                  font-weight: bold;
                                                                  font-family: Gill Sans;
                                                                color: red;
                                                                }
                                                                
                                                                p {
                                                                  font-size: 14px;
                                                                font-family: Times;
                                                                }

06 - Effets 3D Couleurs

Color fonts

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <h2 class="grays">Color fonts</h2>
                                                                <h2 class="purples">Color fonts</h2>
                                                                <h2 class="mint">Color fonts</h2>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                @font-face {
                                                                  font-family: 'Rocher';
                                                                  src: url(https://assets.codepen.io/9632/RocherColorGX.woff2);
                                                                }
                                                                
                                                                .$ {
                                                                  font-family: 'Rocher';
                                                                  text-align: center;
                                                                }
                                                                
                                                                h2 {
                                                                  font-size: 88px;
                                                                  margin: 0;
                                                                }
                                                                
                                                                @font-palette-values --Grays {
                                                                  font-family: Rocher;
                                                                  base-palette: 9;
                                                                }
                                                                
                                                                @font-palette-values --Purples {
                                                                  font-family: Rocher;
                                                                  base-palette: 6;
                                                                }
                                                                
                                                                @font-palette-values --Mint {
                                                                  font-family: Rocher;
                                                                  base-palette: 7;
                                                                }
                                                                
                                                                .grays {
                                                                  font-palette: --Grays;
                                                                }
                                                                
                                                                .purples {
                                                                  font-palette: --Purples;
                                                                }
                                                                
                                                                .mint {
                                                                  font-palette: --Mint;
                                                                }

07 - Survolez-moi

Hover Me

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                <h7>Hover Me</h7>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                .$ h7 {
                                                                  --s: 0.1em;   /* the thickness of the line */
                                                                  --c: #2c4bff; /* the color */
                                                                  
                                                                  color: #0000;
                                                                  padding-bottom: var(--s);
                                                                  background: 
                                                                    linear-gradient(90deg,var(--c) 50%,#000 0) calc(100% - var(--_p,0%))/200% 100%,
                                                                    linear-gradient(var(--c) 0 0) 0% 100%/var(--_p,0%) var(--s) no-repeat;
                                                                  -webkit-background-clip: text,padding-box;
                                                                          background-clip: text,padding-box;
                                                                  transition: 0.5s;
                                                                }
                                                                .$ h7:hover {--_p: 100%}
                                                                
                                                                
                                                                .$ body {
                                                                  height: 100vh;
                                                                  margin: 0;
                                                                  display: grid;
                                                                  place-content: center;
                                                                }
                                                                .$ h7 {
                                                                  font-family: Raleway;
                                                                  font-weight: bold;
                                                                  font-size: 5rem;
                                                                  cursor: pointer;
                                                                }

08 - Machine à écrire

I'm a

Codes à Copier/Coller :

CODE HTML

Coller ce code dans un élémént HTML

                                                                
                                                                <div class="container">
                                                                  <p class="typewriter">I'm a 
                                                                    <span data-text="web developer., designer., photographer."></span>
                                                                  </p>
                                                                </div>
                                                                <script>
                                                                var span = document.querySelector(".typewriter span");
                                                                var textArr = span.getAttribute("data-text").split(", "); 
                                                                var maxTextIndex = textArr.length; 
                                                                
                                                                var sPerChar = 0.15; 
                                                                var sBetweenWord = 1.5;
                                                                var textIndex = 0; 
                                                                
                                                                typing(textIndex, textArr[textIndex]); 
                                                                
                                                                function typing(textIndex, text) {
                                                                    var charIndex = 0; 
                                                                    var maxCharIndex = text.length - 1; 
                                                                    
                                                                    var typeInterval = setInterval(function () {
                                                                        span.innerHTML += text[charIndex]; 
                                                                        if (charIndex == maxCharIndex) {
                                                                            clearInterval(typeInterval);
                                                                            setTimeout(function() { deleting(textIndex, text) }, sBetweenWord * 1000); 
                                                                            
                                                                        } else {
                                                                            charIndex += 1; 
                                                                        }
                                                                    }, sPerChar * 1000); 
                                                                }
                                                                
                                                                function deleting(textIndex, text) {
                                                                    var minCharIndex = 0; 
                                                                    var charIndex = text.length - 1; 
                                                                
                                                                    var typeInterval = setInterval(function () {
                                                                        span.innerHTML = text.substr(0, charIndex); 
                                                                        if (charIndex == minCharIndex) {
                                                                            clearInterval(typeInterval);
                                                                            textIndex + 1 == maxTextIndex ? textIndex = 0 : textIndex += 1; 
                                                                            setTimeout(function() { typing(textIndex, textArr[textIndex]) }, sBetweenWord * 1000); 
                                                                        } else {
                                                                            charIndex -= 1; 
                                                                        }
                                                                    }, sPerChar * 1000); 
                                                                }
                                                                
                                                                </script>

CODE CSS

Coller ce code dans : Définir un code CSS associé à votre élémént HTML

                                                                
                                                                :root {
                                                                    --text-color: #6102a1;
                                                                }
                                                                
                                                                .container {
                                                                    align-items: left;
                                                                    box-sizing: border-box;
                                                                    background: var(--bg-color);
                                                                }
                                                                
                                                                .typewriter {
                                                                    font-family: Raleway;
                                                                    font-size: 42px;
                                                                    color: #000000;
                                                                    font-weight: bold;
                                                                    position: relative;
                                                                    margin: 0;
                                                                }
                                                                
                                                                .typewriter span {
                                                                    color: var(--text-color);
                                                                    text-transform: uppercase;
                                                                    padding: 10px;
                                                                    border-right: solid var(--text-color) 10px; 
                                                                    animation: cursor 1s ease-in-out infinite;
                                                                }
                                                                
                                                                @keyframes cursor {
                                                                    from { border-color: var(--text-color); }
                                                                    to { border-color: transparent; }
                                                                }
                                                                
                                                                @media (max-width: 576px) {
                                                                    .typewriter { font-size: 24px; }
                                                                }
                                                                @media (max-width: 768px) {
                                                                    .typewriter { font-size: 36px; }
                                                                }

Soutenez mon travail.

Si vous appréciez mon travail, que vous voulez l'encourager, vous pouvez faire un don ici.
Tout don, aussi petit soit-il, peut faire la différence !

Merci pour votre soutien !

FAIRE UN DON

Réalisé avec WebAcappella Fusion - 2023 wa-fusion.fr