Iemand handig met HTML 5?

Index

» digital corner

» development

actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
pi_130494669
Hallo Fok,

omdat ik totaal niet kan scripten, maar wel met een idee zit, vroeg ik me af of hier op fok mensen zijn die wél kunnen scripten en die mij misschien op weg kunnen helpen om mijn idee te realiseren.

Het is van belang dat er geen Flash aan te pas komt, want ik zou ook graag willen dat het uiteindelijk op een mobieltje ongeveer hetzelfde eruit ziet als in een desktop browser (op de roll-overs na dan).

Omdat een plaatje meer zegt dan 1000 woorden, hen ik even snel een voorbeeldje gemaakt van wat ik ongeveer voor ogen heb qua werking:


Wie kan mij helpen? Werkende code aanleveren is kratje bier krijgen :)
(onder voorbehoud dat ik niet opeens van 10 mensen een code toegestuurd krijg haha)

Bedankt voor je tijd.

very

[ Bericht 14% gewijzigd door very op 26-08-2013 22:27:14 ]
People assume too much.
  maandag 26 augustus 2013 @ 22:23:00 #2
134533 donroyco
dus niet Donroyco
pi_130495012
Pssst, er is een centraal topic waar alle HTML(5)'ers aanwezig zijn: DIG / [html, css, js] topicid++
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
  FOK!-Schrikkelbaas maandag 26 augustus 2013 @ 22:24:27 #3
1972 Swetsenegger
Egocentrische Narcist
pi_130495089
Zal vast wel een JS script voor bestaan die dit kan :)
 | FOK! Schrikkelbaasch
pi_130495116
quote:
7s.gif Op maandag 26 augustus 2013 22:23 schreef donroyco het volgende:
Pssst, er is een centraal topic waar alle HTML(5)'ers aanwezig zijn: DIG / [html, css, js] topicid++
Ooeeh...daar drop ik mijn vraag ook even. Thanks :)
People assume too much.
pi_130498104
quote:
0s.gif Op maandag 26 augustus 2013 22:24 schreef Swetsenegger het volgende:
Zal vast wel een JS script voor bestaan die dit kan :)
Ik heb geen idee :{
People assume too much.
  maandag 26 augustus 2013 @ 23:16:44 #6
191823 ludicrous_monk
Met de grappige habijt
pi_130498248
Hier heb je geen HTML5 voor nodig, CSS3 + javascript is voldoende.
Ik zou een divje maken met de foto als achtergrond, en op de div een drop-shadow aan de binnenkant instellen. Vervolgens de background position animeren met een scriptje.

Overvloeien van plaatjes is iets lastiger, maar moet ook niet onmogelijk zijn, iemand ideeën?
Edit: dat kan natuurlijk met CSS transitions :)
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
pi_130498805
quote:
0s.gif Op maandag 26 augustus 2013 23:16 schreef ludicrous_monk het volgende:
Hier heb je geen HTML5 voor nodig, CSS3 + javascript is voldoende.
Ik zou een divje maken met de foto als achtergrond, en op de div een drop-shadow aan de binnenkant instellen. Vervolgens de background position animeren met een scriptje.

Overvloeien van plaatjes is iets lastiger, maar moet ook niet onmogelijk zijn, iemand ideeën?
Edit: dat kan natuurlijk met CSS transitions :)
Bedankt. Echter heb ik zo weinig kaas gegeten van dit onderwerp dat zelfs dit me nog als wartaal in de oren klinkt. Maar ik zal morgen eens kijken of ik een beetje kan googlen wat wat is.

PS: is deze door jouw beschreven methode ook werkbaar op mobiele browsers?
People assume too much.
  maandag 26 augustus 2013 @ 23:44:44 #8
191823 ludicrous_monk
Met de grappige habijt
pi_130499482
quote:
0s.gif Op maandag 26 augustus 2013 23:29 schreef very het volgende:

[..]

Bedankt. Echter heb ik zo weinig kaas gegeten van dit onderwerp dat zelfs dit me nog als wartaal in de oren klinkt. Maar ik zal morgen eens kijken of ik een beetje kan googlen wat wat is.

PS: is deze door jouw beschreven methode ook werkbaar op mobiele browsers?
Vond het zelf wel interessant, ben al code aan het schrijven ;)
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
pi_130499574
quote:
0s.gif Op maandag 26 augustus 2013 23:44 schreef ludicrous_monk het volgende:

[..]

Vond het zelf wel interessant, ben al code aan het schrijven ;)
^O^

Ik ben erg benieuwd :)

