Project Creative Technologies: Voortgang week 4 - geluid toevoegen en scrollMagic

Deze week heb ik mij ook verdiept in het toevoegen van geluid aan een animatie en de mogelijkheden van scroll-effecten.

Aanpak

Voor het toevoegen van geluid heb ik eerst uitgezocht hoe je audio in HTML kunt afspelen. Vorig jaar had ik dit al eens gedaan, maar ik wist niet meer precies hoe het moest. Dit zocht ik op en ik ging ook op zoek naar een website waarmee je mp3 en ogg bestanden kunt maken.

Vervolgens wilde ik de audio toevoegen aan een timeline, zodat deze tegelijk met de animatie zou worden afgespeeld. Hier was echter niet veel uitleg over te vinden. Uiteindelijk vond ik wel wat nuttige informatie. Vervolgens heb ik geprobeerd om dit zelf toe te passen. Echter kreeg ik problemen met GreenSock en Sublime Text. De GreenSock animaties wilde niet meer afspelen. Dit moest ik dus eerst op gaan lossen. Hier ben ik lang mee bezig geweest, maar het is niet gelukt om het probleem op te lossen. Ik heb nog op het GreenSock forum om hulp gevraagd, maar daar heb ik voor alsnog geen reactie op gehad. Omdat je de audiobestanden niet in CodePen kunt gebruiken kan ik dus niet verder met deze ontwikkelstap.

Voor de mogelijkheden van scroll-effecten op een webpagina ben ik eerst naar wat voorbeelden gaan zoeken. Vervolgens heb ik gegoogled en kwam ik uit op een website met een veelgebruikte plugin. Ik ging uitzoeken hoe dit werkte. Ook vond ik nog een andere website. Op die website stond de vernieuwde versie van de plugin.

Vervolgens ben ik verschillende tutorials gaan volgen. Tot slot heb ik zelf een code geschreven. Helaas had ik deze week veel problemen met mijn laptop, wat ervoor zorgde dat ik niet goed kon werken aan de laatste ontwikkelingsstappen.

Leerervaring

Ik kwam erachter dat GreenSock niet altijd werkt met Sublime Text. Deze week lukte het niet om een nieuwe code te laten werken. De codes werkten wel in Codepen. Ik heb wel geleerd hoe ik een <allert> kan toevoegen zodat ik weet dat mijn JS goed gekoppeld is aan mijn pagina.

Het toevoegen van audio aan je HTML kan met de <audio> tag. Hierin zet je een mp3 bestand en een ogg bestand. Via deze site kun je die bestanden maken: http://media.io/

Je kunt de algemene atributes gebruiken voor audio.

De plugin voor scoll-effecten heeft ScrollMagic. Dit is een jQuery plugin voor scroll animaties met GreenSock.

Hoe werkt het:

1. Je plaatst de <script> in je code. Zowel jQuery als de ScrollMagic code

</script>

2. Voor elke scroll containter heb je een <controller>

var controller = new ScrollMagic.Controller();

3. Een <scene> bepaald wat er wanneer gebeurd. Hierdoor wordt bepaald wanneer de controller moet reageren en hoe.

var scene = new ScrollMagic.Scene();
var scene = new ScrollMagic.Scene({
offset: 100, // start scene after scrolling for 100px
duration: 400 // pin the element for 400px of scrolling
})
var scene = new ScrollMagic.Scene({
triggerElement: '#pinned-trigger1', // starting scene, when reaching this element
duration: 400 // pin the element for a total of 400px
})
.setPin('#pinned-element1'); // the element we want to pin

// Add Scene to ScrollMagic Controller
controller.addScene(scene);

4. In de <scene> kun je objecten plaatsen.

5. Voeg de <scene> toe aan de controller.

Je kunt er ook voor kiezen om de controller toe te voegen aan een <scene>

6. De volgorde waarin de elementen in de js staan, kan bepalen of de code werkt.

Resultaat

Helaas is het dus niet gelukt om audio toe te voegen aan mijn animatie. Ik ga komende week dit probleem op lossen door te zorgen dat GreenSock gewoon werkt in Sublime Text.

De scroll-animatie was gelukt, maar toen ik deze had opgeslagen werkte het niet meer. Ik heb nog wel de code: http://codepen.io/codesen/pen/RGpyGz