Program do przewijania textu

badys · Styczeń 17, 2017

Witam

Otóż szukam i znaleźć nie mogę takiego programu dzięki któremu mógłbym wrzucić text i byłby przewijany w pasku o dowolnych rozmiarach od lewej do prawej. Chcialbym sobie na drugim monitorze wrzucic słówka z języka angielskiego i zamiast czytać je non stop w pliku textowym, chcialbym sobie odpalic w takim pasku na cala szerokosc monitora. Z gory dziekuje za pomoc, pozdrawiam !

badys · Styczeń 17, 2018

Dzisiaj mija dokładnie rok i znając regulamin pewnie dostanie mi sie za dublowanie postów :| ale UP

Moze ktoś umie programować i by sie podjął takiego zadania ?

badys · Kwiecień 12, 2019

^{No one ?}

Coenn · Kwiecień 12, 2019

On 1/17/2017 at 3:56 PM, badys said:

Otóż szukam i znaleźć nie mogę takiego programu dzięki któremu mógłbym wrzucić text i byłby przewijany w pasku o dowolnych rozmiarach od lewej do prawej.(…) chcialbym sobie odpalic w takim pasku na cala szerokosc monitora.

On 1/17/2018 at 7:04 AM, badys said:

Dzisiaj mija dokładnie rok i znając regulamin pewnie dostanie mi sie za dublowanie postów :| ale UP

Powaznie po przeszlo roku nadal nie wyguglales takiej pierdoly?! =] O, boziu...

Wystarczylo wklepac w Google chocby slowa: marquee html alternative

Wyskoczyloby Ci: https://www.w3docs.com/snippets/css/how-to-have-the-marquee-effect-without-using-the-marquee-tag-with-css-javascript-and-jquery.html#make-the-marquee-effect-with-javascript