Trouwens: misschien tips waar ik zelf goed kan beginnen om ook een beetje kennis te krijgen op dit vlak, al is het maar minimaal?
People assume too much.
  maandag 26 augustus 2013 @ 23:49:40 #10
191823 ludicrous_monk
Met de grappige habijt
pi_130499690
quote:
0s.gif Op maandag 26 augustus 2013 23:46 schreef very het volgende:

[..]

^O^

Ik ben erg benieuwd :)

Trouwens: misschien tips waar ik zelf goed kan beginnen om ook een beetje kennis te krijgen op dit vlak, al is het maar minimaal?
Heel veel kloten, en zoeken naar tutorials over css, javascript, html5, jquery (handig!). Als je dat elke dag een uurtje of twee doet dan weet je na een maand echt heel veel.
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
  maandag 26 augustus 2013 @ 23:50:17 #11
351760 Adrenalini
Amazing Adrenalini Brothers
pi_130499711
Een paar jaar geleden stonden hier regelmatig leuke dingen op:

http://jqueryfordesigners.com/

Maar ik zie dat het niet meer heel actief wordt bijgehouden. Maar met google kom je al een heel eind als je dit wilt leren.
  maandag 26 augustus 2013 @ 23:54:27 #12
118011 BrainOverfloW
Fok! around the Clock!
pi_130499871
quote:
0s.gif Op maandag 26 augustus 2013 23:46 schreef very het volgende:

[..]

^O^

Ik ben erg benieuwd :)

Trouwens: misschien tips waar ik zelf goed kan beginnen om ook een beetje kennis te krijgen op dit vlak, al is het maar minimaal?
30 Days to learn HTML & CSS

Daar kun je in 30 korte instructie filmpjes de basis van het HTML en CSS programmeren leren.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
pi_130499892
quote:
0s.gif Op maandag 26 augustus 2013 23:49 schreef ludicrous_monk het volgende:

[..]

Heel veel kloten, en zoeken naar tutorials over css, javascript, html5, jquery (handig!). Als je dat elke dag een uurtje of twee doet dan weet je na een maand echt heel veel.
Is het handig om eerst bijv. basic html te leren, en dan steeds een nieuw onderwerp daar bij?
Want ik heb echt geen idee waar te beginnen haha.
People assume too much.
pi_130499900
quote:
0s.gif Op maandag 26 augustus 2013 23:50 schreef Adrenalini het volgende:
Een paar jaar geleden stonden hier regelmatig leuke dingen op:

http://jqueryfordesigners.com/

Maar ik zie dat het niet meer heel actief wordt bijgehouden. Maar met google kom je al een heel eind als je dit wilt leren.
Ga eens kijken. Thanks! ^O^
People assume too much.
pi_130499955
quote:
0s.gif Op maandag 26 augustus 2013 23:54 schreef BrainOverfloW het volgende:

[..]

30 Days to learn HTML & CSS

Daar kun je in 30 korte instructie filmpjes de basis van het HTML en CSS programmeren leren.
Awesome! Die ga ik doen :Y
People assume too much.
  dinsdag 27 augustus 2013 @ 00:13:22 #16
118011 BrainOverfloW
Fok! around the Clock!
pi_130500456
quote:
0s.gif Op maandag 26 augustus 2013 23:56 schreef very het volgende:

[..]

Awesome! Die ga ik doen :Y
Mocht je de smaak straks te pakken hebben en het leuk blijven vinden kun je ook nog door gaan met 30 days to learn jQuery
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
pi_130500544
quote:
0s.gif Op dinsdag 27 augustus 2013 00:13 schreef BrainOverfloW het volgende:

[..]

Mocht je de smaak straks te pakken hebben en het leuk blijven vinden kun je ook nog door gaan met 30 days to learn jQuery
^O^
Ook varianten met javascript en html 5 toevallig? :P
People assume too much.
pi_130500593
W3schools.com

Ik zou beginnen met de basis van html, daarna van css en daarna van javascript te leren.
No citizen has a right to be an amateur in the matter of physical training...what a disgrace it is for a man to grow old without ever seeing the beauty and strength of which his body is capable.
pi_130500746
Ondertussen al iemand klaar met schrijven btw?
No citizen has a right to be an amateur in the matter of physical training...what a disgrace it is for a man to grow old without ever seeing the beauty and strength of which his body is capable.
  dinsdag 27 augustus 2013 @ 00:28:47 #20
118011 BrainOverfloW
Fok! around the Clock!
pi_130500906
quote:
0s.gif Op dinsdag 27 augustus 2013 00:15 schreef very het volgende:

