Delni

Ker se mi zdi, da bo rešitev za mojo situacijo javascript bom objavil v to rubriko.

Skratka: ima kdo idejo, kako rešil situacijo, ki je vidna v sliki:

Gre za cookie overlay, zadaj je v fullscreen slika avtomobila.
Ideja je, da je na vrhu še ena slika, ki simulira avtomobilske luči.

Rešitev sem si zamislil tako, da bi v neki poziciji nad overlayom določil npr. div z sliko teh luči kot ozadjem. Slika je v delu, kjer se vidi ozadje oz. avtomobil transparentna, drugače pa črna (kot cookie overlay). Ideja je, da bi nekako v teh dimenzijah izbrisal črno ozadje od cookie overlaya.

Curkrček za na koncu je še ta, da bi se ta div moral premikati skupaj z kurzorjem (ampak za to mislim da že imam rešitev).

Kar nekaj časa sem skušal najti rešitev samo z css/html, ampak ni šlo, z javascriptom pa mi zaenkrat še ni ratalo.

Verjamem, da se da rešiti tudi drugače, kot sem zadevo zastavil jaz.

Hvala!

6 odgovorov

Sem ga usral pri naslovu :/

Na tak način (brez zoom efekta)? - http://www.onextrapixel.com/examples/interactive-background/index5.html

Lahko uporabiš ta plugin lahko pa se lotiš custom rešitve. Če te zanima custom povej, ti lahko napišem kako bi jaz to rešil :)

2

Hja, sem malo testiral in po moje s tem pluginom ne bo šlo.
Kakšen je tvoj predlog?

če te jaz prav razumem bi ti rad, če gledeva zgornjo sliko, premikal "luči" okoli po sliki, glede na pozicijo miške?

Zakaj pa ne position in z-index, potem pa movable div http://jsfiddle.net/wUAGP/440/ ?

Ja edini problem je to ulovit, da je celotna zadeva tako kot mora bit :D

En primer: http://jsfiddle.net/qyp2c89o/1/