11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)
  • Q:
    Bijdrager
    computer space

    Javascript twee divs opplakken en weer weghalen

    Ik wil op een website dat er na 1-2 seconde 2 divs verschijnen (post-its), niet tegelijk maar net na elkaar, en dan na 10 en 15 seconde weer verdwijnen.

    Styling van de div’s zit nu al helemaal in CSS, twee blokken #postit1 en #postit2.

    Met één postit en deze enkel laten verdwijnen werkt het met deze code, maar ik heb geen idee hoe ik dit doorzet naar verschijnen en verdwijnen en met 2 verschillende timings:

     
    <script type = "text/javascript">
    	function hideMessage() {
    	document.getElementById("postit1").style.display="none"; 
    	}
     
    	function startTimer() {
    	var tim = window.setTimeout("hideMessage()", 5000);
    	}
    	</script>
    </head>
    <body onload = "startTimer()">
     
    Bijdrager
    Shmoo

    Dat kan toch gewoon met CSS transitions en Keyframes ?

    Bijdrager
    computer space

    Klinkt goed, kan nog niet echt een goed voorbeeld vinden, anders dan met een :hover
    Bij het googlen kom ik bij toevoegen css3 only nog steeds vooral JQuery opties tegen.

    Bijdrager
    Shmoo

    Ik zal je straks even iets laten zien zoals ik denk dat het ook kan ik ga nu eerst even iets eten.

    Bijdrager
    Wyodor

    Zoiet?

    http://wyodor.byethost8.com/includes/postit.html

    Tussen het piepers schillen in elkaar geflanst.

    Bijdrager
    computer space

    Top, dat doet het voor nu. Ben nog wel benieuwd naar de 100% CSS variant.

    Bijdrager
    Shmoo

    Het is snel gemaakt dus je zal de animaties natuurlijk nog moeten bijslijpen zodat het iets meer ‘smooth’ verloopt en wanneer je ze op elkaar wilt tonen moet je er natuurlijk een position absolute aangeven.

    https://dl.dropboxusercontent.com/u/75896077/online/gridje/index.html

    Bijdrager
    computer space
    Shmoo op 14 april 2014

    Het is snel gemaakt dus je zal de animaties natuurlijk nog moeten bijslijpen zodat het iets meer ‘smooth’ verloopt en wanneer je ze op elkaar wilt tonen moet je er natuurlijk een position absolute aangeven.

    https://dl.dropboxusercontent.com/u/75896077/online/gridje/index.html

    Helemaal top! Bedankt.
    Ik heb wel dit gedaan:

     
    @-moz-keyframes note1 {
     
    	0% { opacity: 0; }
    	10% { opacity: 1; }
    	90% { opacity: 1; }
    	100% { opacity: 0; }
     
    }
     

    Anders is ie alleen maar aan het faden.

    Bijdrager
    computer space

    Wat me trouwens opvalt:
    In Chrome blijft de tekst wazig na het faden, in Firefox zie je een kleine verspringing en daarna is alles een stuk scherper.

    Bijdrager
    Shmoo

    Het probleem dat jij nu aangeeft heeft te maken met het feit dat je opacity gebruikt om de gehele content te verbergen. Binnen die gehele content zitten een x aantal onderdelen zoals backgrounds, borders, colors en teksten deze onderdelen renderen weer allemaal net even iets anders op opacity dat niet zo nauwkeurig online werkt als dat het in bijv. PS doet.

    Wat je nu moet doen is een beste manier vinden die bij de animatie past. Maken van animaties is echt tijdrovend en daar moet je heel precies in zijn maar je kunt natuurlijk met transitions werken ease-in, ease-out en-/of gewoon ease.

    Daarnaast kunt je ook de CSS filter attribute gebruiken daar zit ook een opacity optie in verwerkt en miss. luisteren browsers naar filter beter dan naar gewoon opacity. Het is allemaal een beetje testen.

    Nog een optie is om al die onderdelen zoals backgrounds, borders, colors en teksten een RGBa(); kleurencode te geven waar een opacity in verwerkt zit dan kun je tijdens de animatie die veel preciezer sturen welke onderdelen hoeveel moeten opacity moeten hebben tijden de animaties.

    Kortom het is testen , testen en testen om het precies te krijgen zoals jij dat wilt.

11 berichten aan het bekijken - 1 tot 11 (van in totaal 11)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.