Archief - Op zoek naar een specifiek script

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
F

Fransz

Legacy Member
Is er iemand die een script weet, of weet op wat ik moet googlen, om hetvolgende te bekomen: er moet een kleine foto van links naar rechts gaan, achter deze foto verschijnt dan de one-liner telkens

Dit moet herhaald worden telkens :eek:
Ik deed dit vroeger altijd in Flash, maar met de i-gadgets is Flash geen optie meer.
w

woony

Legacy Member
"de" one liner, uw uitleg is nogal beperkt.
Om het simpel te zeggen , dingen laten 'bewegen' op uw scherm zonder flash , kun je bereiken met jQuery.
Je vraag klinkt nogal specifiek dus ga je dit best zelf maken.
F

Fransz

Legacy Member
Die tekst moet men kunnen veranderen. Zo specifiek is dit niet hoor, je zag dit op iedere site in de jaren 90. Iemand anders zal wel weten waarover ik het heb. Het is een camion die over het scherm moet rijden (in een afgebakende div weliswaar), van links naar rechts en daar dan stoppen.
F

Fransz

Legacy Member
Een image doen bewegen is simpel, maar hoe krijg je tekst te zien (geleidelijk aan)?
Hoe meer de camion naar rechts gaat, hoe meer je moet kunnen zien van de tekst.


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#test").animate({left: "+=500"}, 2000);
});

</script>
</head>
<body>
<div style="position:relative">
<div id="test" style="position:absolute;"><img src="test.jpg" /></div>
</div>
</body>
</html>
-

-BVR-

Legacy Member
Bedoel je zoiets: Edit this Fiddle - jsFiddle ?

Code: 
var tekst = "Dit is de tekst die bij de placeholder hoort. Deze kan door de gebruiker worden aangepast.", // tekst span
    afbeelding = $("#afbeelding"),
    tekstSpan = $("#descr"),
    w = 300; //breedte van tekstspan

tekstSpan.width(w);
afbeelding.animate({left: w + 12}, 2000);
tekstSpan.hide().text(tekst).fadeIn(2500);
b

bealzebub

Legacy Member
Voor mobile support zou je beter Zepto gebruiken, die gebruikt CSS animation ipv Javascript timers: veel vlotter, meestal hardware accelerated en minder battery drain. Dat de API quasi identiek is aan jQuery (en je dus voor desktop browsers daarvan gebruik kan maken voor backwards compatibility) is natuurlijk mooi meegenomen.
p

profound

Legacy Member
bealzebub zei:
Voor mobile support zou je beter Zepto gebruiken, die gebruikt CSS animation ipv Javascript timers: veel vlotter, meestal hardware accelerated en minder battery drain. Dat de API quasi identiek is aan jQuery (en je dus voor desktop browsers daarvan gebruik kan maken voor backwards compatibility) is natuurlijk mooi meegenomen.
Klik om te vergroten...

Ga je met css animations wel een consistent resultaat hebben op verschillende browsers?
b

bealzebub

Legacy Member
profound zei:
Ga je met css animations wel een consistent resultaat hebben op verschillende browsers?
Klik om te vergroten...

Op mobile wel (buiten misschien blackberries uit vervlogen jaren). En daar is grootte van je framework wel belangrijk als je over 3G of EDGE gaat, 9KB vs 93KB. Snelheid van Zepto, en zeker op mobile, is ook aanzienlijk beter (heeft niet de ballast die jQuery heeft).

Voor de desktop kan je nog altijd jQuery in de plaats zetten als je dat wil.
-

-BVR-

Legacy Member
CSS3 versie :)
Edit this Fiddle - jsFiddle
Code: 
img#afbeelding {
    position: absolute;
    z-index: 1;
    animation: moveImg 2s ease 1 forwards;
    -webkit-animation: moveImg 2s ease 1 forwards;
}

#descr {
    display: block;
    width: 300px;
    animation: showSpan 2.5s ease 1 forwards;
    -webkit-animation: showSpan 2.5s ease 1 forwards;
}

@-moz-keyframes moveImg {
    0% {
        left: 0;
    }
    100% {
        left: 312px;
    }
}

@-webkit-keyframes moveImg {
    0% {
        left: 0;
    }
    100% {
        left: 312px;
    }
}

@keyframes moveImg {
    0% {
        left: 0;
    }
    100% {
        left: 312px;
    }
}

@-moz-keyframes showSpan {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes showSpan {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes showSpan {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}
K

KingOfWoods

Legacy Member
Mss niet direct de oplossing die hier aangeboden wordt, maar als je nu een div van 800px width hebt, en je maakt je vrachtwagen div 850px width, met vooraan een band met zelfde kleur als je background, dan is tekst erachter niet zichtbaar, en als je dan je vrachtwagen laat verschuiven wordt de tekst toch mee zichtbaar achteraan. Just my 2 cents e en dan heb je al dat scripten niet nodig.
-

-BVR-

Legacy Member
Streaker zei:
Mss niet direct de oplossing die hier aangeboden wordt, maar als je nu een div van 800px width hebt, en je maakt je vrachtwagen div 850px width, met vooraan een band met zelfde kleur als je background, dan is tekst erachter niet zichtbaar, en als je dan je vrachtwagen laat verschuiven wordt de tekst toch mee zichtbaar achteraan. Just my 2 cents e en dan heb je al dat scripten niet nodig.
Klik om te vergroten...

Dan moet je toch sowieso de vrachtwagen laten verschuiven (met een script). Daarnaast: aangezien je afbeelding dan groter wordt voor niets en dus ook een groter bestand zal vormen en dus langere laadtijden oplevert, is het beter om even een kort scriptje te schrijven.
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan