3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)
  • Q:
    Bijdrager
    lord anubis

    CSS – tekst area verkleinen bij scrollen en anker gebruik

    Beste,

    Ik heb inmiddels wel uren gezocht, maar met de omschrijvingen die ik gebruik vind ik totaal geen voorbeelden of suggesties op het web. Ook bij CSS-Tricks gekeken.

    Ik van de week Sparkle.app gedownload, en wil daarin het volgende integreren in een embedded box. Undwr the hood Sparkle use jquery. Dat geschreven hebbend, het gaat om het volgende.

    Een text box met tekst van b.v 6-7 regels, gecentreerd in de box van 667px w en 304px h. Deze box zit op een vaste afstand van 178px van de pagina top. De 4e regel heeft font size van 32. De rest size 24. Nu wil ik dat de tekst tijdens het omhoog scrollen van de pagina verdwijnt op de 4e regel na. Soort imploderen maar wel soepel. Deze 4e regel moet dan een font size krijgen van 48. En zal ongeveer uiteindelijk op 200px van de pagina top moeten komen, dus 25 px van de tekst top box. De, dan geïmplodeerde, text box hoogte moet dan 150px h worden.

    En natuurlijk weer terug expanderen naar normaal bij terug scrollen.

    Al geprobeerd bij W3school, maar geen resultaat.

    Iemand suggesties? Of een basis om mee te beginnen.

    Bijdrager
    Shmoo

    Dan zal je met JavaScript moeten gaan werken, dat is niet iets dat CSS doet.

     

    Wat je wel kunt doen is het veld vergroten en verkleinen op basis van of het geslecteerd is. Als als iemand het aanklikt om erin te gaan typen dan wordt het groter, klikt iemand eruit dan maak je het weer kleiner, naar de standaard hoogte.

     

    Voorbeeld

     

    Zodra je daar een scroll aan wilt verbinden moet je gaan JavaScripten.

    Bijdrager
    lord anubis

    Bedankt Shmoo

    – inmiddels dit gevonden.

      $(document).ready(function(){

    $(‘.content-wrap’).bind(‘mousewheel’, function(e){
    var current = parseInt($(this).css(‘font-size’));
    if(e.originalEvent.wheelDelta /120 > 0) {
    $(‘.content-wrap’).css(“font-size” , (current +1) +”px”);
    } else{
    $(‘.content-wrap’).css(“font-size” , (current – 1)+”px”);
    }
    });
    });

     

    dit nog niet geprobeerd op een touch device.

    Maar hier mee verder aan her borduren, zodat de ene tekst sneller verkleint dan de andere en de ander groter wordt.

    Lijst je van stappen denk ik.

    • tekst verkleinen naar 0 ( of transparant maken, maar ja dan nog te selecteren )
    • hoofd tekst vergroten
    • textarea verkleinen
    • bij minimale grootte, de onderliggende elementen laten verdwijnen net voordat ze achter de hoofdtekst omhoog scrollen.
    • En alles weer anders om als het weer naar beneden scrolt

    Gisteren nog gekeken bij de web site van deze Koreaan maar niet jouw link daar gezien. Kan je goed dingen aanpassen.

    Ook dit gevonden.

    https://jsfiddle.net/ar4ct9ab/

3 berichten aan het bekijken - 1 tot 3 (van in totaal 3)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.