Jump to content
Sign in to follow this  
badys

Program do przewijania textu

Recommended Posts

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 !

Edited by badys

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites
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…

Edited by Coenn
  • Upvote 1

Share this post


Link to post
Share on other sites

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 :D
CLOSE <3

 

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

Share this post


Link to post
Share on other sites

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. ^^

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×