A dokladnie ta opcja: https://www.w3docs.com/tools/code-editor/2123

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      font-family: sans-serif;
      font-weight: 700;
      height: 600vh;
      background: #d66d75;
      background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      }
      .marquee .inner {
      position: relative;
      width: 100%;
      display: flex;
      color: white;
      font-size: 8rem;
      }
      .marquee .inner > * {
      white-space: nowrap;
      padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Hello world of humans.</p>
      </div>
    </div>
    <script>
      function handleMarquee(){
      	const marquee = document.querySelectorAll('.marquee');
      	let speed = 4;
      	let lastScrollPos = 0;
      	let timer;
      	
      	marquee.forEach(function(el){
      		const container = el.querySelector('.inner');
      		const content = el.querySelector('.inner > *');
      		//Get total width
      		const  elWidth = content.offsetWidth;
      		
      		
      		//Duplicate content
      		let clone = content.cloneNode(true);
      		container.appendChild(clone);
      		
      		let progress = 1;
      		function loop(){
      			progress = progress-speed;
      			if(progress <= elWidth*-1) {progress=0;}
      			container.style.transform = 'translateX(' + progress + 'px)';
      			container.style.transform += 'skewX(' + speed*0.4 + 'deg)';
      			
      			window.requestAnimationFrame(loop);
      		}
      		loop();
      	});
      	
      	window.addEventListener('scroll', function(){
      		const maxScrollValue = 12;
      		const newScrollPos = window.scrollY;
      		let scrollValue = newScrollPos - lastScrollPos;
      		
      		
      		if( scrollValue > maxScrollValue ) scrollValue = maxScrollValue;
          else if( scrollValue < -maxScrollValue ) scrollValue = -maxScrollValue;
      		
      		speed = scrollValue;
      		
      		clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
      	});
      	
      	function handleSpeedClear(){
      		speed = 4;
      	}
      };
      
      handleMarquee();
    </script>
  </body>
</html>

Po prostu skopiuj ten kod, utworz na pulpicie plik kodzik.htm, otworz ten plik w edytorze tekstu, wklej tam skopiowany kod, zapisz, a nastepnie kliknij w to, by sie otworzylo np. w Edge.

Gdyby tak Ci nie szlo, tedy zawsze mozesz robic to tak:

tworzysz plik kodzik.txt
wklejasz wen kod
zapisujesz, zamykasz plik
zmieniasz nazwe pliku na kodzik.htm (klawisz [F2] ^^)
klikasz w to i otwierasz przez przegladarke, np. Edge

Jak chcesz cos zmienic w kodzie to znowu:

zmieniasz nzawe pliku na kodzik.txt
edytujesz kod, zapisujesz, zamykasz plik
zmieniasz nazwe na kodzik.htm
odpalasz...

Czcionke zmieniasz tam, gdzie w kodzie "font-size:", np. font-size: 18rem

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
      font-family: sans-serif;
      font-weight: 700;
      height: 600vh;
      background: #d66d75;
      background: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
      }
      .marquee {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100vh;
      }
      .marquee .inner {
      position: relative;
      width: 100%;
      display: flex;
      color: white;
      font-size: 18rem;
      }
      .marquee .inner > * {
      white-space: nowrap;
      padding: 0 4rem;
      }
    </style>
  </head>
  <body>
    <div class="marquee">
      <div class="inner">
        <p>Hello world of humans.</p>
      </div>
    </div>
    <script>
      function handleMarquee(){
      	const marquee = document.querySelectorAll('.marquee');
      	let speed = 4;
      	let lastScrollPos = 0;
      	let timer;
      	
      	marquee.forEach(function(el){
      		const container = el.querySelector('.inner');
      		const content = el.querySelector('.inner > *');
      		//Get total width
      		const  elWidth = content.offsetWidth;
      		
      		
      		//Duplicate content
      		let clone = content.cloneNode(true);
      		container.appendChild(clone);
      		
      		let progress = 1;
      		function loop(){
      			progress = progress-speed;
      			if(progress <= elWidth*-1) {progress=0;}
      			container.style.transform = 'translateX(' + progress + 'px)';
      			container.style.transform += 'skewX(' + speed*0.4 + 'deg)';
      			
      			window.requestAnimationFrame(loop);
      		}
      		loop();
      	});
      	
      	window.addEventListener('scroll', function(){
      		const maxScrollValue = 12;
      		const newScrollPos = window.scrollY;
      		let scrollValue = newScrollPos - lastScrollPos;
      		
      		
      		if( scrollValue > maxScrollValue ) scrollValue = maxScrollValue;
          else if( scrollValue < -maxScrollValue ) scrollValue = -maxScrollValue;
      		
      		speed = scrollValue;
      		
      		clearTimeout(timer);
          timer = setTimeout(handleSpeedClear, 10);
      	});
      	
      	function handleSpeedClear(){
      		speed = 4;
      	}
      };
      
      handleMarquee();
    </script>
  </body>
</html>

Podalem jedno z najprostszych rozwiazan z wykorzystanie przegladarki internetowej…

badys · Kwiecień 15, 2019

Interesting concept. Bardziej myslałem o małej aplikacji do przewijania tekstu gdzie wrzucasz plik i sobie wyświetlasz, ale ta opcja z przeglądarką też jest użyteczna
CLOSE <3

Dziękuję młody człowieku za pomoc

Coenn · Kwiecień 15, 2019

Generalnie zbyt wielkim znawca WIndows nie jestem, na biezaco tez nie sledze zmian, ale... Kiedys to kojarze, ze mozna bylo ustawic pulpit jako "element sieci web" (czy cos w ten desen), a wiec chyba mogles uzyskac ten efekt bez przegladarki… Ale moge sie mocno mylic. ^^ Poza tym nie wiem czy Windows nadal pozwala na takie cuda. ^^

Zaloguj się

Zarchiwizowany

Program do przewijania textu

Polecane posty

badys

Link do komentarza

Udostępnij na innych stronach

badys

Link do komentarza

Udostępnij na innych stronach

badys

Link do komentarza

Udostępnij na innych stronach

Coenn

Link do komentarza

Udostępnij na innych stronach

badys

Link do komentarza

Udostępnij na innych stronach

Coenn

Link do komentarza

Udostępnij na innych stronach

Kto przegląda 0 użytkowników

CD-Action

Przeglądaj

Aktywność