🛌 Opdarcht Week 3

• analyseren

Ik begon aan deze opdracht met zoeken naar inspiratie op het gebied van micri interactions gewoon opzoek gaan naar geanimeerde websites waar ik ideeën vandaan kon halen.Toen ik eenmaal inspiratie had gevonden begon ik met het schetsen van een aantal ideeën, zodat ik een visueel beeld kreeg bij mijn ideeën. Zie hieronder een aantal screenshots van websites die mij inspireerde bij het maken van mijn opdracht:

• ontwerpen

• bouwen

Ik begon met de bouwfase binnen deze applicatie door gebaseerde sveltekit app op te zetten. Vervolgens maakte ik in sveltekit vier verschillende pagina's de eerste was de homepagina met title en drie button leiden tot ander pagina's. De rest van de pagina's, elke pagina, is als een andere animatie elke week. hier gebruik ik javascript library Gsap voor animeren de elementen Zie hieronder een stukje code die het gewenste effect realiseert:

    import {gsap} from 'gsap';
	import { onMount } from "svelte";
    onMount(() => {
        
         gsap.from('.card', { duration:2, opacity: 0, delay: 1,
            stagger:1
        })

    })
</script>
<div class="App">
    <section class="container">
        <frame class="card">
            <section class="face face1">
                <div class="content">
                 <h3>windows</h3>
                </div> 
            </section>
            <section class="face face2">
                <div class="content">
                    <p>
                        Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                         Deserunt quidem vero accusantium alias illum expedita commodi 
                         animi, dolorem, aspernatur cum voluptatibus consequuntur porro, 
                     <p/>
                </div> 
            </section>
 </frame>

• Integreren

Voor het integreren van dit project heb ik het simpel gehouden, zoals in voorgaande sprints door Vercel te gebruiken. mijn website stond online en is te bezoeken op Creative - coding