sortir du texte Fermé

Question

Bonjour, 

Je vous explique mon probleme, voila je suis entrain de faire un site internet (www.societesbartolo.com) le probleme est le suivant: en haut de ce site il y a un bandeau avec du texte qui defile a l'interieur jaimerai que le texte defile a l'interieur puis qui continu a ce defiler a l'exterieur du bandeau et qui sort de l'ecran?


Merci pour ce qui vont m'aidez :)

greg · Answer

j'ai oublier de dire que j'aimerai le faire ou avec du CSS ou avec JQUERY merci

Sicey · Answer

Comme ça jverrais bien faire défiler ton texte dans une div très large, et mettre ton fond (bandeau) sur une autre div (en dessous).

Sinon je sais pas, ptetre regarder au niveau des overflow ?

greg · Answer

j'essai justement d'agrandir mon div mais j'arrive pas j'ai essayé avec width marche toujours pas. Je l'aurai bien fait à ma maniere mais c'est pour un client est il veut que l'affichage soit comme ça 

Pour le overflow j'ai deja essayé sa donne rien

greg · Answer

Mon code sa done sa HTML

Construction

Rénovation

Location

Achat

Vente

CSS .word1{ font-size: 46px; } .word2{ font-size: 40px; } .word3{ font-size: 34px; } .word4{ font-size: 28px; } .word5{ font-size: 22px; } #words-banner2 { color: #FFF;margin: 0;position:relative;overflow:hidden;height:82px;} #words-banner2 div {position:absolute;bottom:10px} JAVASCRIPT var banner = { speed:750, timeoutdelay: 100, padding: 0, elements: new Array(), selector: '#words-banner2' }; banner.getPadding = function () { // Animate items banner.elements = $(banner.selector).children(); var totalWidth = 0; banner.elements.each(function () { totalWidth += parseInt($(this).outerWidth()); }); banner.padding = (900 - totalWidth) / (banner.elements.size() + 1); } banner.handle = function (init) { banner.getPadding(); var currentLeft = banner.padding; banner.elements.each(function (index) { if (init) { $(this).css('left', currentLeft).css('opacity', (1 - (index / parseInt(banner.elements.size())))); /*} else if (index == 0) { $(this).animate({'opacity': 0}, banner.speed, function () { newElement = $('

' + $(this).html() + '

'); $(this).remove(); newElement.css('opacity', 0); newElement.appendTo($(banner.selector)); newElement.css('fontSize', '22px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px'); newElement.animate({'opacity': 1}, banner.speed); });*/ } else { $(this).animate({'left': currentLeft, 'fontSize': '+=6px', 'opacity': (1 - (index / parseInt(banner.elements.size())))}, banner.speed, function () { // Strip the ' / ' chars //$(this).children('span').hide(); }); //console.log($(this).html() + ': opacity=' + (index / parseInt(banner.elements.size()))); } if (index == 0) { // Add 'first-word' CSS class to the first element $(this).addClass('first-word'); // Strip the ' / ' chars //$(this).children('span').hide(); //$(this).html($(this).html().substr(2)); } currentLeft += $(this).outerWidth() + banner.padding; }); // Set run timeout if (!init) { window.setTimeout('banner.start()', banner.timeoutdelay); } } banner.startAnimation = function() { // Init items banner.handle(true); // Set start timeout window.setTimeout('banner.start()', banner.timeoutdelay) } banner.start = function () { //console.log('start'); $(banner.selector + ' div.first-word').animate({'opacity': 0}, banner.speed, function () { newElement = $('

' + $(this).html() + '

'); $(this).remove(); newElement.css('opacity', 0); newElement.appendTo($(banner.selector)); newElement.css('fontSize', '16px').css('left', (900 - banner.padding - parseInt(newElement.outerWidth())) + 'px'); newElement.addClass('word5'); // add " / " chars to the new element //newElement.html(' / ' + newElement.html()); // Animate other elements banner.handle(); }); }

Sortir du texte

4 réponses

Discussions similaires