[..]

^O^
Ook varianten met javascript en html 5 toevallig? :P
HTML5 is gewoon de versie waar HTML nu is, dus dat zit in de eerste cursus. jQuery is een hele verzameling javascript code (ook wel een javascript bibiliotheek genoemt) die het werken in javascript vergemakkelijken. Dus met de tweede cursus leer je de basis van dingen die met javascript mogelijk zijn, op een manier die een stuk minder code nodig heeft dan als je helemaal vanaf 0 zelf begint.
Whether or not you can become great at something, you can always become better.
And one day you'll wake up and find out how good you actually became, having transcended whatever limits you might have thought you couldn't pass.
Neil Degrasse Tyson
pi_130501039
quote:
0s.gif Op dinsdag 27 augustus 2013 00:28 schreef BrainOverfloW het volgende:

[..]

HTML5 is gewoon de versie waar HTML nu is, dus dat zit in de eerste cursus. jQuery is een hele verzameling javascript code (ook wel een javascript bibiliotheek genoemt) die het werken in javascript vergemakkelijken. Dus met de tweede cursus leer je de basis van dingen die met javascript mogelijk zijn, op een manier die een stuk minder code nodig heeft dan als je helemaal vanaf 0 zelf begint.
Ah...top!
Ik ga ze binnenkort eens proberen :Y
People assume too much.
  dinsdag 27 augustus 2013 @ 00:53:10 #22
191823 ludicrous_monk
Met de grappige habijt
pi_130501445
quote:
0s.gif Op maandag 26 augustus 2013 23:46 schreef very het volgende:

[..]

^O^

Ik ben erg benieuwd :)
Nog niet heel zwaar gecommentarieerd, maar wel getest. Hier komt ie:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159		<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <script data-src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" style="visibility:hidden;"></script>
    <style>
    body
    {
        background:#111;
    }
    #masker
    {
        border-radius:10px;
        width:600px;
        height:400px;
        border: 2px solid #ccc;
        box-shadow: 3px 3px 8px 0px #000 inset;
        overflow:hidden;
        position:relative
    }
    #masker img
    {
        z-index:-1;
        position:absolute;
        display:block;
    }
    </style>
