Vinnaren i pepparkakshustävlingen!
2016-12-11, 15:02
  #1
Medlem
GillJungs avatar
Vad ska jag söka efter för att hitta detta fast med text:

Se stjärnbakgrunden:
http://www.deutser.com/

Se bakgrunden:
http://www.secret-wood.com/

Jag vill helt enkelt skapa samma sak men applicera det på en text så att den rör sig lite tillsammans med muspekaren fast åt motsatt håll. Resultatet blir en 3d effekt. Jag har sökt runt i två dagar efter denna efter samt försökt koda något liknande själv men helt utan resultat.

Någon som vet vad som används för att skapa effekten samt vad det heter på engelska? Måste hitta en tutorial eller liknande på nätet.
Citera
2016-12-11, 22:34
  #2
Medlem
Offices avatar
Utan att kolla koden så är det med största sannolikhet gjort med CSS3 och Javascript.

CSS3 för 3D, opacitet och rörelse.
Javascript för att få tag på musrörelserna.

Med CSS3 kan alla element få en position även längs z-axeln och rotera runt x- och y-axeln.


Googla
"css 3d basic example" så kan du nog ganska snabbt få ett hum om hur 3d-biten är uppbyggd.
"css transition ease" så ser du hur man har gjort för prickarna ska röra sig mjukt och snyggt.
"javascript mouse movement" så kan du kanske ana hur man genom musrörelserna har fått grejerna att flytta på sig.

Bakgrunden är nog lite enklare. Jag kan tänka mig att de har en bild, visar den två gånger. Den ena ligger statisk i bakgrunden, den andra halvt genomskinlig och låter sig påverkas av musrörelser.

Vad har du försökt med för kod? Har du kommit någon bit på vägen?
Citera
2016-12-11, 22:52
  #3
Medlem
Der_Richters avatar
Inte CSS3 utan WebGL. Allt körs från ett "dolt" script particle.manager.js

Det är full WebGL med en canvas. Om du går till sidan i Chrome, trycker F12 för monitor sen letar du efter mouseevents, så kommer du se att förflyttningen av musen är hookad mot tidigare nämnd js. Du kan också se hela innehållet i den js-filen och därmed hur koden fungerar. Det är en ganska snygg WebGL-implementation.
Citera
2016-12-11, 23:47
  #4
Medlem
Offices avatar
Citat:
Ursprungligen postat av Der_Richter
Inte CSS3 utan WebGL. Allt körs från ett "dolt" script particle.manager.js

Det är full WebGL med en canvas. Om du går till sidan i Chrome, trycker F12 för monitor sen letar du efter mouseevents, så kommer du se att förflyttningen av musen är hookad mot tidigare nämnd js. Du kan också se hela innehållet i den js-filen och därmed hur koden fungerar. Det är en ganska snygg WebGL-implementation.
Ok! Fel av mig.

Dock inga som helst problem att göra detta i CSS3.
Citera
2016-12-12, 16:43
  #5
Medlem
GillJungs avatar
Citat:
Ursprungligen postat av Der_Richter
Inte CSS3 utan WebGL. Allt körs från ett "dolt" script particle.manager.js

Det är full WebGL med en canvas. Om du går till sidan i Chrome, trycker F12 för monitor sen letar du efter mouseevents, så kommer du se att förflyttningen av musen är hookad mot tidigare nämnd js. Du kan också se hela innehållet i den js-filen och därmed hur koden fungerar. Det är en ganska snygg WebGL-implementation.

Oj, det var mer avancerat än vad jag trodde Kommer ta ett tag att lära sig det där.

Tack båda två, supertack!
Citera
2016-12-14, 23:19
  #6
Medlem
Codepen är en online-editor med många fina projekt där du kan kolla, ändra och bygga vidare på redan färdiga testprojekt
http://codepen.io/search/pens?q=webgl
__________________
Senast redigerad av MarcoBolan 2016-12-14 kl. 23:24.
Citera

Stöd Flashback

Flashback finansieras genom donationer från våra medlemmar och besökare. Det är med hjälp av dig vi kan fortsätta erbjuda en fri samhällsdebatt. Tack för ditt stöd!

Stöd Flashback