Auteur Topic: [css] :hover animeren  (gelezen 3718 keer)

0 leden en 1 gast bekijken dit topic.

xvilo

  • Global Moderator
  • Verslaafd DigitalPlace Lid
  • *****
  • Berichten: 2675
  • Karma: -44
    • Bekijk profiel
    • http://www.xvilo.com
[css] :hover animeren
« Gepost op: januari 27, 2013, 08:59:57 pm »
  • [+1]0
  • [-1]0
  • Hallo [us],

    Is het ook mogelijk een [icode:21dxdwtp]:hover[/icode:21dxdwtp] te animeren?
    want op infiniocorp.com heb ik nu de menu links staan,
    als je er met je muis over heen gaat is het BAM! normaal BAM! doorzichtig,
    nu wil ik eigenlijk dat ie er ong. een halve seconde er over doet om van normaal naar doorzicht te gaan en visaverza?

    volgens [you] moest dat kunnen  :fluit:

    //[me]

    p.s.
    i know dat de achtergrond gecopyright is... maar dit is alleen als placeholder, de echte achtergrond (featuring [you]^^) komt nog!
    « Laatst bewerkt op: januari 27, 2013, 09:01:27 pm door xvilo »


    Robin

    • Administrator
    • DigitalPlace Guru
    • *****
    • Berichten: 3158
    • Karma: 145
      • Bekijk profiel
      • http://www.robinj.be/
    Re: [css] :hover animeren
    « Reactie #1 Gepost op: januari 27, 2013, 09:01:25 pm »
  • [+1]0
  • [-1]0
  • jQuery
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »
    >><<

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    Re: [css] :hover animeren
    « Reactie #2 Gepost op: januari 27, 2013, 09:01:58 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "Robin"
    jQuery

    is het niet mogelijk om dat via de CSS te doen? want ik dacht van wel... als ik met iets van thumb en [you] kan herrineren
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »


    Robin

    • Administrator
    • DigitalPlace Guru
    • *****
    • Berichten: 3158
    • Karma: 145
      • Bekijk profiel
      • http://www.robinj.be/
    Re: [css] :hover animeren
    « Reactie #3 Gepost op: januari 27, 2013, 09:03:51 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "xvilo"
    Citaat van: "Robin"
    jQuery

    is het niet mogelijk om dat via de CSS te doen? want ik dacht van wel... als ik met iets van thumb en [you] kan herrineren
    Nee. Daar is CSS niet voor bedoelt.
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »
    >><<

    Jordy

    • DigitalPlace Lid
    • *
    • Berichten: 469
    • Karma: 2
      • Bekijk profiel
      • http://direct-dpf.snowkat.nl
    Re: [css] :hover animeren
    « Reactie #4 Gepost op: januari 27, 2013, 09:05:06 pm »
  • [+1]0
  • [-1]0
  • « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    Thumb

    • DigitalPlace Guru
    • ****
    • Berichten: 3245
    • Karma: 65
      • Bekijk profiel
      • http://www.jeroendj.nl
    Re: [css] :hover animeren
    « Reactie #5 Gepost op: januari 27, 2013, 09:17:07 pm »
  • [+1]0
  • [-1]0
  • #element { background: black; }
    #element:hover { background: none;
                     transition: background 1s linear; }
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    Loco

    • Actief DigitalPlace Lid
    • **
    • Berichten: 602
    • Karma: 13
      • Bekijk profiel
    Re: [css] :hover animeren
    « Reactie #6 Gepost op: januari 27, 2013, 10:28:36 pm »
  • [+1]0
  • [-1]0
  • Via transitions is het inderdaad mogelijk, daar kan je best leuke dingen mee doen! Met Keyframes kan je ook hele vette animaties maken, met alleen HTML en CSS3. Bijvoorbeeld:
    http://cssdeck.com/labs/solar-system
    http://cssdeck.com/labs/simple-css3-3d-cube

    Als je echt veel over transitions en animations wilt leren, zou ik deze link aanbevelen: http://html5center.sourceforge.net/Buil ... Animations

    Edit: Ik moet nog ff wennen aan die [you ] tag xD
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    Thumb

    • DigitalPlace Guru
    • ****
    • Berichten: 3245
    • Karma: 65
      • Bekijk profiel
      • http://www.jeroendj.nl
    Re: [css] :hover animeren
    « Reactie #7 Gepost op: januari 28, 2013, 12:32:32 pm »
  • [+1]0
  • [-1]0
  • We moeten echt alles voor je doen ofniet
    #element { background-image('1.png'); }
    #element:hover { background-image('2.png');
                     transition: background 1s linear; }
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    [css] :hover animeren
    « Reactie #8 Gepost op: januari 28, 2013, 11:56:09 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "Thumb"
    We moeten echt alles voor je doen ofniet
    #element { background-image('1.png'); }
    #element:hover { background-image('2.png');
                     transition: background 1s linear; }
    Huh wat? Kijk eens goed... Heb hem wat veranderd en hem ingesteld op de opacity! Ook heb ik er moz en webkit etc er Voor gepleurd! Op w3c stond dat zo.... (geen idee waarom)
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »


    Thumb

    • DigitalPlace Guru
    • ****
    • Berichten: 3245
    • Karma: 65
      • Bekijk profiel
      • http://www.jeroendj.nl
    Re: [css] :hover animeren
    « Reactie #9 Gepost op: januari 29, 2013, 03:33:24 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "xvilo"
    Citaat van: "Thumb"
    We moeten echt alles voor je doen ofniet
    #element { background-image('1.png'); }
    #element:hover { background-image('2.png');
                     transition: background 1s linear; }
    Huh wat? Kijk eens goed... Heb hem wat veranderd en hem ingesteld op de opacity! Ook heb ik er moz en webkit etc er Voor gepleurd! Op w3c stond dat zo.... (geen idee waarom)
    ja dacht je hebt 2 afbeeldingen ofzo.
    en het werkt toch ofniet? en als je geen idee hebt waarom iets zo is, waarom zoek je dat dan niet uit?
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    [css] :hover animeren
    « Reactie #10 Gepost op: januari 29, 2013, 06:37:55 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "Thumb"
    Citaat van: "xvilo"
    Citaat van: "Thumb"
    We moeten echt alles voor je doen ofniet
    #element { background-image('1.png'); }
    #element:hover { background-image('2.png');
                     transition: background 1s linear; }
    Huh wat? Kijk eens goed... Heb hem wat veranderd en hem ingesteld op de opacity! Ook heb ik er moz en webkit etc er Voor gepleurd! Op w3c stond dat zo.... (geen idee waarom)
    ja dacht je hebt 2 afbeeldingen ofzo.
    en het werkt toch ofniet? en als je geen idee hebt waarom iets zo is, waarom zoek je dat dan niet uit?

    Ik zei dat op die manier dat iemand dan zou zeggen, "dat moet omdat bla bla bla " ^^

    maar het werkt nou! Ik vind dit wel een mooie manier om landigs paginas te maken al zou de video minimalistisch moeten zijn! Of heeel duidelijk.

    Ik kijk maar eens op hier zo
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »


    Thumb

    • DigitalPlace Guru
    • ****
    • Berichten: 3245
    • Karma: 65
      • Bekijk profiel
      • http://www.jeroendj.nl
    Re: [css] :hover animeren
    « Reactie #11 Gepost op: januari 29, 2013, 11:03:40 pm »
  • [+1]0
  • [-1]0
  • het is wel redelijk. maar voor de rest van de pagina's geen video. en de mooiste functie heb je niet ge├»mplementeerd:[attachment=0:2zbzqjbg]mute.PNG[/attachment:2zbzqjbg]

    en ik zei dat omdat je moest reageren mte "ik heb t ff uitgezocht, want ik ben heus nite zo lui als jullie denken..."
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »

    xvilo

    • Global Moderator
    • Verslaafd DigitalPlace Lid
    • *****
    • Berichten: 2675
    • Karma: -44
      • Bekijk profiel
      • http://www.xvilo.com
    [css] :hover animeren
    « Reactie #12 Gepost op: januari 29, 2013, 11:10:35 pm »
  • [+1]0
  • [-1]0
  • Citaat van: "Thumb"
    het is wel redelijk. maar voor de rest van de pagina's geen video. en de mooiste functie heb je niet geïmplementeerd:[attachment=0:2ki9q3pn]mute.PNG[/attachment:2ki9q3pn]

    en ik zei dat omdat je moest reageren mte "ik heb t ff uitgezocht, want ik ben heus nite zo lui als jullie denken..."

    Ik ga het morgen wel even uitzoeken...

    De muteknop hoeft hier niet! Zodra ik het goede filmpje heb, zit er geen geluid onder... Ik heb wel de [icode:2ki9q3pn]mute[/icode:2ki9q3pn] attribut meegegeven... Dat werkt in de nieuwe chrome niet... Maar in de oude wel...
    « Laatst bewerkt op: januari 01, 1970, 01:00:00 am door Guest »