</head>
<body>
    <div id="masker">
        <img id="plaatje1" />
        <img id="plaatje2" />
    </div>
    <script>
    // Plaatjes schuif+fade script door Ludicrous_monk :)
    $(function()
    {
        var tijd = 0;
        var x11 = 0;
        var y11 = 0;
        var x12 = 0;
        var y12 = 0;
        var x21 = 0;
        var y21 = 0;
        var x22 = 0;
        var y22 = 0;
        var p1 = $("#plaatje1");
        var p2 = $("#plaatje2");
        var wisseltijd = 200; // wisseltijd tussen plaatjes (in 50sten van seconden)
        var fadetijd = 50; // fadetijd plaatjes (in 50sten van seconden)
        var plaatjes = ["Plaatje1.jpg", "Plaatje2.jpg", "Mixer2.jpg"]; // stel hier de URLs in van je plaatjes.
        var index = 0;
        var first = true;
    
        p1.attr("src", plaatjes[index]);
        p2.attr("src", plaatjes[index + 1]);
        
        update = function()
        {
            if (first)
            {
                x11 = 0.5 * Math.random() * (p1.width() - $("#masker").width());
                x12 = (0.5 + 0.5 * Math.random()) * (p1.width() - $("#masker").width());
                y11 = 0.5 * Math.random() * (p1.height() - $("#masker").height());
                y12 = (0.5 + 0.5 * Math.random()) * (p1.height() - $("#masker").height());
                first = false;
            }
            if (tijd == 0)
            {
                p2.attr("src", plaatjes[index + 1]);
                p2.css("opacity", 0);
            }
            
            if (tijd == (wisseltijd - fadetijd))
            {
                x21 = 0.5 * Math.random() * (p2.width() - $("#masker").width());
                x22 = (0.5 + 0.5 * Math.random()) * (p2.width() - $("#masker").width());
                y21 = 0.5 * Math.random() * (p2.height() - $("#masker").height());
                y22 = (0.5 + 0.5 * Math.random()) * (p2.height() - $("#masker").height());
                if (Math.random() > 0.5)
                {
                    var temp = x22;
                    x22 = x21;
                    x21 = temp;
                }
                if (Math.random() > 0.5)
                {
                    var temp = y22;
                    y22 = y21;
                    y21 = temp;
                }
            }
            
            if (tijd < wisseltijd)
            {
                p1.css('left', -(x11 + (x12 - x11) * (tijd + fadetijd) / (wisseltijd + 2*fadetijd)));
                p1.css('top', -(y11 + (y12 - y11) * (tijd + fadetijd) / (wisseltijd + 2*fadetijd)));
            }
            else if (tijd > (2 * wisseltijd - fadetijd))
            {
                p1.css('left', -(x11 + (x12 - x11) * (tijd - (2 * wisseltijd - fadetijd)) / (wisseltijd + 2*fadetijd)));
                p1.css('top', -(y11 + (y12 - y11) * (tijd - (2 * wisseltijd - fadetijd)) / (wisseltijd + 2*fadetijd)));
            }
            
            if (tijd >= (wisseltijd - fadetijd) && tijd <= wisseltijd)
            {
                p2.css("opacity", (tijd - wisseltijd + fadetijd) / fadetijd);
            }
            
            if (tijd >= (wisseltijd - fadetijd))
            {
                p2.css('left', -(x21 + (x22 - x21) * (tijd - wisseltijd + fadetijd) / (wisseltijd + 2*fadetijd)));
                p2.css('top', -(y21 + (y22 - y21) * (tijd - wisseltijd + fadetijd) / (wisseltijd + 2*fadetijd)));
            }
            
            if (tijd == wisseltijd)
            {
                index += 2;
                if (index >= plaatjes.length)
                    index = 0;
                p1.attr("src", plaatjes[index]);
            }
            
            if (tijd == (wisseltijd * 2 - fadetijd))
            {
                x11 = 0.5 * Math.random() * (p1.width() - $("#masker").width());
                x12 = (0.5 + 0.5 * Math.random()) * (p1.width() - $("#masker").width());
                y11 = 0.5 * Math.random() * (p1.height() - $("#masker").height());
                y12 = (0.5 + 0.5 * Math.random()) * (p1.height() - $("#masker").height());
                if (Math.random() > 0.5)
                {
                    var temp = x12;
                    x12 = x11;
                    x11 = temp;
                }
                if (Math.random() > 0.5)
                {
                    var temp = y12;
                    y12 = y11;
                    y11 = temp;
                }
            }
            
            if (tijd > (wisseltijd * 2 - fadetijd))
            {
                p2.css("opacity", 1.0 - (tijd - wisseltijd * 2 + fadetijd) / fadetijd);
            }
            
            tijd += 1;
            
            if (tijd >= (2 * wisseltijd))
                tijd = 0;
        }
        
        setInterval("update()", 20);
    });
    </script>
</body>
</html>


[ Bericht 2% gewijzigd door ludicrous_monk op 27-08-2013 01:08:22 ]
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
  dinsdag 27 augustus 2013 @ 00:55:16 #23
191823 ludicrous_monk
Met de grappige habijt
pi_130501483
Extra info: maakt gebruik van jQuery, dus als je de code wilt snappen moet je dat ook leren.

Let vooral op het stukje
1
2
3		var wisseltijd = 200; // wisseltijd tussen plaatjes (in 50sten van seconden)
        var fadetijd = 50; // fadetijd plaatjes (in 50sten van seconden)
        var plaatjes = ["Plaatje1.jpg", "Plaatje2.jpg"]; // stel hier de URLs in van je plaatjes.

Daar kan je wat instellingen aanpassen. Om te testen moet je even twee plaatjes zetten in dezelfde map als de html file. De code heeft minstens twee plaatjes nodig, maar meer kan ook. Verder moeten de plaatjes groter zijn dan de div in de code (in het voorbeeld 300x200).
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
  dinsdag 27 augustus 2013 @ 01:09:15 #24
191823 ludicrous_monk
Met de grappige habijt
pi_130501680
Net m'n eerdere post geedit om bugs met laden te verwijderen.
"The only real valuable thing is intuition. The intellect has little to do on the road to discovery."
pi_130501956
Geniaal! Ik ga morgen een beetje klooien en kijken of ik er wat mee kan.
Indien het allemaal werkt > bier :)

Waar woon je ongeveer?
People assume too much.
pi_130512693
ludicrous_monk heeft een zeer welverdiend kratje bier Jannetjes in het verschiet!
Mijn dank is groot. Ik kom zsm je kant op ;)

Zie hier het resultaat:
www.ferrypasschier.com
People assume too much.
  dinsdag 27 augustus 2013 @ 14:19:03 #27
