Miten luoda kuvaan liikkuva efekti verkkosivulle?

Viestiketju alueella 'Ohjelmointi' , aloittaja Ray of Light, 05.11.2018.

  1. Ray of Light

    Rekisteröitynyt:
    04.02.2016
    Viestejä:
    2
    Pitäisi luoda verkkosivuilla olevaan kuvaan efekti, jossa kuvan vesi alkaa väreillä, kun sen aktivoi esim. jotain kohtaa klikkaamalla. Onko tämä toteutettavissa perustalliaisen osaamisella, johon kuuluu WP ja jonkin verran html & css:ää sekä kyky omaksua Adoben ohjelmia (PhotoShop ja Illustrator hyvin hallinnassa)?

    Kiitos neuvoista jo etukäteen!
     
  2. arza

    Rekisteröitynyt:
    18.11.2013
    Viestejä:
    131
    Jos giffin kuvanlaatu riittää niin oisko helpoin että on kaksi kuvaa, tavallinen png ja animoitu gif jossa vesi väreilee. Klikkaamalla sitten vaihdetaan jqueryn avulla elementin luokka (removeClass, addClass). Css-tyyliin määrittely kumpi taustakuva elementissä näytetään.

    Html:
    <div class="kuva vesi1" onClick="vaihdakuva()"></div>

    Css:
    .kuva .vesi1 {
    background-image: url('vesi1.png');
    }
    .kuva .vesi2 {
    background-image: url('vesi2.gif');
    }

    Script:
    function vaihdakuva() {
    $('.kuva').removeClass('vesi1');
    $('.kuva').addClass('vesi2');
    }
     
    Viimeksi muokattu: 06.11.2018
  3. Ray of Light

    Rekisteröitynyt:
    04.02.2016
    Viestejä:
    2
    Kiitos paljon, erityisesti koodista! Yritän näillä ohjeila. :comp:
     

Jaa tämä sivu

Alibi
Anna
Deko
Dome
Erä
Hymy
Kaksplus
Kippari
Kotilääkäri
Kotiliesi
Koululainen
Ruoka.fi
Parnasso
Seura
Suomen Kuvalehti
TM Rakennusmaailma
Tekniikan Maailma
Vauhdin Maailma
Golfpiste
Vene
Nettiauto
Ampparit
Plaza
Muropaketti