CSS animácia z jedného okraja obrazovky na druhý

Programovacie jazyky, rady, poradňa...
Solo_Kamen
King
King
Používateľov profilový obrázok
Príspevky: 1928
Registrovaný: 10 dec 2012, 21:27

CSS animácia z jedného okraja obrazovky na druhý

Príspevok od používateľa Solo_Kamen »

Prajem dobrý večer kolektívnemu vedomu hojka a obraciam sa na vás so žiadostou o jednoduchú ale velmi potrebnú pomoc.

Na webovej stránke mám niekolko elementov(obrázky), a potrebujem aby sa neustále pohybovali z lavého okraja stánky ku pravému a späť. Vtipné na tom je, že vopred nie je známa dĺžka všetkých obrázkov dokopy ani šírka kontajneru v ktorom sa toto má diať. Keby to fungovalo tak ako si to predstavujem, tak by to bola jednoduchá vec.

Kód: Vybrať všetko

.wrapper {
  width: 100%;
  background-color: #ffffff;
  position: relative;
  height: 50px;
  line-height: 50px;
  overflow: hidden;

}

.marquee {
  position: absolute;
  left: 80%
  width: 100%;
  background-color: #fff;
  animation-name: marquee;
  animation-duration: 8s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  display: flex;
  overflow: hidden;


}

@keyframes marquee {
  from {
    left: 5%;
  }
  to {
    right: 5%; // a presne takto to nefunguje
  }
}
Ideálnym riešením by bolo posúvať tieto elementy z pozície X pixelov od lavého okraja po pozíciu Y pixelov od pravého okraja. Keď sa o to ale pokúsim, tak sa tieto elementy zobrazia na jednej strane stránky a po zadanom časovom limite skočia na druhú. Prosím vás o radu a pomoc, webové veci nie sú moja najsilnejšia stránka.
Forsaken
King
King
Používateľov profilový obrázok
Príspevky: 1918
Registrovaný: 14 mar 2010, 0:39

Re: CSS animácia z jedného okraja obrazovky na druhý

Príspevok od používateľa Forsaken »

fiddle z netu
http://jsfiddle.net/Borisko/pr2qchko/

skus sa inspirovat
Solo_Kamen
King
King
Používateľov profilový obrázok
Príspevky: 1928
Registrovaný: 10 dec 2012, 21:27

Re: CSS animácia z jedného okraja obrazovky na druhý

Príspevok od používateľa Solo_Kamen »

Konečne som mal čas sa k tomu vrátit :)

Nakoniec som tú animáciu musel spravit cez jQuery, pretože tam som vedel jednoducho získať šírku okna a podla toho určiť, ako moc sa má tento objekt posunúť. Táto animácia sa neustále opakuje.

Vlastne som ani neupresnil, že sa jednalo o panel z obrázkami o šírke 1800 pixelov, ktorý sa mal posúvat tak aby uživatel postupne videl všetky.

Kód: Vybrať všetko

function posuvatko(){
    $window_width = ($(window).width());
    $posun = -1800 +  $window_width;
    document.getElementById("debug").innerHTML =  $posun;
    $(".marquee").animate({
        left: $posun
    },20000,"linear");
    // môže sa aktualizovať iba po ukončení prvého kroku animácie. nemám pocit, že to funguje
    $window_width = ($(window).width());
    $posun = -1800 + $window_width;
    document.getElementById("debug").innerHTML =  $posun;
    $(".marquee").animate({
        left: 10
    },20000,"linear", posuvatko);

}

$(document).ready(function(){
    posuvatko();
});  
Napísať odpoveď