134533 donroyco
dus niet Donroyco
pi_130512800
quote:
0s.gif Op dinsdag 27 augustus 2013 14:15 schreef very het volgende:
ludicrous_monk heeft een zeer welverdiend kratje bier Jannetjes in het verschiet!
Mijn dank is groot. Ik kom zsm je kant op ;)

Zie hier het resultaat:
www.ferrypasschier.com
Het begin is er. Je code kan wel wat netter, net als de transities die vrij schokkerig. Daarnaast ga je nooit gevonden worden via Google en hebben blinden niks aan je website.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_130512874
quote:
7s.gif Op dinsdag 27 augustus 2013 14:19 schreef donroyco het volgende:

[..]

Het begin is er. Je code kan wel wat netter, net als de transities die vrij schokkerig. Daarnaast ga je nooit gevonden worden via Google en hebben blinden niks aan je website.
Hoe zorg ik dat het schokkerige eruit gaat? En niet gevonden worden in google is van later belang.
En blinden hebben sowieso niks aan mijn website ;)

Daarbij is het niet mijn code, maar van de monk. Alle eer gaat naar hem...ik weet (nog) niks van code haha

PS: als ik op mobiel bekijk, dan zie ik een heel klein randje om het masker-overlay plaatje zitten.
Hoe krijg ik deze weg?
People assume too much.
  dinsdag 27 augustus 2013 @ 14:30:43 #29
134533 donroyco
dus niet Donroyco
pi_130513154
quote:
0s.gif Op dinsdag 27 augustus 2013 14:21 schreef very het volgende:

[..]

Hoe zorg ik dat het schokkerige eruit gaat? En niet gevonden worden in google is van later belang.
En blinden hebben sowieso niks aan mijn website ;)

Daarbij is het niet mijn code, maar van de monk. Alle eer gaat naar hem...ik weet (nog) niks van code haha

PS: als ik op mobiel bekijk, dan zie ik een heel klein randje om het masker-overlay plaatje zitten.
Hoe krijg ik deze weg?
Door in je transitie jQuery animation te gebruiken. SEO is altijd belangrijk. Blinden kunnen wél op je website terecht komen, maar als ze willen doorklikken, weten ze niet waar ze naartoe gaan. Het gaat niet alleen om het zien, maar ook wat de inhoud van de website is.

Dat randje is niet te voorkomen. Lees maar:
quote:
I had a similar problem in a recent project where I had background image masks with different background color to colorize the resulting icons in mobile Safari. The problem was that when the page was scaled down by Safari, there was a line of the background color showing around the image, even though it should have been masked. I never found a way to prevent that leaking of the background color when the page is scaled down. It's clearly an error in mobile Safari's algorithms that recalculate the background and mask. I did find a workaround: I put an outline on the element with the same color as the background of the element's parent. The outline is outside the element and therefore masks the part bleeding out. If your element's parent has a pattern background that's drastic, this won't work that well, but if it's a solid color, it'll do just fine.
Bron.
Op maandag 29 september 2008 11:45 schreef HostiMeister het volgende:
Dat is zeg maar de Nederlandse taal op een vuige keukentafel voorover buigen en hem dan zonder glijmiddel anaal verkrachten. :'(
pi_130513326
quote:
7s.gif Op dinsdag 27 augustus 2013 14:30 schreef donroyco het volgende:

[..]

Door in je transitie jQuery animation te gebruiken. SEO is altijd belangrijk.
Uhm.. :{

quote:
Blinden kunnen wél op je website terecht komen, maar als ze willen doorklikken, weten ze niet waar ze naartoe gaan.Het gaat niet alleen om het zien, maar ook wat de inhoud van de website is.
Met alle respect voor blinden, maar die hebben niks te zoeken op mijn website, aangezien visuele beelden maken is wat ik doe en dat wil laten zien. Mijn site is een linkportal naar plekken waar men nu alsnog kan kijken naar mijn portfolio.

quote:
Dat randje is niet te voorkomen. Lees maar:
[...]

Bron.
Redeneer ik goed dat wanneer ik mijn FP_mask_overlay.png iets groter maak, maar het maskerveld het zelfde laat dat het dan weg is?

Probleem opgelost. Thanks Monk! ^O^

[ Bericht 5% gewijzigd door very op 27-08-2013 17:50:57 ]
People assume too much.
actieve topics nieuwe topics
abonnement Unibet Coolblue Bitvavo
Iemand handig met HTML 5?
Index

» digital corner

» development

Forum Opties
Forumhop:
Hop naar:
(afkorting, bv 'KLB')